jqgrid 4.6 searchoptions 不需要调用后台接口

可以在 jqGrid 的 searchoptions 中使用 dataUrl 属性来设置静态数据，而不需要调用后台接口。例如：

colModel: [
  {
    name: 'name',
    index: 'name',
    searchoptions: {
      sopt: ['eq'],
      dataUrl: '/static/names.json'
    }
  }
]

在上面的例子中，我们设置了一个名为 'name' 的列，当用户点击筛选按钮时，将显示一个下拉列表框，其中包含在 '/static/names.json' 文件中列出的所有名称。这些数据是静态的，不需要调用后台接口。当用户选择一个名称时，jqGrid 将会使用 'eq' 运算符将该名称作为筛选条件提交到后台。

相关问题

jqgrid 4.6 searchoptions 搜索后不需要调用后台接口

如果您想要在 jqGrid 中实现前端搜索，而不需要调用后台接口，可以使用 jqGrid 的本地搜索功能。本地搜索可以在本地数据集中进行搜索，而不需要向服务器发送请求。

要启用本地搜索功能，您需要设置 `datatype` 为 `'local'`，并将 `loadonce` 属性设置为 `true`，以便在第一次加载后缓存数据。然后，在 `navGrid` 中设置 `search: true`，以启用搜索工具栏按钮。最后，在 `colModel` 中设置 `searchoptions`，以指定搜索选项。

下面是一个例子：

$("#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 将使用本地数据集进行搜索，并将结果显示在网格中。

jqgrid searchoptions 不需要调用后台接口

如果你不需要调用后台接口来完成搜索功能，而是想在前端实现本地搜索，可以使用 jqGrid 的 searchoptions 属性来实现。searchoptions 属性可以定义搜索框的相关选项，包括搜索框类型、默认值、是否允许清空等。

下面是一个示例代码，演示如何在 jqGrid 中实现本地搜索功能：

$("#jqgrid").jqGrid({
    data: mydata,
    datatype: "local",
    colModel: [
        { name: "id", index: "id", hidden: true },
        { name: "name", index: "name", searchoptions: { sopt: ["cn"] } },
        { name: "price", index: "price", searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } },
        { name: "quantity", index: "quantity", searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } }
    ],
    loadComplete: function() {
        $(this).jqGrid("filterToolbar", { searchOnEnter: false, enableClear: true });
    },
    onSearch: function() {
        var postData = $("#jqgrid").jqGrid("getGridParam", "postData");
        var filters = postData.filters;
        var mygrid = $("#jqgrid")[0];
        mygrid.addLocalData(mydata);
        mygrid.trigger("reloadGrid");
    }
});

在上面的代码中，我们设置了 searchoptions 属性来定义每个列的搜索选项，例如 "cn" 表示模糊搜索，"eq" 表示精确搜索等。然后在 loadComplete 回调函数中调用 filterToolbar 方法来创建搜索工具栏，同时设置 searchOnEnter 为 false 表示用户需要点击搜索按钮才能触发搜索，设置 enableClear 为 true 表示允许清空搜索条件。

最后在 onSearch 回调函数中处理搜索事件，我们使用 addLocalData 方法将搜索结果添加到 jqGrid 中，然后触发 reloadGrid 方法重新加载数据。需要注意的是，使用 addLocalData 方法需要先将 datatype 设置为 "local"。