如何实现jqgrid多选工具栏

Question

目前 free-jqgrid 具有支持多选工具栏的功能，我也想在 jqgrid 中创建相同的功能。

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

Answer 1

可以在演示https://jsfiddle.net/OlegKi/ty4e68pm/16/ 上看到更多使用免费 jqGrid 的多选的最新代码。下面是演示中最重要的部分：

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 内的上述代码）来重新加载过滤器工具栏中的数据。