EasyUI 另類的方法實現自定義表格靜態數據的過濾
圖中
紅色框是使用datagrid-filter.js插件過濾,產品覺得很醜.
綠色框是我要加的功能,目的是對科目名稱中模糊匹配
經過觀察datagrid-filter.js源碼實現以框的功能
代碼如下:
// html
// 搜索框
科目篩選:<input id="filterKmName" name="kmName" class="textbox">
//表格數據經ajax接口返回數據生成.
<div title="PL合併抵消科目餘額表" style="padding:5px 0px 0px 0px">
<table id="dataList4"></table>
</div>
// js
$.ajax({
url: '/report/xxxx',
dataType: 'json',
//xxxx略..
success: function (data) {
if (data) {
//xxxx略..
// 啓動過濾器,會出現圖中紅色區域的輸入框
$('#dataList4').datagrid('enableFilter')
// 隨後我們把他隱藏起來.
$('.datagrid-filter-row').css('display', 'none')
}
},
// itemDispNm 要過濾的列名.column對應的屬性名
$(function () {
$('#filterKmName').unbind('.filter').bind('keydown.filter', function (e) {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(function () {
var value = $("#filterKmName").val();
if (value != '') {
// 這步操作實際上是給紅色區域隱藏的框框中賦值而已..
$("#dataList4")['datagrid']('addFilterRule', {
field: 'itemDispNm',
op: 'contains',
value: value
});
$("#dataList4")['datagrid']('doFilter');
}else{
$("#dataList4")['datagrid']('removeFilterRule', 'itemDispNm');
$("#dataList4")['datagrid']('doFilter');
}
}, 1000);
});
}