JQGrid MultiSelect Filter选项根据列的不同值进行填充 [英] JQGrid MultiSelect Filter option populate based on column's distinct value

问题描述

我正在使用带有Multiselect过滤器的JQGrid来过滤各个列. 目前，我正在使用数据库主值填充过滤器(例如SkillCategory列)

I am using JQGrid with Multiselect filter to filter individual columns. Currently I am populating filters(e.g. SkillCategory column) using database master values

{
 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筛选器的选项，因为行仅包含该列的编程"和数据"值.

This approach is populating all available master list(for SkillCategory) in to filter. I would like to show only available filter value based on those are present in available rows for particular column(for SkillCategory). This should show "Programming" and "Data" as option for SkillCategory filter as rows contains only "Programming" and "Data" value for that column.

我发现以下代码(对不起，忘记了链接)

I found below code(sorry forgot the link)

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")

Calling 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
            }); .....

但是它似乎不起作用.仅填充所有"值.

But seems its not working. Only "All" value is populated.

任何想法我该如何实现.

Any idea how can I achieve this.

根据下面的Oleg的建议，这是对我有用的工作代码.

As per Oleg's suggestion below is the working code which worked for me.

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事件对其进行设置:

And setting it from loadComplete event like below:

function loadCompleteHandler1() {
            initializeGridFilterValue();
        }

推荐答案

我看到您使用的是我的旧答案中的代码.关于您的问题:我想您首先调用创建过滤器工具栏的filterToolbar，然后再调用设置新searchoptions.value属性的setSearchSelect.另一个可能的问题是，在将数据加载到网格之前，先调用setSearchSelect .如果将datatype: "local"与data参数一起使用，则在创建网格的过程中会将数据填充到网格中.如果使用datatype: "json"，则应首先从服务器加载数据，然后在loadComplete内部调用setSearchSelect和filterToolbar.例如，如果使用loadonce: true，则可以测试loadComplete内部的datatype参数的值.如果值为"json"，则表示已进行数据的初始加载.因此，您应该调用setSearchSelect，然后在需要时调用destroyFilterToolbar，最后调用filterToolbar创建过滤器工具栏，该工具栏将具有所有必需的值.

I see that you use the code from my old answer. About your problem: I suppose that you first call filterToolbar which creates the filter toolbar and only later you call setSearchSelect which set new searchoptions.value property. Another possible problem is that you call setSearchSelect before the data will be loaded in the grid. If you use datatype: "local" with data parameter then the data are filled in the grid during creating of the grid. If you use datatype: "json" then you should first load the data from the server and then call setSearchSelect and filterToolbar inside of loadComplete. For example if you use loadonce: true then you can test the value of datatype parameter inside of loadComplete. If the value is "json" then you made initial loading of the data. So you should call setSearchSelect, then if required call destroyFilterToolbar and finally call filterToolbar to create filter toolbar which selects will have all required values.

这篇关于JQGrid MultiSelect Filter选项根据列的不同值进行填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！