Question

我正在使用带有Multiselect过滤器的JQGrid来过滤各个列。目前，我使用数据库主值

填充过滤器（例如SkillCategory列）

{
 name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select',
  searchoptions: {
  clearSearch: false,
   sopt: ['eq', 'ne'],
    dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=skillcat',
    buildSelect: createSelectList,
     attr: { multiple: 'multiple', size: 4 },
     position: {
      my: 'left top',
         at: 'left bottom'
        },
     dataInit: dataInitMultiselect
      }
    },

此方法将填充所有可用的主列表（对于SkillCategory）进行过滤。我想仅显示基于特定列的可用行中存在的过滤器值的可用过滤器值（对于SkillCategory）。这应该显示“编程”和“数据”作为SkillCategory过滤器的选项，因为行仅包含该列的“编程”和“数据”值。

enter image description here

我发现下面的代码（抱歉忘了链接）

getUniqueNames = function (columnName) {
            var texts = $("#listTableSupply").jqGrid('getCol', columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
            for (i = 0; i < textsLength; i++) {
                text = texts[i];
                if (text !== undefined && textsMap[text] === undefined) {
                    // to test whether the texts is unique we place it in the map.
                    textsMap[text] = true;
                    uniqueTexts.push(text);
                }
            }
            return uniqueTexts;
        }
        buildSearchSelect = function (uniqueNames) {
            var values = ":All";
            $.each(uniqueNames, function () {
                values += ";" + this + ":" + this;
            });
            return values;
        }
        setSearchSelect = function (columnName) {
            $("#listTableSupply").jqGrid('setColProp', columnName,
                    {
                        searchoptions: {
                            sopt: ['eq', 'ne'],
                            value: buildSearchSelect(getUniqueNames(columnName)),
                            attr: { multiple: 'multiple', size: 3 },
                            dataInit: dataInitMultiselect
                        }
                    }
        );
        }

调用setSearchSelect（“SkillCategory”）

....  caption: 'Supply',
                emptyrecords: "No records to view",
                loadtext: "Loading...",
                refreshtext: "Refresh",
                refreshtitle: "Reload Grid",
                loadComplete: loadCompleteHandler1,
                ondblClickRow: function (rowid) {
                    jQuery(this).jqGrid('viewGridRow', rowid);
                },
                beforeRequest: function () //loads the jqgrids state from before save
                {
                    modifySearchingFilter.call(this, ',');
                }
            }).jqGrid('bindKeys');
            $('#listTableSupply').bind('keydown', function (e) {
                if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
            });
            setSearchSelect("SkillCategory");
            $('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
                cloneToTop: true,
                refresh: true, refreshtext: "Refresh", edit: false, add: false, del: false, search: false
            }, {}, {}, {}, {
                multipleSearch: true,
                multipleGroup: true,
                recreateFilter: true
            }); .....

但似乎不起作用。仅填充“全部”值。 enter image description here

任何想法我怎样才能做到这一点。

UPDATE1：

根据Oleg的建议，下面是适用于我的工作代码。

initializeGridFilterValue = function () {

            //jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
            setSearchSelect("SkillCategory");

            jQuery("#listTableSupply").jqGrid("filterToolbar", {
                stringResult: true,
                searchOnEnter: true,
                defaultSearch: myDefaultSearch,
                beforeClear: function () {
                    $(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
                        this.selected = false; // unselect all options
                    });

                    $(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
                        $(this).prev("select[multiple]").multiselect("refresh");
                    }).css({
                        width: "98%",
                        marginTop: "1px",
                        marginBottom: "1px",
                        paddingTop: "3px"
                    });
                }
            });
            jQuery("#listTableSupply").jqGrid('setGridHeight', 300);
        }

从loadComplete事件设置如下：

function loadCompleteHandler1() {
            initializeGridFilterValue();
        }

Answer 1

我看到您使用my old answer中的代码。关于您的问题：我想您首先调用创建过滤器工具栏的filterToolbar，然后只需调用设置新setSearchSelect属性的searchoptions.value。另一个可能的问题是，在之前调用setSearchSelect 数据将在网格中加载。如果您将datatype: "local"与data参数一起使用，则在创建网格期间，数据将填充到网格中。如果您使用datatype: "json"，则应首先从服务器加载数据，然后在setSearchSelect内调用filterToolbar和loadComplete。例如，如果您使用loadonce: true，则可以在datatype内测试loadComplete参数的值。如果值为"json"，则您初始加载数据。因此，您应该致电setSearchSelect，然后根据需要致电destroyFilterToolbar，最后致电filterToolbar以创建过滤器工具栏，其中选择将包含所有必需值。

JQGrid MultiSelect Filter选项根据列的不同值填充

UPDATE1：

1 个答案: