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 4.15.5 版本的动态设置筛选列集合数据的示例代码及注释：

// 定义 jqGrid 表格
$("#grid").jqGrid({
    url: "data.json", // 数据源 URL
    datatype: "json", // 数据类型
    colModel: [
        {name: "id", label: "ID", width: 50},
        {name: "name", label: "姓名", width: 100},
        {name: "gender", label: "性别", width: 80, stype: "select", searchoptions: {value: ":All;男:男;女:女"}}, // "stype" 表示该列的筛选类型，"searchoptions" 表示该列的筛选选项
        {name: "hobby", label: "爱好", width: 150, stype: "select", searchoptions: {value: ":All"}}, // "stype" 表示该列的筛选类型，"searchoptions" 表示该列的筛选选项
        {name: "age", label: "年龄", width: 80, stype: "integer", searchoptions: {sopt: ["eq", "ne", "lt", "le", "gt", "ge"]}}, // "sopt" 表示该列的筛选操作符
        {name: "email", label: "邮箱", width: 150},
        {name: "address", label: "地址", width: 300}
    ],
    rowNum: 10, // 每页行数
    rowList: [10, 20, 30], // 每页行数选项
    pager: "#pager", // 分页控件 ID
    sortname: "id", // 默认排序列名
    sortorder: "asc", // 默认排序方式
    viewrecords: true, // 是否显示总记录数
    caption: "示例表格" // 表格标题
});

// 动态设置 "hobby" 列的筛选选项
$.ajax({
    url: "hobby.json", // 筛选选项数据源 URL
    dataType: "json",
    success: function (data) {
        var options = {};
        $.each(data, function (i, item) {
            options[item.id] = item.name;
        });
        $("#grid").setColProp("hobby", {
            searchoptions: {
                value: ":All;" + options // 将集合数据转换为字符串形式
            }
        });
    }
});

注释中已经说明了每一部分的作用，简单总结一下：

1. 定义 jqGrid 表格，其中 "hobby" 列的 "stype" 设置为 "select"，表示该列的筛选类型为下拉框，"searchoptions" 设置了该列的筛选选项，下拉框的选项值暂时设置为 ":All"，待后续动态设置。
2. 通过 Ajax 请求获取筛选选项数据源，并将集合数据转换为字符串形式（格式为 "value1:text1;value2:text2;..."），然后动态设置 "hobby" 列的筛选选项。

希望这个示例能够帮到你，如果还有不清楚的地方，可以继续提问哦！