这次是对安吉项目单站点搜索页面所遇到问题的总结。
主要遇到的问题有:
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中进行。比如在我的项目里