table.js 拖動排序和底部統計欄的實現

分享 未结 精帖
41 5005
老司机309
悬赏:20飞吻
之前提過的這2個功能,心姐沒時間,研究了一下table.js的源碼,實現了這2個功能。PS:不得不說 layui的代碼架構灰常清晰,邏輯明了。

1、拖動排序使用方式:
  var betTable = table.render({
elem: "#match-info-bet",
url: "/system/game/betlist",
dragsort: function (data) {
console.log(data);
},
cols: [[
{ dragsort: true, width: 32 }
]] }
dragsort:function(data){}
這是一個排序之後的回調函數,data為table的數據緩存,按照拖動排序之後的順序排列。
col裡面增加一個dragsort的列,表示該列為拖動項目
另外新增樣式如下:

// 拖動框
.layui-table-view .layui-table td[data-dragsort] drag { display: block; width: 100%; height: 100%; cursor: move; background:#f00; }
.
// 拖動到目標元素上的顯示效果
.layui-table-view .layui-table tr.drag-over td { border-top: 2px solid #FF5722; }
效果如圖:

PS:拖動使用的是HTML5的 drag API,不支持低版本的IE哦,在chrome瀏覽器上測試通過。


底部統計欄的使用
 table.render({
elem: '#site-user-list',
url: '/system/site/user',
footer: [{ title: "统计" }, null, null, null, null, null, null, { templet: "<div>{{ htmlFunction.n(d.Money) }}</div>" }]
});
1、增加了 footer的屬性設置,為一個數組。 支持 title(直接顯示文字)、field(綁定字段)、temple:使用模板
2、需要給table指定服務端返回的統計字段名
table.set({
limit: 20,
response: {
, totalName: "total" // 数据统计的字段
服務端返回的數據應為一個object物件,例如:{Money:12000}
效果如下圖:


table.js 文件路径: https://a8.to/download/table.js
回帖