Как добавить выпадающий фильтр Multiselect в jqGrid - PullRequest
Новая
       43

Как добавить выпадающий фильтр Multiselect в jqGrid

0 голосов
/ 15 июня 2019

Я пытаюсь добавить фильтр множественного выбора в мой столбец «ПРОВАЙДЕР» в jqGrid.Я могу добавить обычный фильтр выбора с одиночным выбором, но теперь я преобразовываю его в фильтр множественного выбора.Я сослался на несколько старых постов здесь и попытался сделать то же самое.Это не вызывает у меня никаких ошибок, но также не создает фильтр множественного выбора.Пожалуйста, дайте мне знать, что я делаю неправильно ниже.Я могу получить уникальные значения и создать список SELECT, я предполагаю, что что-то не так с функцией dataInitMultiselect, потому что я пытался console.log (elem), но он ничего не возвращает, даже не определен, но функция вызываетсяпотому что это не выдает мне неопределенную ошибку функции.

Кроме того, я добавил ссылки CDN для Bootstrap Multiselect до сих пор не удача и не ошибка.Я использую следующие ссылки 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);

};

Пожалуйста, помогите мне с резолюцией, ребята.

...