首先先來看一下，直接從后台讀取數據並展示到前端的列表，后端傳回的數據是“按商品ID倒序排列”
前端源代碼
1 $('#good_tables').datagrid({ 2 nowrap: true, 3 autoRowHeight: true, 4 striped: true, 5 fitColumns: true, 6 collapsible: true, 7 url: 'xxx', 8 border: false, 9 idField: 'id', 10 selectOnCheck: true, 11 singleSelect: true, 12 width:'100%' , 13 resizable:true, 14 columns: [[ 15 { 16 field: 'id', 17 title: '商品ID', 18 width: 60, 19 align: 'center', 20 formatter: function (value) { 21 return value+""; 22 } 23 }, 24 { 25 field: 'goodsName', 26 title: '商品名稱', 27 width: 120, 28 align: 'center', 29 formatter: function (value) { 30 return value; 31 } 32 }, 33 { 34 field: 'activity_do', 35 title: '操作', 36 width: '15%', 37 align: 'center', 38 formatter: function (value, row) { 39 return'<a href="javascript:delGoods(' + row.id +')" style="color: red">刪除</a>'; 40 } 41 } 42 ]], 43 pagination: true, 44 pageSize: 10, 45 rowNumbers: false 46 });
現在，產品們想要在前端隨時切換排序方式，想正序，就正序，想倒序就倒序。
當然，我們可以將“排序方式”作為請求參數，向后端再次發送請求，獲得相應排序的數據，但是這樣太浪費資源了，能在前端解決的問題，就不要拖到后端。
easyUI已經提供了在前端排序的功能，只需要待排序的列上小小的添加幾個參數：
修改后的JS代碼：
1 $('#good_tables').datagrid({ 2 nowrap: true, 3 autoRowHeight: true, 4 striped: true, 5 fitColumns: true, 6 collapsible: true, 7 url: 'xxx', 8 border: false, 9 idField: 'id', 10 selectOnCheck: true, 11 singleSelect: true, 12 width:'100%' , 13 resizable:true, 14 remoteSort: false, //必填 15 sortName:'id', //選填，排序字段。不填寫的話，在最開始加載表格的時候，“商品ID”后面不會出現向下的箭頭 16 sortOrder:'asc',//選填，不填的話，按照后端傳回的數據是排列（本例為desc)，填寫后則按在前端設置的正序asc排列, 17 columns: [[ 18 { 19 field: 'id', 20 title: '商品ID', 21 width: 60, 22 align: 'center', 23 sortable:true, //必填，不填的換，點擊“商品ID”單元格，無法切換排列 24 formatter: function (value) { 25 return value; 26 } 27 }, 28 { 29 field: 'goodsName', 30 title: '商品名稱', 31 width: 120, 32 align: 'center', 33 formatter: function (value) { 34 return value; 35 } 36 }, 37 { 38 field: 'activity_do', 39 title: '操作', 40 width: '15%', 41 align: 'center', 42 formatter: function (value, row) { 43 return'<a href="javascript:delGoods(' + row.id +')" style="color: red">刪除</a>'; 44 } 45 } 46 ]], 47 pagination: true, 48 pageSize: 10, 49 rowNumbers: false 50 });
效果：
加載列表后：
點擊向上的箭頭：
最后再來看看在切換排序的時候是不是向后台發送了請求吧~
進入開發者模式，點擊Network，點擊“XHR”清空現在已有的數據
可以看到，現在並沒有任何請求記錄在冊了，接下來就請各位小伙伴隨意切換排序吧，若列表仍為空，則說明沒有向后端再次發送數據請求。
以上就是小編介紹的如何使用easyUI在前端對數據進行排列，覺得有用的朋友記得點個贊！