jqgrid 4.6 searchoptions 搜索后不需要调用后台接口
时间: 2023-09-16 09:11:05 浏览: 41
如果您想要在 jqGrid 中实现前端搜索,而不需要调用后台接口,可以使用 jqGrid 的本地搜索功能。本地搜索可以在本地数据集中进行搜索,而不需要向服务器发送请求。
要启用本地搜索功能,您需要设置 `datatype` 为 `'local'`,并将 `loadonce` 属性设置为 `true`,以便在第一次加载后缓存数据。然后,在 `navGrid` 中设置 `search: true`,以启用搜索工具栏按钮。最后,在 `colModel` 中设置 `searchoptions`,以指定搜索选项。
下面是一个例子:
```javascript
$("#grid").jqGrid({
url: 'data.json',
datatype: 'json',
loadonce: true,
colModel: [
{ name: 'id', index: 'id', width: 60, searchoptions: { sopt: ['eq'] } },
{ name: 'name', index: 'name', width: 90, searchoptions: { sopt: ['bw'] } },
{ name: 'amount', index: 'amount', width: 80, align: 'right', searchoptions: { sopt: ['gt', 'lt'] } },
{ name: 'price', index: 'price', width: 80, align: 'right', searchoptions: { sopt: ['gt', 'lt'] } }
],
jsonReader: {
repeatitems: false,
id: 'id'
},
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
caption: 'My Grid',
height: '100%',
autowidth: true
}).navGrid('#pager', { edit: false, add: false, del: false, search: true });
```
在上面的例子中,我们设置了一个包含四个列的 jqGrid,每个列都有不同的搜索选项。我们还将 `datatype` 设置为 `'json'`,并将 `loadonce` 属性设置为 `true`,以便在第一次加载后缓存数据。最后,我们在 `navGrid` 中设置 `search: true`,以启用搜索工具栏按钮。
现在,当用户点击搜索工具栏按钮时,将显示一个搜索窗口,其中包含我们在 `colModel` 中设置的搜索选项。当用户提交搜索表单时,jqGrid 将使用本地数据集进行搜索,并将结果显示在网格中。