jquery - 如何在 jqGrid 中添加多选下拉过滤器

Question

我正在尝试将多选过滤器添加到 jqGrid 中的“提供者”列中。我可以使用单选添加普通选择过滤器，但现在我将其转换为多选过滤器。我在这里提到了一些旧帖子并尝试做同样的事情。它没有给我任何错误，但也没有创建多选过滤器。请让我知道我在下面做错了什么。我能够获得唯一值并能够创建 SELECT 列表，我猜函数 dataInitMultiselect 有问题，因为我尝试使用 console.log(elem) 但它没有返回任何内容，甚至没有返回任何东西，甚至没有返回任何东西，但函数被调用因为它没有给我抛出未定义的函数错误。

此外，我还为 Bootstrap Multiselect 添加了 CDN 链接，但仍然没有运气也没有错误。我正在使用以下 jqgrid 和 Bootstrap CDN 链接：

    <!-- JQGRID CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.4/js/jquery.jqgrid.min.js"></script>
<link   rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">


    <!--Juery CDN and Bootstrap CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

试图 console.log() 在 buildSearchSelect 函数返回附近的数据，它通过形成这样的 SELECT 正确地返回我的数据。

Movie Web:Movie Web;Metacritic:Metacritic;Cinema Blend:Cinema Blend;Boxofficemojo:Boxofficemojo

所以我猜一切似乎都正常工作，并且数据正在添加到

value: buildSearchSelect(getUniqueNames(columnName, data,grid)),

以下是我正在使用的 JQGRID 程序：

$("#home_grid").jqGrid({
    url: "/URL_TO_FETCH_DATA",
    datatype: "json",
    mtype: "GET",
    colNames: ["PROVIDER", "Title","Original Publish Time", "Fetch Time"],
    colModel:
    [
        {
            name    : "PROVIDER",
            align   : "center",
            width   : "120%",
            search  : true
        },
        {
            name    : "TITLE",
            align   : "center",
            search  : true,
            width   : "250%",
            formatter: Title_Url_Bind 
        },
        {
            name        : "PUBLISH_TIME",
            align       : "center",
            width       : "130%",
            search      : true,
            sorttype    : "datetime"

        },
        {
            name        : "DB_ENTRY_TIME",
            align       : "center",
            width       : "130%",
            sortable    : true,
            sorttype    : "datetime"
        }
    ],
    pager       : "#home_pager",
    loadonce    : true,
    shrinkToFit : true,
    rowNum      : 10,
    autoHeight  : true,
    rowList     : [10, 15, 20, 25, 50],
    sortable    : true,
    viewrecords : true,
    toolbar     : [true, "top"],
    autowidth   : true,
    beforeProcessing: beforeProcessingHandler1,
});

function beforeProcessingHandler1(data) {
    initializeGridFilterValueDem(data);
}

initializeGridFilterValueDem = function (data) {
    setSearchSelect("PROVIDER", jQuery("#home_grid"), data);
}

setSearchSelect = function (columnName, grid,data) {
    grid.jqGrid('setColProp', columnName,
        {
            searchoptions: {
                clearSearch: false,
                sopt: ['eq', 'ne'],
                value: buildSearchSelect(getUniqueNames(columnName, data,grid)),
                attr: { multiple: 'multiple', size: 7},
                dataInit: dataInitMultiselect
            }
        }
    );
}

buildSearchSelect = function (uniqueNames) {
    var values = "";
    $.each(uniqueNames, function () {
        values += this + ":" + this + ";";
    });
    return values.substring(0, values.length - 1);
}

getUniqueNames = function (columnName, mydata_parm, grid) {

    var texts = grid.jqGrid("getGridParam", "data");

    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;
}

dataInitMultiselect = function (elem) {
    console.log(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);

};

请帮我解决问题。

标签： jqueryjqgridmulti-selectfree-jqgridjqgrid-php