JS拼装动态表格-表头字段动态加载

最新推荐文章于 2024-12-19 11:27:59 发布

原创最新推荐文章于 2024-12-19 11:27:59 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js动态拼装表头字段 #动态表格

js效果专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于Ajax的健康管理系统数据获取及前端展示方法。通过解析后台返回的JSON数据，利用jQuery动态生成HTML表格，实现了医院信息、健康套餐类型及数量、健康管家人员数量等数据的有效展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据：

Response

rows(List):

packageType(List）

packages(List)

managers(List)

数据结构

<resultMap id="BaseVoResultMap" type="com.hofon.appbasis.common.dal.dataobject.HealthManagementVo" >
        <id column="ID" property="hospitalId" jdbcType="VARCHAR" />
        <result column="ADDRESS" property="address" jdbcType="VARCHAR" />
        <result column="hospitalName" property="hospitalName" jdbcType="VARCHAR" />
        <result column="REGION_ID" property="regionId" jdbcType="VARCHAR" />
        <result column="CITY_CODE" property="cityCode" jdbcType="VARCHAR" />
        <result column="PROVINCE_CODE" property="provinceCode" jdbcType="VARCHAR" />
        <result column="TIME_OPEN_MANAGER" property="timeOpenManager" jdbcType="VARCHAR" />
        <result column="IS_SHOW_MANAGERS" property="isShowManagers" jdbcType="VARCHAR" />
        <result column="cityName" property="cityName" jdbcType="VARCHAR" />
        <collection property="packageTypes" javaType="java.util.ArrayList" ofType="com.hofon.appbasis.common.dal.dataobject.HealthyPackageType">
            <id column="typeId" property="id" jdbcType="VARCHAR" />
            <result column="T_NAME" property="tName" jdbcType="VARCHAR" />
            <result column="packagesCount" property="packagesCount" jdbcType="VARCHAR" />
            <collection property="packages" javaType="java.util.ArrayList" ofType="com.hofon.appbasis.common.dal.dataobject.HealthyPackage">
                <result column="PID" property="id" jdbcType="VARCHAR" />
                <result column="P_NAME" property="pName" jdbcType="VARCHAR" />
                <result column="PRICE" property="price" jdbcType="VARCHAR" />
                <result column="DURATION" property="duration" jdbcType="VARCHAR" />
            </collection>
        </collection>
        <collection property="managers" javaType="java.util.ArrayList" ofType="com.hofon.appbasis.common.dal.dataobject.HealthManagerVo">
            <id column="REAL_NAME" property="managerName" jdbcType="VARCHAR" />
            <result column="TITLE" property="title" jdbcType="VARCHAR" />
            <result column="AVATAR" property="avatar" jdbcType="VARCHAR" />
        </collection>

</resultMap>

JS解析数据并拼装表格：

$.ajax({
    		type:"post",
    		url:config.url+'/healthManager/healthManageOpen/queryHealthManagerList.json',
    		async:true,
    		dataType: "json",
    		data:{
    			page: pageNum,
    			rows: "10"
    		},
    		success:function(response){
			console.log(response);
    			var data = response.rows;
    			if(!data.length){
    				$("#tableMain").text("暂无数据")
    			}else{
    				$("#tableMain").html(" ");
            		var dataList = $("#tableMain").html();
            		dataList += '<table id="orgTable"><thead><tr><td></td><td>机构名称</td><td>所在区域</td>';
            		for(var g=0; g<data[0].packageTypes.length; g++){
            			dataList += '<td>'+data[0].packageTypes[g].tName+'</td>';
            		}
            		
            		dataList += '<td>健康管家</td><td>前端展示</td><td>操作</td></tr></thead><tbody>';
            		for(var i=0; i<data.length; i++){
            			dataList += '<tr><td>'+(i+1)+'</td><td>'+data[i].hospitalName+'</td><td>'+data[i].cityName+'</td>';
            			for(var j=0; j<data[i].packageTypes.length; j++){
            				dataList += '<td>'+data[i].packageTypes[j].packages.length+'套餐</td>'
            			}
            			var isShow = data[i].isShowManagers == "1"?"是":"否";
            			dataList += '<td>'+data[i].managers.length+'人</td><td>'+isShow+'</td><td><span id="'+data[i].hospitalId+'" onclick="stewardDetail(this)">详情</span></td></tr>'
            		}
            		dataList += '</tbody></table>';
            		$("#tableMain").html(dataList);
    			}
    			
    		}
    	});