LayUi表格，后台数据不匹配

这次是对安吉项目单站点搜索页面所遇到问题的总结。

主要遇到的问题有：

1.layUi表格的使用问题。

首先是Layui表格的问题，因为之前没有学过LayUi的相关知识，突然要使用其表格自带的固定列功能（因为自己写表格，并实现固定列很麻烦）,所以被赶鸭子了。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });
});

这是Layui表格的基本数据格式，表头的基本格式。

然后就是data填入数据，《data: tableData》,

{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},

按这种格式去填入数据。data中id对应表头的id，就是data中数据的属性对应表头中field，数据就会自动对接到表格中。但由于后台给我的数据并不是Layui规定的数据格式，所以只能采用另外一个方法去绑定数据。

这是要实现的样式。

首先也是要对表格进行设定，由于数据中没有“要素”，所以要自己传入“要素”作为标题。

 var tableCol = [
        { field: 'ElementName', width: 100, title: '要素', fixed: 'left' }, ];

《属性ElementName，宽度100px，标题“要素”，固定列，固定在左边》

 for (var item in data[0].DataList) {
                            tableCol.push({
                                field: item,
                                //width: 80,
                                title: item,
                            });
                        }

传入表头标题及属性。其中Width不设置的话，那么宽度将自适应。

再传入表格中所需要的展示的数据

 for (var i = 0; i < data.length; i++) {
                        tableData.push({
                            "ElementName": data[i].ElementName,
                            "ElementValue": data[i].ElementValue,
                        });//对应表头中要素，填入要素的名称如“雨量”等等
                        for (var item in data[i].DataList) {
                            data[i].DataList[item] = data[i].DataList[item] ? data[i].DataList[item] : "--";
                        }
                        jQuery.extend(tableData[i], data[i].DataList);//这里是合并成一个数组，方便后面数据的填入。
                    }

layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#test',
                            id: 'idTest',
                            //width: 1722,
                            //height: auto,
                            cellMinWidth: 60,
                            cols: [tableCol],
                            data: tableData,
                            done：function(){}
}）
}）

渲染表格，其中elem对应的是HTML中<table>的ID值。

由于要实现点击单行，要对单行进行相对应的工作，如改变该行的背景色，在HIghtchat中渲染该行的数据，点击表头中的<td>弹出新的表格展示数据。不管怎么样，对Layui表格的操作，包括样式和动作都要在table.render的done中进行。比如在我的项目里

LayUi表格，后台数据不匹配

猜你喜欢