layui 使用心得

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
    }
  });
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容