jqgrid 表头筛选实现下拉框

要实现 jqgrid 表头的筛选下拉框，可以按照以下步骤操作：

1. 在 colModel 中设置 stype 为 select，如下：

{ name: 'xxx', index: 'xxx', stype: 'select', searchoptions: { value: ':All;1:Option1;2:Option2;3:Option3' } }

其中，value 属性中的字符串是下拉框的选项，格式为 label:value，多个选项之间用分号隔开，第一个选项必须为 All（或者 Any），表示所有选项。

2. 在 jqGrid 的 options 中添加如下代码：

{
    // ...
    postData: {
        filters: function () {
            var columnData = $("#grid").jqGrid('getGridParam', 'postData').columns;
            var postData = JSON.stringify({
                groupOp: "AND",
                rules: [{
                    field: columnData[0].name,
                    op: "eq",
                    data: columnData[0].searchValue
                }, {
                    field: columnData[1].name,
                    op: "eq",
                    data: columnData[1].searchValue
                }]
            });
            return postData;
        }
    },
    // ...
}

其中，postData 中的 filters 属性用于设置筛选条件，rules 数组中的每个元素表示一个筛选条件，包含三个属性：field（列名）、op（操作符）、data（筛选值）。这里的 columnData 是获取当前 jqGrid 的 postData 中的 columns 属性。

3. 在 jqGrid 的 options 中设置 search 属性为 true：

{
    // ...
    search: true,
    // ...
}

4. 在 jqGrid 中添加一个按钮，用于触发表头筛选：

$("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false })
    .jqGrid('navButtonAdd', '#pager', {
        caption: "Search",
        title: "Toggle Searching Toolbar",
        buttonicon: 'ui-icon-search',
        onClickButton: function () {
            $("#grid")[0].toggleToolbar();
        }
    });

这样就可以实现 jqgrid 表头的筛选下拉框了。