如何实现jqgrid multiselect工具栏

时间:2019-07-01 05:27:08

标签: jqgrid free-jqgrid

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

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

1 个答案:

答案 0 :(得分:0)

在演示https://jsfiddle.net/OlegKi/ty4e68pm/16/上可以看到带有免费jqGrid的最新multiselect使用代码。我在演示中最重要的部分包括以下内容:

admin.firestore().doc(`users/${context.params.userId}`).get()...

声明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内部创建代码)重新加载过滤器工具栏中的数据。