free-jqgrid：free-jqgrid 4.14.0中的mutliselect
当我选择多个值时，不确定为什么多选不起作用。 我正在使用free-jqgrid 4.14.0和来自erichynds的multiselect js。 此外，多选也不会下降。 我错过任何CSS或任何东西……
请帮忙…
创造了小提琴，但由于我无法在我的工作场所使用小提琴，我使用了我的手机，所以它现在无法使用。 我一定错过了什么。 https://jsfiddle.net/SudhirSahoo/h2k1ok2u/
SKumar - JQGrid <!----> html, body { font-size: 75%; } #gridSearchResult { height: 460px; } $.jgrid = $.jgrid || {}; $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true; <!-- --> <!----> //<![CDATA[ /*global $ */ /*jslint eqeq: true, browser: true, plusplus: true */ $(function () { "use strict"; var $grid = $("#list"), gridData, startTime, measureTime = false, timeInterval, myDefaultSearch = "cn", getColumnIndexByName = function (columnName) { var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length; for (i = 0; i 0) { rules = filters.rules; for (i = 0; i = 0 && ((typeof (cmi.searchoptions) === "undefined" || typeof (cmi.searchoptions.sopt) === "undefined") && rule.op === myDefaultSearch) || (typeof (cmi.searchoptions) === "object" && $.isArray(cmi.searchoptions.sopt) && cmi.searchoptions.sopt[0] === rule.op)) { // make modifications only for the 'contains' operation parts = rule.data.split(separator); if (parts.length > 1) { if (typeof filters.groups === 'undefined') { filters.groups = []; } group = { groupOp: 'OR', groups: [], rules: [] }; filters.groups.push(group); for (j = 0, l = parts.length; j < l; j++) { str = parts[j]; if (str) { // skip empty '', which exist in case of two separaters of once group.rules.push({ data: parts[j], op: rule.op, field: rule.field }); } } rules.splice(i, 1); i--; // to skip i++ } } } this.p.postData.filters = JSON.stringify(filters); } }, dataInitMultiselect = function (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: "None", noneSelectedText: "Any", open: function () { var $menu = $(".ui-multiselect-menu:visible"); $menu.width("auto"); return; } }; if (inToolbar) { options.minWidth = 'auto'; } $elem.multiselect(options); $elem.siblings('button.ui-multiselect').css({ width: inToolbar? "98%": "100%", marginTop: "1px", marginBottom: "1px", paddingTop: "3px" }); }, 50); }; var date = new Date(), t = Object.prototype.toString.call(date), t1 = String(date); $( "#search" ).click(function() { var statesAsString = getStates(); startTime = new Date(); $grid.jqGrid({ datatype: 'json', url: 'https://api.myjson.com/bins/efhbt', mtype: 'GET', colNames: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'Priority', 'Due Date', 'll', 'mm'], colModel: [ { name: "aa", width: 200, label: "c01", frozen: true }, { name: "bb", width: 200, label: "c02", frozen: true }, { name: "cc", width: 100, label: "c03", frozen: true, search: true, stype:'select', searchoptions: { sopt: ['eq','ne'], value: statesAsString, attr: {multiple: 'multiple', size: 3}, dataInit: dataInitMultiselect } }, { name: "dd", width: 100, label: "c04" }, { name: "ee", width: 100, label: "c05" }, { name: "ff", label: "c06" }, { name: "gg", label: "c07", editable: true, stype: 'select', formatter: 'select', edittype: 'select', editoptions: { value: 'Select:Select;Y:Yes;N:No', multiple: false } }, { name: "hh", label: "c08", editable: true, stype: 'select', formatter: 'select', edittype: 'select', editoptions: { value: 'Select:Select;Y:Yes;N:No', multiple: false } }, { name: "ii", label: "c09", editable: true, stype: 'select', formatter: 'select', edittype: 'select', editoptions: { value: 'Select:Select;Y:Yes;N:No', multiple: false } }, { name: "jj", label: "c10", width: 100, editable: true }, { name: "kk", label: "c11", width: 100, editable: true, formatter:'date', formatoptions: {newformat:'Ym-d'}, datefmt: 'Ym-d', editoptions: { size:20, dataInit: function(el){ $(el).datepicker({ dateFormat: 'yy-mm-dd', changeYear: true, changeMonth: true, showWeek: true, yearRange: '1999:+1', minDate: new Date() }); }, defaultValue: function(){ var currentTime = new Date(); var month = parseInt(currentTime.getMonth() + 1); month = month <= 9 ? "0"+month : month; var day = currentTime.getDate(); day = day 0) { $self.jqGrid("restoreRow", savedRow[0].id); } $self.jqGrid("editRow", rowid); },*/ loadComplete: function () { if (measureTime) { setTimeout(function () { //alert("Total loading time: " + timeInterval + "ms"); }, 50); measureTime = false; } }, autoencode: true, caption: "Shows the performance of resizing. Make double-click on the column resizer" }).jqGrid("filterToolbar", { beforeSearch: function () { startTime = new Date(); measureTime = true; return false; // allow filtering } }).jqGrid("gridResize"); $grid.jqGrid("setFrozenColumns"); }); timeInterval = new Date() - startTime; setTimeout(function () { // alert("Total time: " + timeInterval + "ms"); }, 50); // On Click Of Button $( "#Change_Value" ).click(function() { var v = $("#name").val(); var myGrid = $("#list"); var selRowIds = myGrid.jqGrid("getGridParam", "selarrrow"); //alert(selRowId.length); for (var i = 0; i < selRowIds.length; i++) { //rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]); // one can uses the data here myGrid.jqGrid("editRow", selRowIds[i], true); } }); }); function getStates() { var statesAsString = ''; $.ajax({ type : "GET", url : "https://api.myjson.com/bins/xvjhl", ContentType : 'json', cache: false, async: false, success : function (data) { var len = data.length; for ( var i = 0; i Country: State:
你使用非常古老的代码示例，我在开始项目之前编写了免费的jqGrid。 免费的jqGrid现在支持许多function，可以简化代码（并使其工作）
演示https://jsfiddle.net/OlegKi/h0mwtw8s/使用以下代码：
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.find(">ul").css("maxHeight", "200px"); return; } }, $options = $elem.find("option"); if (inToolbar) { options.minWidth = "auto"; } $grid.triggerHandler("jqGridRefreshFilterValues"); $elem.multiselect(options); $elem.siblings("button.ui-multiselect").css({ width: "100%", margin: "1px 0", paddingTop: ".3em", paddingBottom: ".3em" }); }, 50); }, multiselectTemplate = { stype: "select", searchoptions: { generateValue: true, //noFilterText: "Any", sopt: ["in"], attr: { multiple: "multiple", size: 4 }, dataInit: dataInitMultiselect } }; $("#jqGridA").jqGrid({ url: "...", datatype: "json", forceClientSorting: true, loadonce: true, colNames: ["Client", "Amount", "Tax", "Total", "Shipped via", "Notes"], colModel: [ {name: "name", width: 85, editable: true, template: multiselectTemplate}, {name: "amount", width: 75, template: "number"}, {name: "tax", width: 52, template: "number"}, {name: "total", width: 65, template: "number", editable:true}, {name: "ship_via", width: 85, align: "center", template: multiselectTemplate}, {name: "note", width: 100, sortable: false} ], rowNum: 10, loadui: "block", inFilterSeparator: ";", multiselect: true, multiPageSelection: true, 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"); }); } }, rowList: [10, 20, 30, 100], pager: true, pagerRightWidth: 135, // fix wrapping or right part of the pager viewrecords: true, sortable: true, shrinkToFit: false }).jqGrid("navGrid", {edit: true, add: false, del: false, search: false}, { afterComplete: function(response, postdata) { $(this).jqGrid('resetSelection'); var p = $(this).jqGrid("getGridParam"); p.selarrrow = []; beforeProcessingHandler.call(this, p.data); } });