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);
});
}