如何在jqGrid

时间:2019-06-15 07:07:45

标签: jquery jqgrid multi-select free-jqgrid jqgrid-php

我正在尝试将多选过滤器添加到jqGrid的“ PROVIDER”列中。我可以使用单选添加普通选择过滤器,但是现在我将其转换为多选过滤器。我在这里提到了一些旧帖子,并试图做同样的事情。它不会引发任何错误,但也不会创建多选过滤器。请在下面告诉我我在做什么错。我能够获取唯一值并能够创建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>

在buildSearchSelect函数返回时尝试将数据输入到console.log(),并通过形成这样的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);

};

请帮助我解决问题的人。

0 个答案:

没有答案