由于需求的需要，一些页面需要展示动态的字段，根据一部分数据进行动态的展示。
在百度上并未找到很好的解决方案，但是也提供了相应的思路。
首先从数据库获取数据时就应该是行转列 已经OK的数据。然后返回一个table数据。这时候就要对这个table进行处理，layui的table需要先定义好字段，
而动态的字段是事先预料不到的，而且字段个数不确定，所以需要进行动态处理。
先获取这个table的表头返回至前端。先动态创建表头，然后在展示数据。
接下来先看看界面上的设置，先定义好固定的列以下是固定列头，先定义好
var attrCols = [
[ //表头
{ field: 'id', title: 'ID', width: 80, rowspan: 2 }
, { field: 'brand_name', title: '品牌名称', width: 120, rowspan: 2 }
, { field: 'system_name', title: '系列名称', width: 100, rowspan: 2 }
, { field: 'plat_form', title: '平台', width: 100, rowspan: 2 }
, { field: 'internal_code', title: '种植代码', width: 100, rowspan: 2 }
, { field: '', title: 'Analog', colspan: 2, align: 'center' }
, { field: '', title: 'Scanbody', colspan: 2, align: 'center' }
],
[ //表头
{ field: 'analog_dess_model', title: 'DESS型号', align: 'center', width: 110, sort: true }
, { field: 'analog_model', title: '原装型号', align: 'center', width: 110, sort: true }
, { field: 'scanbody_dess_model', title: 'DESS型号', align: 'center', width: 110, sort: true }
, { field: 'scanbody_model', title: '原装型号', align: 'center', width: 110, sort: true }
]
];
然后在通过获取表头数据的接口获取动态表头：
var strfield = {};
$.get('/Ajax/AjaxIOSDataInfo.ashx?type=GetIOSDataReportTableTitle', { "brandid": brandid }, function (objdata) {
var obj = JSON.parse(objdata);
//动态表头
for (m in obj.data) {
var data1 = obj.data[m];
strfield = { field: data1["TitleName"], title: data1["TitleName"], align: 'center', width: 110, rowspan: 2 };
attrCols[0].push(strfield);
}
// TODO:其他处理数据表格数据.......
});
然后是处理其他表格中的数据，就是layui的正常Table数据处理，这段代码是要放在上面获取动态表头中的，需要获取动态表头之后在获取内容
var findtab = table.render({
elem: '#iosDataReport'
, id: 'iosDataReportload'
, where: {
brandid: '',
systemid: '',
platform: '',
internalCode: '',
scanName: ''
}
, parseData: function (res) {
return {
"code": 0,
"count": res.count,
"msg": res.message,
"data": JSON.parse(res.data)
}
}
, url: '/Ajax/AjaxIOSDataInfo.ashx?type=GetIOSDataReportInfo' //数据接口
, page: false //开启分页
, limit: 20 //每页默认显示的数量
, toolbar: '#toolbar_iosDataReport'
, defaultToolbar: []
, cols: attrCols //所有字段：固定列+动态列
});
完整的前端Layui代码
var $;
layui.use(['form', 'table'], function () {
var table = layui.table;
var form = layui.form;
$ = layui.$;
var attrCols = [
[ //表头
{ field: 'id', title: 'ID', width: 80, rowspan: 2 }
, { field: 'brand_name', title: '品牌名称', width: 120, rowspan: 2 }
, { field: 'system_name', title: '系列名称', width: 100, rowspan: 2 }
, { field: 'plat_form', title: '平台', width: 100, rowspan: 2 }
, { field: 'internal_code', title: '种植代码', width: 100, rowspan: 2 }
, { field: '', title: 'Analog', colspan: 2, align: 'center' }
, { field: '', title: 'Scanbody', colspan: 2, align: 'center' }
],
[ //表头
{ field: 'analog_dess_model', title: 'DESS型号', align: 'center', width: 110, sort: true }
, { field: 'analog_model', title: '原装型号', align: 'center', width: 110, sort: true }
, { field: 'scanbody_dess_model', title: 'DESS型号', align: 'center', width: 110, sort: true }
, { field: 'scanbody_model', title: '原装型号', align: 'center', width: 110, sort: true }
]
];
var strfield = {};
$.get('/Ajax/AjaxIOSDataInfo.ashx?type=GetIOSDataReportTableTitle', { "brandid": brandid, "systemid": systemid, "platform": platform, "internalCode": internalcode, "scanName": scanname }, function (objdata) {
var obj = JSON.parse(objdata);
//动态表头
for (m in obj.data) {
var data1 = obj.data[m];
strfield = { field: data1["TitleName"], title: data1["TitleName"], align: 'center', width: 110, rowspan: 2 };
attrCols[0].push(strfield);
}
var findtab = table.render({
elem: '#iosDataReport'
, id: 'iosDataReportload'
, where: {
brandid: '',
systemid: '',
platform: '',
internalCode: '',
scanName: ''
}
, parseData: function (res) {
return {
"code": 0,
"count": res.count,
"msg": res.message,
"data": JSON.parse(res.data)
}
}
, url: '/Ajax/AjaxIOSDataInfo.ashx?type=GetIOSDataReportInfo' //数据接口
, page: false //开启分页
, limit: 20 //每页默认显示的数量
, toolbar: '#toolbar_iosDataReport'
, defaultToolbar: []
, cols: attrCols //所有字段：固定列+动态列
});
//界面搜索
$('#searchBtn').on('click', function () {
findtab.config.where.brandid = $('#brand_name_id').val()
findtab.config.where.systemid = $('#system_name_id').val()
findtab.config.where.platform = $('#platform_id').val()
findtab.config.where.internalCode = $('#internal_code_id').val()
findtab.config.where.scanName = $('#scan_name_id').val()
findtab.reload('iosDataReportload', {
url: '/Ajax/AjaxIOSDataInfo.ashx?type=GetIOSDataReportInfo' //数据接口
, page: {
curr: 1
}
});
return false;
});
})
});
这里面最主要的一段代码，是将接口中的json字符串进行转换：因为后端是直接根据table表格转为json字符串的。没有具体实体类，没得转为json对象，所以需要返回到前端在进行转换。
, parseData: function (res) {
return {
"code": 0,
"count": res.count,
"msg": res.message,
"data": JSON.parse(res.data) //将json字符串转为json对象
}
}
这里涉及到 2个接口
1、GetIOSDataReportTableTitle 获取表头
2、GetIOSDataReportInfo 获取表格数据
后端接口处理方式：
1、GetIOSDataReportTableTitle
DataSet ds = iOSDataInfoBusiness.GetRptIOSDataReport(brandID, systemID, platID, internalCode, scanName);
DataTable dataTable = ds.Tables[0];
//过滤固定字段，只返回动态字段
string [] filedarr = new string[] { "id", "brand_name", "system_name", "plat_form", "internal_code", "analog_dess_model", "analog_model", "scanbody_dess_model", "scanbody_model", "brandID", "systemID" };
foreach (DataColumn col in dataTable.Columns)
{
if(!((IList)filedarr).Contains(col.ColumnName))
{
tableTitle = new IOSDataReportTableTitle();
tableTitle.TitleName = col.ColumnName;
list.Add(tableTitle);
}
}
2、GetIOSDataReportInfo
//接口主要代码，将table转为json字符
DataSet ds = iOSDataInfoBusiness.GetRptIOSDataReport(brandID, systemID, platID,internalCode,scanName);
DataTable dataTable = ds.Tables.Count == 0 ? null : ds.Tables[0];
if(ds.Tables.Count > 0)
{
objJson = JsonSwitchCls.TabToJson(dataTable);
}
/// <summary>
/// 将datatable转换为json
/// </summary>
/// <param name="dtb">Dt</param>
/// <returns>JSON字符串</returns>
public static string TabToJson(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
System.Collections.ArrayList dic = new System.Collections.ArrayList();
foreach (DataRow dr in dtb.Rows)
{
System.Collections.Generic.Dictionary<string, object> drow = new System.Collections.Generic.Dictionary<string, object>();
foreach (DataColumn dc in dtb.Columns)
{
drow.Add(dc.ColumnName, dr[dc.ColumnName]);
}
dic.Add(drow);
}
//序列化
return jss.Serialize(dic);
}
最终效果如下图：