table复杂表头
下面将是我们要实现的效果
下面是后台返回的数据
复杂表头重要的属性:
rowspan
colspan
需要注意的是循环生成表头时,循环时不会执行templet里面的代码,在table渲染时才会执行,如果直接在templet里用变量,那么取到的数据是有问题的,需要借助属性来避免这个问题。
由于table的数据是提前生成的,所以数据分页时有问题,不能展示数据实际总条数,目前还没有想到好办法,暂时先用了laypage实现了分页的效果
loadTableData(1, 10); //初始化表格 function bindTable(columnArr,data,page,limit) { table.render({ elem: '#dataTable' , where: { page: page, limit: limit } , height: 'full-155' , cols: columnArr , data: data , page: false }); } //初始化分页 function initPage(count) { laypage.render({ elem: 'demo1' , count: count //数据总数,从服务端得到 , jump: function (obj, first) { //首次不执行 if (!first) { loadTableData(obj.curr, obj.limit); } } }); } var isInitPage = false; //生成表头 function loadTableData(page,limit) { var columnArr = []; columnArr[0] = [ { fixed: 'left', field: 'CityName', title: '城市', align: 'center', rowspan: 2, width: 200}, { fixed: 'left', field: 'OrganName', title: '机构', align: 'center', rowspan: 2 ,width:200}, ]; columnArr[1] = []; $.ajax({ url: "/Account/GetTGLs", type: 'post', dataType: "json", data: { trainTargetId: 1, page: page, limit: limit }, success: function (json) { var data = json.workTypes; for (var i = 0; i < data.length; i++) { var workType = data[i]; columnArr[0].push({ field: 'WorkTypeName', title: data[i].Name, align: 'center', colspan: 3 }); columnArr[1].push({ field: 'TotalCount', title: '实考人数', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) { var workTypeId = $(this)[0].data_workTypeId;
//注意:workType.WorkTypeId 此处是没办法直接取workType.WorkTypeId的。如果这样写,最终取到的数据将都是当前行最后一条的数据,只能借助属性进行操作
var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId); return `${workTypeData.TotalCount}`; }
});
columnArr[1].push({
field: 'PassCount', title: '通过人数', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) {
var workTypeId = $(this)[0].data_workTypeId; var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId);
return `${workTypeData.PassCount}`; }
});
columnArr[1].push({
field: 'PassRate', title: '通过率', align: 'center', data_workTypeId: workType.WorkTypeId, width: 100, templet: function (row) {
var workTypeId = $(this)[0].data_workTypeId; var workTypeData = row.Examinations.find(w => w.WorkTypeId == workTypeId);
return `${workTypeData.PassRate}`; }
});
}
bindTable(columnArr, json.data, page, limit);
if (!isInitPage) { isInitPage = true; initPage(json.count); }
}
})
}
标签:columnArr,layui,workTypeId,WorkTypeId,表头,var,table,data,page From: https://www.cnblogs.com/mtjj/p/17010817.html