easyui datagrid 在toolbar添加模糊搜索,不调用后台的情况下过滤数据
时间: 2024-02-09 13:12:58 浏览: 181
如果您希望在前端不调用后台的情况下过滤数据,可以使用easyui datagrid提供的本地过滤功能。
以下是一个示例代码:
```javascript
// 初始化datagrid
$('#datagrid').datagrid({
url: 'your_data_url',
toolbar: [{
text: '搜索:'
},{
xtype: 'textfield',
id: 'searchbox',
width: 200,
listeners: {
change: function(value) {
// 过滤数据
$('#datagrid').datagrid('loadData', filterData(value));
}
}
}]
});
// 本地过滤数据
function filterData(searchValue) {
// 获取所有数据
var data = $('#datagrid').datagrid('getData').rows;
// 如果搜索值为空,则返回所有数据
if (!searchValue) {
return data;
}
// 过滤数据
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
var row = data[i];
// 判断是否包含搜索值
if (JSON.stringify(row).indexOf(searchValue) >= 0) {
result.push(row);
}
}
return result;
}
```
在上面的代码中,我们通过监听搜索框的change事件,在输入框中输入内容时触发本地过滤数据的函数filterData。在这个函数中,我们通过datagrid的getData方法获取所有数据,然后根据输入值进行过滤,将过滤后的结果通过loadData方法重新加载datagrid的数据。
阅读全文