easyui datagrid 在toolbar添加模糊搜索,不调用后台的情况下过滤数据,要最简单的
时间: 2023-12-09 12:02:56 浏览: 161
可以通过EasyUI datagrid的onHeaderContextMenu事件来实现在toolbar中添加模糊搜索的功能,具体实现步骤如下:
1. 在datagrid的toolbar中添加一个搜索框和一个搜索按钮:
```
<div id="toolbar">
<input id="searchbox" class="easyui-searchbox" data-options="searcher:doSearch" style="width:200px" placeholder="请输入关键字"/>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>
</div>
```
2. 在datagrid的onHeaderContextMenu事件中添加过滤数据的逻辑:
```
$('#datagrid').datagrid({
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!$('#mm').length){
$('<div id="mm" style="width:100px;"></div>').appendTo('body');
$('#mm').menu({
onClick: function(item){
if (item.name == 'clear'){
$('#datagrid').datagrid('removeFilterRule');
} else {
$('#datagrid').datagrid('addFilterRule', {
field: field,
op: 'contains',
value: item.name
});
}
$('#datagrid').datagrid('doFilter');
}
});
var fields = $('#datagrid').datagrid('getColumnFields');
for (var i=0; i<fields.length; i++){
var field = fields[i];
var col = $('#datagrid').datagrid('getColumnOption', field);
if (col.title && col.field){
$('<div data-options="name:\''+col.field+'\'">'+col.title+'</div>').appendTo('#mm');
}
}
$('<div class="menu-sep"></div>').appendTo('#mm');
$('<div data-options="name:\'clear\'">清除过滤</div>').appendTo('#mm');
}
$('#mm').menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
```
3. 在doSearch函数中实现搜索逻辑,获取搜索框中的值,并调用datagrid的load方法重新加载数据:
```
function doSearch(){
var keyword = $('#searchbox').searchbox('getValue');
$('#datagrid').datagrid('load', {
keyword: keyword
});
}
```
最后,在后台的接口中,获取前端传递过来的keyword参数,对数据进行过滤即可。
阅读全文