jfGrid表格框架可以
使用filter筛选
功能，具体代码如下：
1. 在表格初始化时
添加filter属性：
```
javascript
$('#grid').jfGrid({
url: '/api/values',
headData: [
{ label: '编号', name: 'Code', width: 100, align: 'center' },
{ label: '名称', name: 'Name', width: 200, align: 'center' },
{ label: '时间', name: 'Time', width: 150, align: 'center' }
],
filter: true
});
```
2. 在headData中的每一列
添加isSearch属性，表示该列是否支持筛选：
```
javascript
headData: [
{ label: '编号', name: 'Code', width: 100, align: 'center', isSearch: true },
{ label: '名称', name: 'Name', width: 200, align: 'center', isSearch: true },
{ label: '时间', name: 'Time', width: 150, align: 'center', isSearch: true }
]
```
3. 在表格上方
添加筛选框：
```html
<div id="gridToolbar">
<div class="jfgrid-toolbar">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入
查询关键字">
<span class="input-group-btn">
<button id="btnSearch" class="btn btn-primary" type="button">搜索</button>
</span>
</div>
</div>
</div>
```
4.
添加筛选
功能的代码：
```
javascript
$('#btnSearch').on('click', function () {
var keyword = $.trim($('#gridToolbar input').val());
$('#grid').jfGridSet('reload', { keyword: keyword });
});
```
5. 在后台接收筛选
条件，并进行数据过滤：
```csharp
public ActionResult GetGridJson(string keyword)
{
var data = _db.GetList();
if (!string.IsNullOrEmpty(keyword))
{
data = data.Where(t => t.Code.Contains(keyword) || t.Name.Contains(keyword)).ToList();
}
return Content(data.ToJson());
}
```
通过以上步骤，就可以在jfGrid表格框架中
添加filter筛选
功能了。
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
