时间戳

首页 > 解决方案 > 配置 jqgrid 搜索以搜索多个之一

jqgrid - 配置 jqgrid 搜索以搜索多个之一

问题描述

我在理解或实现 jqgrid 中的搜索/过滤功能时遇到了麻烦。

数据集返回给客户端，每个项目都有一个设计师列表：

"IAConsultWorkflowRequestsList": [
    {
        "AppID": "ISP",
        "SubmittedDate": "12/13/2018",
        "IAAssigned": "<a style='color:blue !important;' href='mailto:Joseph@somewhere.com'><u>Joseph Kraft</u></a>",
        "IAAssignedName": null,
        "Status": "In Discovery",
        "SLA": 0,
        "DaysPassed": 157,
        "IsUserFM": false,
        "IsUserSecureEnv": false,
        "DesignParticipants": [
            {
                "Name": "John Kraft",
                "EmailAddress": "",
                "ID": "A2049"
            },
            {
                "Name": "Zack Adamas",
                "EmailAddress": "Zachary.Adamas@somewhere.com",
                "ID": "U6696"
            },
            {
                "Name": "David Kosov",
                "EmailAddress": "David.Kosov@somewhere.com",
                "ID": "U6644"
            }
        ]
    }

因此，在“设计师”列中，我将结果连接起来以逗号分隔，例如

约翰·克拉夫特、扎克·阿达玛斯、大卫·科索夫

并且，如果该项目有一个电子邮件地址，则个人名称将被格式化为电子邮件链接：

<td role="gridcell" style="text-align:center;" title="John Kraft,Zack Burns,David Cosand" aria-describedby="workFlowIAGrid_DesignParticipants">
John Kraft,<br>
<a style="color:blue !important;" ref="mailto:Zachary@somewhere.com"><u>Zack </u></a>,<br>
<a style="color:blue !important;" href="mailto:David@somewhere.com"><u>David </u></a></td>

我有一个包含条目 John、Zack 和 David 的选择元素，但是当我选择其中一个选项时，我没有得到预期的结果。如果我选择 David，我希望在 Designer 列中显示包含 David 作为可能的多个名称之一的任何行。

但是，我的行为不稳定。一些 sopt 选项会导致某些事情发生，但不是预期的。包含/不包含或包含/不包含选项似乎都不能满足我的需要。我究竟做错了什么？

根据 Tony 的评论，这里是网格初始化代码：

$gridEl.jqGrid({
        xhrFields: {
            cors: false
        },
        url: "/IAConsult/GetWorkFlowIARequests",
        postData: {
            showAll: showAllVal,
            role: role,
            IsIAArchitect: userIsIA
        },
        datatype: "json",
        crossDomain: true,
        loadonce: true,
        mtype: 'GET',
        sortable: true,
        viewrecords: true,
        pager: '#workFlowIAGridPager',
        multiselect: true,
        rowNum: 50,
        autowidth: true,
        colModel: [
            { label: 'Design Participants', name: 'DesignParticipants', align: "center", formatter:commaSeparatedList },
            //same for other columns...
        ],
        beforeSelectRow: function (rowid, e) {
            var $myGrid = $(this),
                i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                cm = $myGrid.jqGrid('getGridParam', 'colModel');
            return (cm[i].name === 'cb');
        },
        jsonReader: {
            repeatitems: true,
            root: "IAConsultWorkflowRequestsList"
        },
        beforeSubmitCell: function (rowid, name, value, iRow, iCol) {
            return {
                gridData: gridData
            };
        },
        serializeCellData: function (postdata) {
            return JSON.stringify(postdata);
        },
        gridComplete: function () {
            rowCount = $gridEl.getGridParam('records');
            gridViewRowCount = rowCount;
            var rowIDs = $gridEl.getDataIDs();
            var inCompleteFlag = false;
            //Filter code to apply filter in headers in MyWork grid
            var datatoFilter = $gridEl.jqGrid('getGridParam', 'lastSelectedData').length == 0
                ? $gridEl.jqGrid("getGridParam", "data")
                : $gridEl.jqGrid('getGridParam', 'lastSelectedData');
            var $grid = $gridEl, postfilt = "";
            var getUniqueNames = function (columnName) {

                var uniqueTexts = [],
                    mydata = datatoFilter,
                    texts = $.map(mydata, function(item) {
                        return item[columnName];
                    }),
                    textsLength = texts.length,
                    text = "",
                    textsMap = {},
                    i;

                if (texts[0] && texts[0].Name)
                    texts = $.map(texts,
                        function(item) {
                            return item.Name;
                        });

                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);
                    }
                }
                if (columnName == 'ConsultID') {
                    return (uniqueTexts.sort(function (a, b) { return a - b; }));
                } else return uniqueTexts.sort();
            }, buildSearchSelect = function (uniqueNames) {
                var values = {};
                values[''] = 'All';
                $.each(uniqueNames,
                    function () {
                        values[this] = this;
                    });
                return values;
            }, setSearchSelect = function (columnName) {
                var changedColumns = [];
                this.jqGrid("setColProp",
                    columnName,
                    {
                        stype: "select",
                        searchoptions: {
                            value: buildSearchSelect(getUniqueNames.call(this, columnName)),
                            sopt: getSortOptionsByColName(columnName),
                            dataEvents: [
                                {
                                    type: "change",
                                    fn: function (e) {
                                        setTimeout(function () {
                                            //get values of dropdowns

                                            var DesignParticipant = $('#gs_workFlowIAGrid_DesignParticipants').val();
                                            //same for other columns...

                                            var columnNamesArr = columns.split(',');
                                            changedColumns.push(columnName);
                                            for (i = 0; i < columnNamesArr.length; i++) {
                                                if (true) {
                                                    var htmlForSelect = '<option value="">All</option>';
                                                    var un = getUniqueNames(columnNamesArr[i]);
                                                    var $select = $("select[id='gs_workFlowIAGrid_" + columnNamesArr[i] + "']");

                                                    for (j = 0; j < un.length; j++) {
                                                        var val = un[j];

                                                        htmlForSelect += '<option value="' + val + '">' + val + '</option>';
                                                    }
                                                    $select.find('option').remove().end().append(htmlForSelect);

                                                }
                                            }

                                            $('#gs_workFlowIAGrid_DesignParticipants').val(DesignParticipant);
                                            //same for other columns...
                                        },
                                            500);
                                        //setting the values :
                                    }
                                }
                            ]
                        }
                    });
            };

            function getSortOptionsByColName(colName) {
                console.log(colName);
                if (colName === 'DesignParticipants')
                    return ['in'];
                else
                    return ['eq'];
            }

            setSearchSelect.call($grid, "DesignParticipants");
            //same for other columns...

            $grid.jqGrid("filterToolbar",
                { stringResult: true, searchOnEnter: true });

            var localFilter = $gridEl.jqGrid('getGridParam', 'postData').filters;
            if (localFilter !== "" && localFilter != undefined) {
                globalFilter = localFilter;
            }
            $gridEl.jqGrid("setGridParam",
                    {
                        postData: {
                             "filters": globalFilter,
                             showAll: showAllVal,
                             role: role,
                             IsIAArchitect: userIsIA
                        },
                        search: true,
                        forceClientSorting: true
                    })
                .trigger("reloadGrid");
            //Ending Filter code
            var columnNamesArr = columns.split(',');
            for (i = 0; i < columnNamesArr.length; i++) {
                if (true) {
                    var htmlForSelect = '<option value="">All</option>';
                    var un = getUniqueNames(columnNamesArr[i]);
                    var $select = $("select[id='gs_workFlowIAGrid_" + columnNamesArr[i] + "']");
                    for (j = 0; j < un.length; j++) {
                        val = un[j];

                        htmlForSelect += '<option value="' + val + '">' + val + '</option>';
                    }
                    $select.find('option').remove().end().append(htmlForSelect);
                }
            }
        },

        // all grid parameters and additionally the following
        loadComplete: function () {
            $gridEl.jqGrid('setGridWidth', $(window).width(), true);
            $gridEl.setGridWidth(window.innerWidth - 20);
        },

        height: '100%'
    });

这是我在列上使用的格式化程序：

function commaSeparatedList(cellValue, options, rowdata, action) {

        let dps = [];
        _.forEach(cellValue, function (item) {
            let formatted = '';
            if (item.EmailAddress)
                formatted += '<a style="color:blue !important;" href="mailto:' +
                    item.EmailAddress +
                    '"><u>' +
                    item.Name +
                    '</u></a>';
            else formatted = item.Name;
            dps.push(formatted + ',<br/>');
        });

        let toString = dps.join('');
        return toString.substring(0,toString.length-6);
    }

然后唯一相关的事情是，如果列名为“设计参与者”，我使用了一个函数来返回“in”（或其他一些键 - 这些是我所说的选项在最初的帖子中显然不起作用）， else 等于任何其他列：

setSearchSelect = function (columnName) {
                var changedColumns = [];
                this.jqGrid("setColProp",
                    columnName,
                    {
                        stype: "select",
                        searchoptions: {
                            value: buildSearchSelect(getUniqueNames.call(this, columnName)),
                            sopt: getSortOptionsByColName(columnName),
                            dataEvents: [
                                {...
function getSortOptionsByColName(colName) {
                console.log(colName);
                if (colName === 'DesignParticipants')
                    return ['in'];
                else
                    return ['eq'];
            }

标签： jqgrid

解决方案

问题是基础数据（上面返回的 JSON 中的 DesignParticipants）与所选字符串不匹配，因为数据本身是一个数组。我相信过滤是基于网格表中显示的文本，但是，它是基于基础数据的。因此，我为返回的 JSON 创建了一个新属性，它是一个字符串，并且过滤按预期工作。

推荐阅读