easyui datagrid 在toolbar添加模糊搜索,不调用后台的情况下过滤数据,多加一个还原按钮用来还原原始数据而不过滤
时间: 2023-12-09 16:05:56 浏览: 85
如果您希望在easyui datagrid的toolbar中添加一个模糊搜索框,并且不调用后台的情况下过滤数据,同时还希望添加一个还原按钮用来还原原始数据而不过滤,可以使用以下代码实现:
```javascript
var originalData; // 保存原始数据
// 初始化datagrid
$('#datagrid').datagrid({
url: 'your_data_url',
toolbar: [{
text: '搜索:'
},{
xtype: 'textfield',
id: 'searchbox',
width: 200,
listeners: {
change: function(value) {
// 过滤数据
var filteredData = filterData(value);
$('#datagrid').datagrid('loadData', filteredData);
}
}
},{
text: '还原',
iconCls: 'icon-reload',
handler: function() {
// 还原数据
$('#datagrid').datagrid('loadData', originalData);
$('#searchbox').textbox('setValue', '');
}
}]
});
// 获取原始数据
originalData = $('#datagrid').datagrid('getData').rows;
// 本地过滤数据
function filterData(searchValue) {
// 如果搜索值为空,则返回原始数据
if (!searchValue) {
return originalData;
}
// 过滤数据
var result = [];
for (var i = 0, len = originalData.length; i < len; i++) {
var row = originalData[i];
// 判断是否包含搜索值
if (JSON.stringify(row).indexOf(searchValue) >= 0) {
result.push(row);
}
}
return result;
}
```
在上面的代码中,我们添加了一个还原按钮,并且在初始化datagrid时获取了原始数据,并保存在变量originalData中。在搜索框的change事件中,我们调用filterData函数进行本地过滤数据,并使用loadData方法重新加载datagrid的数据。在还原按钮的点击事件中,我们通过loadData方法将原始数据重新加载,并将搜索框中的值清空。
阅读全文