jqgrid 筛选列实现下拉选择男女

您可以使用 jqgrid 的列筛选器（column filter）来实现下拉选择男女。具体步骤如下：

1. 在 jqgrid 的 colModel 中为需要筛选的列添加 stype:'select' 属性。

2. 在 colModel 中添加 searchoptions 属性，设置下拉框的选项。

例如：

colModel:[
     {name:'gender', index:'gender', stype:'select', searchoptions:{value:':All;M:Male;F:Female'}}
]

其中，gender 列的筛选器类型为 select，value 属性定义了下拉框的选项，格式为 'value:label'。

3. 在 jqgrid 的配置项中开启列筛选器功能。

例如：

$('#grid').jqGrid({
    ...
    search:true,
    postData:{filters:''},
    ...
});

其中，search 属性设置为 true，表示开启列筛选器功能。

4. 在 jqgrid 的工具栏中显示列筛选器。

例如：

$('#grid').jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:true});

其中，search:true 表示显示列筛选器。

这样，您就可以在 jqgrid 的列筛选器中选择男女来筛选数据了。

相关问题

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 表头的筛选下拉框了。

jqgrid 动态设置筛选列 下拉框的值

要动态设置 jqgrid 筛选列下拉框的值，可以使用 `setLabel` 方法和 `setColProp` 方法。

首先，使用 `setLabel` 方法设置列头显示的文本和筛选下拉框的值。例如，设置名为 `colName` 的列的筛选下拉框值为 `{"1":"value1","2":"value2"}`：

$("#grid").jqGrid('setLabel', 'colName', '', '', {"1":"value1","2":"value2"});

然后，使用 `setColProp` 方法设置列的筛选下拉框属性。例如，设置名为 `colName` 的列的筛选下拉框的属性为：

{
   value: "1:Value1;2:Value2;3:Value3",
   multiple: true,
   dataInit: function(element) {
      $(element).width(100);
   }
}

就可以动态设置列的筛选下拉框的值和属性。

完整的代码示例：

$("#grid").jqGrid('setLabel', 'colName', '', '', {"1":"value1","2":"value2"});
$("#grid").jqGrid('setColProp', 'colName', {
   value: "1:Value1;2:Value2;3:Value3",
   multiple: true,
   dataInit: function(element) {
      $(element).width(100);
   }
});