JQGrid Multiselect过滤器 - 无法过滤多个选项

时间：2014-12-01 10:41:55

标签： jqgrid jquery-multiselect

抱歉打扰你了。 我正面临着JQGrid Multiselect过滤器的非常关键的问题。当我为特定列选择多个过滤器选项时，它返回空结果。见下面的截图。而且我附加代码。 在示例中，如果我选择＆＃34; SPM＆＃34;或者＆＃34; T-CRM＆＃34;单独为＆＃34; COE＆＃34;列作为搜索过滤器然后给出结果但是如果我同时选择＆＃34; SPM＆＃34;和＆＃34; T-CRM＆＃34;然后它没有返回任何价值。

*之前它按预期工作，但从我那天添加了基于列value列的JQGrid MultiSelect过滤器选项值填充后，它无效。

请帮助我克服这个问题。

enter image description here enter image description here enter image description here enter image description here 

<script type="text/javascript">
        createSelectList = function (data) {
            selectValue = jQuery.parseJSON(data);
            var s = '<select>';
            if (selectValue && selectValue.length) {
                for (var i = 0, l = selectValue.length; i < l; i++) {
                    s += '<option value="' + selectValue[i].Key + '">' + selectValue[i].Value + '</option>';
                }
            }
            return s + "</select>";
        }
        getUniqueNames = function (columnName, grid) {

            var mydata = grid.jqGrid("getGridParam", "data");
            var texts, uniqueTexts = [], textsLength, text, textsMap = {}, i;
            switch (columnName) {
                case "AccountName":
                    texts = $.map(mydata, function (item) { return item.AccountName; });
                    textsLength = texts.length;
                    break;
                case "OpportunityName":
                    texts = $.map(mydata, function (item) { return item.OpportunityName; });
                    textsLength = texts.length;
                    break;
                case "Account":
                    texts = $.map(mydata, function (item) { return item.Account; });
                    textsLength = texts.length;
                    break;
                case "COE":
                    texts = $.map(mydata, function (item) { return item.COE; });
                    textsLength = texts.length;
                    break;
                case "DemandType":
                    texts = $.map(mydata, function (item) { return item.DemandType; });
                    textsLength = texts.length;
                    break;
                case "Location":
                    texts = $.map(mydata, function (item) { return item.Location; });
                    textsLength = texts.length;
                    break;
                case "Designation":
                    texts = $.map(mydata, function (item) { return item.Designation; });
                    textsLength = texts.length;
                    break;
                case "Experience":
                    texts = $.map(mydata, function (item) { return item.Experience; });
                    textsLength = texts.length;
                    break;
                case "ExpectedRole":
                    texts = $.map(mydata, function (item) { return item.ExpectedRole; });
                    textsLength = texts.length;
                    break;
                case "SkillCategory":
                    texts = $.map(mydata, function (item) { return item.SkillCategory; });
                    textsLength = texts.length;
                    break;
                case "PrimarySkill":
                    texts = $.map(mydata, function (item) { return item.PrimarySkill; });
                    textsLength = texts.length;
                    break;
                case "SecondarySkill":
                    texts = $.map(mydata, function (item) { return item.SecondarySkill; });
                    textsLength = texts.length;
                    break;
                case "OtherSkill":
                    texts = $.map(mydata, function (item) { return item.OtherSkill; });
                    textsLength = texts.length;
                    break;
                case "RequiredDate":
                    texts = $.map(mydata, function (item) { return item.RequiredDate; });
                    textsLength = texts.length;
                    break;
                case "EndDate":
                    texts = $.map(mydata, function (item) { return item.EndDate; });
                    textsLength = texts.length;
                    break;
                case "CriticalFlag":
                    texts = $.map(mydata, function (item) { return item.CriticalFlag; });
                    textsLength = texts.length;
                    break;
                case "HiringSO":
                    texts = $.map(mydata, function (item) { return item.HiringSO; });
                    textsLength = texts.length;
                    break;
                case "HiringSOId":
                    texts = $.map(mydata, function (item) { return item.HiringSOId; });
                    textsLength = texts.length;
                    break;
                case "ConfidenceFactor":
                    texts = $.map(mydata, function (item) { return item.ConfidenceFactor; });
                    textsLength = texts.length;
                    break;
                case "AccountPOC":
                    texts = $.map(mydata, function (item) { return item.AccountPOC; });
                    textsLength = texts.length;
                    break;
                case "Type":
                    texts = $.map(mydata, function (item) { return item.Type; });
                    textsLength = texts.length;
                    break;
                case "EmpName":
                    texts = $.map(mydata, function (item) { return item.EmpName; });
                    textsLength = texts.length;
                    break;
                case "AvailabilityDate":
                    texts = $.map(mydata, function (item) { return item.AvailabilityDate; });
                    textsLength = texts.length;
                    break;
                case "CurrentRole":
                    texts = $.map(mydata, function (item) { return item.CurrentRole; });
                    textsLength = texts.length;
                    break;
                case "VisaStatus":
                    texts = $.map(mydata, function (item) { return item.VisaStatus; });
                    textsLength = texts.length;
                    break;
                case "Country":
                    texts = $.map(mydata, function (item) { return item.Country; });
                    textsLength = texts.length;
                    break;
                case "ProbablePercentage":
                    texts = $.map(mydata, function (item) { return item.ProbablePercentage; });
                    textsLength = texts.length;
                    break;
                //Assignment  
                case "AssignmentId":
                    texts = $.map(mydata, function (item) { return item.AssignmentId; });
                    textsLength = texts.length;
                    break;
                case "SupplyId":
                    texts = $.map(mydata, function (item) { return item.SupplyId; });
                    textsLength = texts.length;
                    break;
                case "DemandId":
                    texts = $.map(mydata, function (item) { return item.DemandId; });
                    textsLength = texts.length;
                    break;
                case "Status":
                    texts = $.map(mydata, function (item) { return item.Status; });
                    textsLength = texts.length;
                    break;
                case "ApproverId":
                    texts = $.map(mydata, function (item) { return item.ApproverId; });
                    textsLength = texts.length;
                    break;
                case "ApprovalDate":
                    texts = $.map(mydata, function (item) { return item.ApprovalDate; });
                    textsLength = texts.length;
                    break;
                case "CreatedBy":
                    texts = $.map(mydata, function (item) { return item.CreatedBy; });
                    textsLength = texts.length;
                    break;
                case "CreatedDate":
                    texts = $.map(mydata, function (item) { return item.CreatedDate; });
                    textsLength = texts.length;
                    break;
                case "Comments":
                    texts = $.map(mydata, function (item) { return item.Comments; });
                    textsLength = texts.length;
                    break;

                case "EmpId":
                    texts = $.map(mydata, function (item) { return item.EmpId; });
                    textsLength = texts.length;
                    break;
                case "AvailabilityMonth":
                    texts = $.map(mydata, function (item) { return item.AvailabilityMonth; });
                    textsLength = texts.length;
                    break;
            }

            // var texts = grid.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.sort();
        }
        buildSearchSelect = function (uniqueNames) {
            var values = "";
            $.each(uniqueNames, function () {
                values += this + ":" + this + ";";
            });
            return values.substring(0, values.length - 1);
        }
        setSearchSelect = function (columnName, grid) {
            grid.jqGrid('setColProp', columnName,
                        {
                            searchoptions: {
                                clearSearch: false,
                                sopt: ['eq', 'ne'],
                                value: buildSearchSelect(getUniqueNames(columnName, grid)),
                                attr: { multiple: 'multiple', size: 3 },
                                dataInit: dataInitMultiselect
                            }
                        }
            );
        }
        function loadCompleteHandler() {
            initializeGridFilterValueDem();
        }
        initializeGridFilterValueDem = function () {

            setSearchSelect("DemandId", jQuery("#listTable"));
            setSearchSelect("AccountName", jQuery("#listTable"));
            setSearchSelect("AccountPOC", jQuery("#listTable"));
            setSearchSelect("COE", jQuery("#listTable"));
            setSearchSelect("DemandType", jQuery("#listTable"));
            setSearchSelect("Location", jQuery("#listTable"));
            setSearchSelect("OpportunityName", jQuery("#listTable"));
            setSearchSelect("Designation", jQuery("#listTable"));
            setSearchSelect("Experience", jQuery("#listTable"));
            setSearchSelect("ExpectedRole", jQuery("#listTable"));
            setSearchSelect("SkillCategory", jQuery("#listTable"));
            setSearchSelect("PrimarySkill", jQuery("#listTable"));
            setSearchSelect("SecondarySkill", jQuery("#listTable"));
            setSearchSelect("OtherSkill", jQuery("#listTable"));
            setSearchSelect("RequiredDate", jQuery("#listTable"));
            setSearchSelect("EndDate", jQuery("#listTable"));
            setSearchSelect("ProbablePercentage", jQuery("#listTable"));
            setSearchSelect("CriticalFlag", jQuery("#listTable"));
            setSearchSelect("ConfidenceFactor", jQuery("#listTable"));
            setSearchSelect("HiringSO", jQuery("#listTable"));
            setSearchSelect("HiringSOId", jQuery("#listTable"));

            jQuery("#listTable").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("#listTable").jqGrid('setGridHeight', 300);
        }
        </script>
        <script type="text/javascript">
            jQuery(function () {
                $grid = $("#listTable"),
                    myDefaultSearch = "cn",
                    getColumnIndexByName = function (columnName) {
                        var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                        for (i = 0; i < l; i += 1) {
                            if (cm[i].name === columnName) {
                                return i; // return the index
                            }
                        }
                        return -1;
                    },
                    modifySearchingFilter = function (separator) {
                        var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
                            filters = $.parseJSON(this.p.postData.filters);
                        if (filters && filters.rules !== undefined && filters.rules.length > 0) {
                            rules = filters.rules;
                            for (i = 0; i < rules.length; i++) {
                                rule = rules[i];
                                iCol = getColumnIndexByName.call(this, rule.field);
                                cmi = cm[iCol];
                                if (iCol >= 0 &&
                                        ((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
                                            && (rule.op === myDefaultSearch)) ||
                                        (typeof (cmi.searchoptions) === "object" &&
                                            $.isArray(cmi.searchoptions.sopt) &&
                                            cmi.searchoptions.sopt[0] === rule.op)) {
                                    // make modifications only for the 'contains' operation
                                    parts = rule.data.split(separator);
                                    if (parts.length > 1) {
                                        if (filters.groups === undefined) {
                                            filters.groups = [];
                                        }
                                        group = {
                                            groupOp: 'OR',
                                            groups: [],
                                            rules: []
                                        };
                                        filters.groups.push(group);
                                        for (j = 0, l = parts.length; j < l; j++) {
                                            str = parts[j];
                                            if (str) {
                                                // skip empty '', which exist in case of two separaters of once
                                                group.rules.push({
                                                    data: parts[j],
                                                    op: rule.op,
                                                    field: rule.field
                                                });
                                            }
                                        }
                                        rules.splice(i, 1);
                                        i--; // to skip i++
                                    }
                                }
                            }
                            this.p.postData.filters = JSON.stringify(filters);
                        }
                    },
                    dataInitMultiselect = function (elem) {
                        setTimeout(function () {
                            var $elem = $(elem), id = elem.id,
                                inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
                                options = {
                                    selectedList: 2,
                                    height: "auto",
                                    checkAllText: "all",
                                    uncheckAllText: "no",
                                    noneSelectedText: "Any",
                                    open: function () {
                                        var $menu = $(".ui-multiselect-menu:visible");
                                        $menu.width("auto");
                                        return;
                                    }
                                },
                                $options = $elem.find("option");
                            if ($options.length > 0 && $options[0].selected) {
                                $options[0].selected = false; // unselect the first selected option
                            }
                            if (inToolbar) {
                                options.minWidth = 'auto';
                            }
                            //$elem.multiselect(options);
                            $elem.multiselect(options).multiselectfilter({ placeholder: '' });
                            $elem.siblings('button.ui-multiselect').css({
                                width: inToolbar ? "98%" : "100%",
                                marginTop: "1px",
                                marginBottom: "1px",
                                paddingTop: "3px"
                            });
                        }, 50);

                    };
                jQuery("#listTable").jqGrid({
                    url: 'HttpHandler/DemandHandler.ashx',
                    ajaxSelectOptions: { cache: false },
                    postData: { ActionPage: 'TransportType', Action: 'Fill', AssignStatus: 'U' },
                    datatype: 'json',
                    mtype: 'GET',
                    colNames: ['DemandId', 'Account', 'POC', 'COE', 'Type', 'Location', 'OpportunityName', 'Designation', 'Experience', 'ExpectedRole', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'RequiredDate', 'EndDate', 'Probable %', 'CriticalFlag', 'AssignedFlag', 'ConfidenceFactor', 'HiringSO', 'SOId', 'Comments', "# of Positions"],
                    colModel: [
                                    .........
                                    {
                                        name: 'COE', index: 'COE', width: '100%', stype: 'select', sortable: true, resizable: true, formoptions: { rowpos: 2, colpos: 1, elmsuffix: "(<span class='mystar' style='color:red'>*</span>)" }, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
                                            style: "width: 150px",
                                            dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=coe',
                                            buildSelect: createSelectList
                                        }
                                    },
                                    .......
                    ],
                    width: '1785',
                    autowidth: false,
                    height: '500',
                    loadonce: true,
                    pager: '#pager',
                    gridview: true,
                    rowNum: 15,
                    rowList: [15, 30, 45],
                    rowTotal: 5000,
                    sortorder: 'desc',
                    sortname: 'DemandId',
                    viewrecords: true,
                    rownumbers: true,
                    toppager: true,
                    caption: 'Latest Demands',
                    emptyrecords: "No records to view",
                    loadtext: "Loading...",
                    refreshtext: "Refresh",
                    refreshtitle: "Reload Grid",
                    loadComplete: loadCompleteHandler,
                }).jqGrid('bindKeys');

                $('#listTable').bind('keydown', function (e) {
                    if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
                });

             ...   
        </script>

        .....
        <body>
        <div style="width: 1185px; overflow: auto;">
            <table id="listTable">
                <tbody>
                    <tr>
                        <td />
                    </tr>
                </tbody>
            </table>
            <div id="pager">
            </div>
        </div>
    </body>

1 个答案:

答案 0 :(得分：1)

我设法解决了这个问题。 我错过了网格结构中的代码：

beforeRequest: function () {
                    modifySearchingFilter.call(this, ",");
                }
相关问题
最新问题