1.關(guān)于layui中tablle 渲染數(shù)據(jù)后 sort排序問(wèn)題
table.render({
id:'test',
elem: '#test'
//,height: 350
,url: "/admin/members/list/"
, request: {
pageName: 'page' //頁(yè)碼的參數(shù)名稱,默認(rèn):page
,limitName: 'limit' //每頁(yè)數(shù)據(jù)量的參數(shù)名,默認(rèn):limit
}
,initSort: {
field: 'id' //排序字段,對(duì)應(yīng) cols 設(shè)定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認(rèn)排序
}
,sort:true //重點(diǎn)1:這里的sort表示 table表在取得接口數(shù)據(jù)后,對(duì)頁(yè)面渲染后的table數(shù)據(jù)進(jìn)行排序。同時(shí),這里的true 會(huì)影響頁(yè)面sort 上下小箭頭的 顯示效果
,method: 'post'
,page: true
,limit: 10
,toolbar: '#toolbarDemo'
,cols: [[
{field:'id', title:'ID',fixed: 'left', unresize: true, sort: true, width:70}
,{field:'user_name', title:'員工姓名'}
,{field:'name', title:'部門', sort: true}
,{field:'station', title:'崗位', sort: true}
,{field:'identity_card', title:'身份證',}
,{field:'user_phone', title:'手機(jī)號(hào)'}
,{field:'add_time', title:'添加時(shí)間', width:170}
,{field:'tag', title:'標(biāo)簽',}
,{field:'update_time', title:'必修',toolbar: '#barTs'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:160}
]]
});
由于分頁(yè)問(wèn)題,這種排序很多時(shí)候不符合項(xiàng)目需求,根據(jù)官方文檔介紹,可以進(jìn)行table sort與接口進(jìn)行交互,從而影響數(shù)據(jù) 全文排序 效果
table.on('sort(test)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
console.log(obj.field); //當(dāng)前排序的字段名
console.log(obj.type); //當(dāng)前排序類型:desc(降序)、asc(升序)、null(空對(duì)象,默認(rèn)排序)
console.log(this); //當(dāng)前排序的 th 對(duì)象
//盡管我們的 table 自帶排序功能,但并沒(méi)有請(qǐng)求服務(wù)端。
//有些時(shí)候,你可能需要根據(jù)當(dāng)前排序的字段,重新向服務(wù)端發(fā)送請(qǐng)求,從而實(shí)現(xiàn)服務(wù)端排序,如:
table.reload('test', {
initSort: obj //記錄初始排序,如果不設(shè)的話,將無(wú)法標(biāo)記表頭的排序狀態(tài)。 layui 2.1.1 新增參數(shù)
,where: { //請(qǐng)求參數(shù)(注意:這里面的參數(shù)可任意定義,并非下面固定的格式)
field: obj.field //排序字段 在接口作為參數(shù)字段 field order
,order: obj.type //排序方式 在接口作為參數(shù)字段 field order
}
});
});