生活随笔
收集整理的這篇文章主要介紹了
【EasyUI】DataGrid实现表格的筛选过滤、排序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
明白一個道理，百度上搜索半天搜不到的問題，不如自己去讀一下官方文檔。所以：
EasyUI官方文檔 - DataGrid文檔
源碼在文末，先放上效果：
一、實現DataGrid表格排序
下圖來自官方文檔
如果不需要自定義排序,可以直接使用
remoteSort
:false, sortName
:'', sortOrder
:'asc',
一些特殊排序，或者指定某個字段的排序 / 自定義排序規則，可以使用以下的方法：
將服務器對數據項排序設置為false（注意，必須）設置field的排序屬性為true
到這里就已經可以了。如果還需要自定義排序方式的話，sorter的function內容可以自己寫。如果該字段為數字或者字符串，可以用以下方法：參考這個博客
二、數據篩選
使用EasyUI拓展，可查看：官方文檔 - EasyUI 數據網格行過濾（DataGrid Filter Row），這個拓展是需要下載額外的js文件的，官網有提供，最后別忘了在頁面引用一下js文件。
在表頭實現根據某一列的屬性值篩選，下拉單選框使用的是以下參數選項combobox。除此之外，還有其它選項，可以試一試。
使用方式：
效果：
附：源碼
來源：官方示例+稍微修改
1、文件結構
2、datagrid-filter.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery EasyUI Demo
</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script type="text/javascript" src="datagrid-filter.js"></script><style>.icon-filter{background:url('filter.png') no-repeat center center;}</style><script>var data = [{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"N","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"N","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"N","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}];$(function(){var dg = $('#dg').datagrid({filterBtnIconCls:'icon-filter'});dg.datagrid('enableFilter', [{field:'listprice',type:'numberbox',options:{precision:1},op:['equal','notequal','less','greater']},{field:'unitcost',type:'numberbox',options:{precision:1},op:['equal','notequal','less','greater']},{field:'status',type:'combobox',options:{panelHeight:'auto',data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],onChange:function(value){if (value == ''){dg.datagrid('removeFilterRule', 'status');} else {dg.datagrid('addFilterRule', {field: 'status',op: 'equal',value: value});}dg.datagrid('doFilter');}}}]);});</script>
</head>
<body><h1>DataGrid Filter Row
</h1><table id="dg" title="DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,data:data,remoteSort:false,"><thead><tr><th data-options="field:'itemid',width:80">Item ID
</th><th data-options="field:'productid',width:100">Product
</th><th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price
</th><th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost
</th><th data-options="field:'attr1',width:250">Attribute
</th><th data-options="field:'status',width:60,align:'center'">Status
</th></tr></thead></table>
</body>
</html>
總結
以上是生活随笔為你收集整理的【EasyUI】DataGrid实现表格的筛选过滤、排序的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
