Как реализовать панель мультиселекта jqgrid - PullRequest
Новая
       17

Как реализовать панель мультиселекта jqgrid

0 голосов
/ 01 июля 2019

В настоящее время в free-jqgrid есть функция, поддерживающая панель множественного выбора, такую ​​же функцию я также хочу создать в jqgrid.

http://www.ok -soft-gmbh.com / jqGrid / OK / MultiselectIn.htm

1 Ответ

0 голосов
/ 02 июля 2019

Более свежий код использования множественного выбора с бесплатным jqGrid можно увидеть в демоверсии https://jsfiddle.net/OlegKi/ty4e68pm/16/. Наиболее важные части демонстрации, которые я включаю ниже: 

var dataInitMultiselect = function (elem, searchOptions) {
        var $grid = $(this);
        setTimeout(function() {
            var $elem = $(elem),
                id = elem.id,
                inToolbar = searchOptions.mode === "filter",
                options = {
                    selectedList: 2,
                    height: "auto",
                    checkAllText: "all",
                    uncheckAllText: "no",
                    noneSelectedText: "Any",
                    open: function() {
                        var $menu = $(".ui-multiselect-menu:visible");
                        $menu.width("auto");
                        $menu.css({
                            width: "auto",
                            height: "auto"
                        });
                        $menu.children("ul").css({
                            maxHeight: "300px",
                            overflow: "auto"
                        });
                    }
                },
                $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";
            }
            $grid.triggerHandler("jqGridRefreshFilterValues");
            $elem.multiselect(options);
            // replace icons ui-icon-check, ui-icon-closethick, ui-icon-circle-close
            // and ui-icon-triangle-1-s to font awesome icons
            var $header = $elem.data("echMultiselect").header;
            $header.find("span.ui-icon.ui-icon-check")
                .removeClass("ui-icon ui-icon-check")
                .addClass("fa fa-fw fa-check");
            $header.find("span.ui-icon.ui-icon-closethick")
                .removeClass("ui-icon ui-icon-closethick")
                .addClass("fa fa-fw fa-times");
            $header.find("span.ui-icon.ui-icon-circle-close")
                .removeClass("ui-icon ui-icon-circle-close")
                .addClass("fa fa-times-circle");
            $elem.data("echMultiselect")
                .button
                .find("span.ui-icon.ui-icon-triangle-1-s")
                .removeClass("ui-icon ui-icon-triangle-1-s")
                .addClass("fa fa-caret-down")
                .css({
                    float: "right",
                    marginRight: "5px"
                });
        }, 50);
    },    
    multiselectTemplate = {
        stype: "select", 
        searchoptions: {
            generateValue: true,
            //noFilterText: "Any",
            sopt: ["in"],
            attr: {
                multiple: "multiple",
                size: 3
            },
            dataInit: dataInitMultiselect
        }
    };

объявляет multiselectTemplate шаблон.Следующий фрагмент кода использует шаблон в colModel

colModel: [
    ...
    {
        name: "ship_via", width: 85, align: "center",
        template: multiselectTemplate
    },
    ...
],

Наконец, loadComplete включает код, который создает панель инструментов фильтра после загрузки данных с сервера: 

loadComplete: function () {
    if (!this.ftoolbar) {
        // create filter toolbar if it isn't exist 
        $(this).jqGrid("filterToolbar", {
            defaultSearch: "cn",
            beforeClear: function() {
                $(this.grid.hDiv)
                    .find(".ui-search-toolbar button.ui-multiselect")
                    .each(function() {
                    $(this).prev("select[multiple]").multiselect("refresh");
                });
            }
        });
        $(this).triggerHandler("jqGridRefreshFilterValues");
        $(this.grid.hDiv)
            .find(".ui-search-toolbar button.ui-multiselect")
            .each(function() {
            $(this).prev("select[multiple]")
                .multiselect("refresh");
        });        
    }
},

При необходимости можно перезагрузить данные на панели инструментов фильтра, уничтожив их методом destroyFilterToolbar и выполнив тот же фрагмент кода, который создает их еще раз (я имею в виду код выше loadComplete).

...