free-jqgrid：free-jqgrid中的mutliselect 4.14.0
问题描述：
不确定为什么多选不工作，当我选择多个然后一个值。我正在使用free-jqgrid 4.14.0，并从erichynds中多选js。 此外，多选不会下降。我缺少任何CSS或什么...free-jqgrid：free-jqgrid中的mutliselect 4.14.0
任何帮助，请...
创建小提琴，但因为我不能在我的工作场所访问小提琴，我用我的手机，所以它不工作现在。我一定错过了什么。 https://jsfiddle.net/SudhirSahoo/h2k1ok2u/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SKumar - JQGrid</title>
<meta name="author" content="SK Inspired from Oleg">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
\t <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.css" />
<!--<link rel="stylesheet" href="jqGrid/css/ui.jqgrid.css">-->
<link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
\t
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
\t <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.js"></script>
<style type="text/css">
html, body { font-size: 75%; }
\t \t #gridSearchResult {
\t \t \t height: 460px;
\t \t }
</style>
<script type="text/javascript">
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script> -->
\t <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint eqeq: true, browser: true, plusplus: true */
$(function() {
"use strict";
var $grid = $("#list"),
gridData,
startTime,
measureTime = false,
timeInterval,
\t \t \t \t myDefaultSearch = "cn",
getColumnIndexByName = function (columnName) {
var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
filters = $.parseJSON(this.p.postData.filters);
if (filters && typeof filters.rules !== 'undefined' && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
iCol = getColumnIndexByName.call(this, rule.field);
cmi = cm[iCol];
if (iCol >= 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);
\t \t \t $("#search").click(function() {
\t \t \t \t var statesAsString = getStates();
\t \t \t \t startTime = new Date();
\t \t \t \t $grid.jqGrid({
\t \t \t \t \t datatype: 'json',
\t \t \t \t \t url: 'https://api.myjson.com/bins/efhbt',
\t \t \t \t \t mtype: 'GET',
\t \t \t \t \t \t \t colNames: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'Priority', 'Due Date', 'll', 'mm'],
\t \t \t \t \t colModel: [
\t \t \t \t \t \t { name: "aa", width: 200, label: "c01", frozen: true },
\t \t \t \t \t \t { name: "bb", width: 200, label: "c02", frozen: true },
\t \t \t \t \t \t { name: "cc", width: 100, label: "c03", frozen: true, search: true,
\t \t \t \t \t \t \t stype:'select',
\t \t \t \t \t \t \t \t searchoptions: {
\t \t \t \t \t \t \t \t \t sopt: ['eq','ne'],
\t \t \t \t \t \t \t \t \t value: statesAsString,
\t \t \t \t \t \t \t \t \t attr: {multiple: 'multiple', size: 3},
\t \t \t \t \t \t \t \t \t dataInit: dataInitMultiselect
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t },
\t \t \t \t \t \t { name: "dd", width: 100, label: "c04" },
\t \t \t \t \t \t { name: "ee", width: 100, label: "c05" },
\t \t \t \t \t \t { name: "ff", label: "c06" },
\t \t \t \t \t \t { name: "gg", label: "c07", editable: true, stype: 'select', formatter: 'select',
\t \t \t \t \t \t \t edittype: 'select', editoptions: {
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No',
\t \t \t \t \t \t \t \t multiple: false
\t \t \t \t \t \t \t }
\t \t \t \t \t \t },
\t \t \t \t \t \t { name: "hh", label: "c08", editable: true, stype: 'select', formatter: 'select',
\t \t \t \t \t \t \t edittype: 'select', editoptions: {
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No',
\t \t \t \t \t \t \t \t multiple: false
\t \t \t \t \t \t \t }
\t \t \t \t \t \t },
\t \t \t \t \t \t { name: "ii", label: "c09", editable: true, stype: 'select', formatter: 'select',
\t \t \t \t \t \t \t edittype: 'select', editoptions: {
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No',
\t \t \t \t \t \t \t \t multiple: false
\t \t \t \t \t \t \t }
\t \t \t \t \t \t },
\t \t \t \t \t \t { name: "jj", label: "c10", width: 100, editable: true },
\t \t \t \t \t \t { name: "kk", label: "c11", width: 100, editable: true,
\t \t \t \t \t \t \t formatter:'date', formatoptions: {newformat:'Y-m-d'}, datefmt: 'Y-m-d',
\t \t \t \t \t \t \t editoptions: {
\t \t \t \t \t \t \t \t size:20,
\t \t \t \t \t \t \t \t dataInit: function(el){
\t \t \t \t \t \t \t \t \t $(el).datepicker({
\t \t \t \t \t \t \t \t \t \t dateFormat: 'yy-mm-dd',
\t \t \t \t \t \t \t \t \t \t changeYear: true,
\t \t \t \t \t \t \t \t \t \t changeMonth: true,
\t \t \t \t \t \t \t \t \t \t showWeek: true,
\t \t \t \t \t \t \t \t \t \t yearRange: '1999:+1',
\t \t \t \t \t \t \t \t \t \t minDate: new Date()
\t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t defaultValue: function(){
\t \t \t \t \t \t \t \t \t var currentTime = new Date();
\t \t \t \t \t \t \t \t \t var month = parseInt(currentTime.getMonth() + 1);
\t \t \t \t \t \t \t \t \t month = month <= 9 ? "0"+month : month;
\t \t \t \t \t \t \t \t \t var day = currentTime.getDate();
\t \t \t \t \t \t \t \t \t day = day <= 9 ? "0"+day : day;
\t \t \t \t \t \t \t \t \t var year = currentTime.getFullYear();
\t \t \t \t \t \t \t \t \t return year+"-"+month + "-"+day;
\t \t \t \t \t \t \t \t },
\t \t \t \t \t \t \t \t maxlength: 10
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t searchoptions: {
\t \t \t \t \t \t \t \t sopt: ['eq'],
\t \t \t \t \t \t \t \t dataInit: function (elem) {
\t \t \t \t \t \t \t \t \t $(elem).datepicker({
\t \t \t \t \t \t \t \t \t \t dateFormat: 'yy-mm-dd',
\t \t \t \t \t \t \t \t \t \t changeYear: true,
\t \t \t \t \t \t \t \t \t \t changeMonth: true,
\t \t \t \t \t \t \t \t \t \t showWeek: true,
\t \t \t \t \t \t \t \t \t \t showButtonPanel: true,
\t \t \t \t \t \t \t \t \t \t autoclose: false,
\t \t \t \t \t \t \t \t \t \t currentText: "Clear",
\t \t \t \t \t \t \t \t \t \t closeText: "Filter",
\t \t \t \t \t \t \t \t \t \t yearRange: '1999:+1',
\t \t \t \t \t \t \t \t \t \t onSelect: function(selectedDate, inst) {
\t \t \t \t \t \t \t \t \t \t \t $(this).focus();
\t \t \t \t \t \t \t \t \t \t \t var target = $(selectedDate);
\t \t \t \t \t \t \t \t \t \t \t var inst = this._getInst(target[0]);
\t \t \t \t \t \t \t \t \t \t \t inst.inline = true;
\t \t \t \t \t \t \t \t \t \t \t $.datepicker._selectDateOverload(selectedDate, inst);
\t \t \t \t \t \t \t \t \t \t \t inst.inline = false;
\t \t \t \t \t \t \t \t \t \t \t this._updateDatepicker(inst);
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t }).focus(function() {
\t \t \t \t \t \t \t \t \t \t var thisCalendar = $(this);
\t \t \t \t \t \t \t \t \t \t $('.ui-datepicker-close').click(function() {
\t \t \t \t \t \t \t \t \t \t \t var selectedDate = $("#gs_kk").val();
\t \t \t \t \t \t \t \t \t \t \t setTimeout(function() {
\t \t \t \t \t \t \t \t \t \t \t \t $('#list')[0].triggerToolbar();
\t \t \t \t \t \t \t \t \t \t \t }, 100);
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t $('.ui-datepicker-current').click(function() {
\t \t \t \t \t \t \t \t \t \t \t var selectedDate = $("#gs_kk").val('');
\t \t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t }
\t \t \t \t \t \t },
\t \t \t \t \t \t { name: "ll", label: "c12", editable: true },
\t \t \t \t \t \t { name: "mm", label: "c13", editable: true }
\t \t \t \t \t ],
\t \t \t \t \t cmTemplate: { width: 100, autoResizable: true },
\t \t \t \t \t rowNum: 1000,
\t \t \t \t \t records: 1000,
\t \t \t \t \t rownumWidth: 40,
\t \t \t \t \t rowList: [20, 100, 1000, 10000, "100000:All"],
\t \t \t \t \t viewrecords: true,
\t \t \t \t \t rownumbers: true,
\t \t \t \t \t toppager: false,
\t \t \t \t \t pager: false,
\t \t \t \t \t shrinkToFit: false,
\t \t \t \t \t multiselect: true,
\t \t \t \t \t editurl: 'clientArray',
\t \t \t \t \t loadonce: true,
\t \t \t \t \t width: 800,
\t \t \t \t \t height: 400,
\t \t \t \t \t onSortCol: function() {
\t \t \t \t \t \t startTime = new Date();
\t \t \t \t \t \t measureTime = true;
\t \t \t \t \t },
\t \t \t \t \t /*onSelectRow: function (rowid) {
\t \t \t \t \t \t var $self = $(this),
\t \t \t \t \t \t \t savedRow = $self.jqGrid("getGridParam", "savedRow");
\t \t \t \t \t \t if (savedRow.length > 0) {
\t \t \t \t \t \t \t $self.jqGrid("restoreRow", savedRow[0].id);
\t \t \t \t \t \t }
\t \t \t \t \t \t $self.jqGrid("editRow", rowid);
\t \t \t \t \t },*/
\t \t \t \t \t loadComplete: function() {
\t \t \t \t \t \t if (measureTime) {
\t \t \t \t \t \t \t setTimeout(function() {
\t \t \t \t \t \t \t \t //alert("Total loading time: " + timeInterval + "ms");
\t \t \t \t \t \t \t }, 50);
\t \t \t \t \t \t \t measureTime = false;
\t \t \t \t \t \t }
\t \t \t \t \t },
\t \t \t \t \t autoencode: true,
\t \t \t \t \t caption: "Shows the performance of resizing. Make double-click on the column resizer"
\t \t \t \t }).jqGrid("filterToolbar", {
\t \t \t \t \t \t beforeSearch: function() {
\t \t \t \t \t \t \t startTime = new Date();
\t \t \t \t \t \t \t measureTime = true;
\t \t \t \t \t \t \t return false; // allow filtering
\t \t \t \t \t \t }
\t \t \t \t }).jqGrid("gridResize");
\t \t \t \t $grid.jqGrid("setFrozenColumns");
\t \t \t });
\t \t \t
\t \t \t
timeInterval = new Date() - startTime;
setTimeout(function() {
// alert("Total time: " + timeInterval + "ms");
}, 50);
\t \t \t
\t \t \t // On Click Of Button
\t \t \t $("#Change_Value").click(function() {
\t \t \t \t var v = $("#name").val();
\t \t \t \t var myGrid = $("#list");
\t \t \t \t var selRowIds = myGrid.jqGrid("getGridParam", "selarrrow");
\t \t \t \t //alert(selRowId.length);
\t \t \t \t for (var i = 0; i < selRowIds.length; i++) {
\t \t \t \t \t //rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]);
\t \t \t \t \t // one can uses the data here
\t \t \t \t \t myGrid.jqGrid("editRow", selRowIds[i], true);
\t \t \t \t }
\t \t \t });
});
\t \t
\t \t function getStates() {
\t \t \t var statesAsString = '';
\t \t \t $.ajax({
\t \t \t \t type \t : "GET",
\t \t \t \t url \t : "https://api.myjson.com/bins/xvjhl",
\t \t \t \t ContentType : 'json',
\t \t \t \t cache: false,
\t \t \t \t async: false,
\t \t \t \t success \t : function (data) {
\t \t \t \t \t var len = data.length;
\t \t \t \t \t for (var i = 0; i < len; i++) {
\t \t \t \t \t \t if(!(data[i] == null || data[i].toUpperCase() == 'NULL'))
\t \t \t \t \t \t {
\t \t \t \t \t \t \t statesAsString += data[i] + ':' + data[i]+ ';';
\t \t \t \t \t \t }
\t \t \t \t \t \t } \t
\t \t \t \t \t \t statesAsString = statesAsString.slice(0, -1); \t \t \t \t
\t \t \t \t }
\t \t \t })
\t \t \t return statesAsString;
\t \t }
//]]>
</script>
</head>
<body>
<div style="border: 1px solid black; padding-top: 10px; padding-bottom: 10px;">
\t \t <TABLE width="100%">
\t \t \t <TBODY>
\t \t \t \t <TR>
\t \t \t \t \t <TD align=left>
\t \t \t \t \t \t Country: <input type="text" name="country" id="country" />
\t \t \t \t \t \t
\t \t \t \t \t \t State: <input type="text" name="state" id="state" />
\t \t \t \t \t \t
\t \t \t \t \t \t <input type="button" name="search" id="search" value="Search" />
\t \t \t \t \t \t
\t \t \t \t \t \t <input type="button" name="reset" id="reset" value="Reset" />
\t \t \t \t \t </TD>
\t \t \t \t \t <TD align=right>
\t \t \t \t \t \t <input type="button" name="Change_Value" id="Change_Value" value="Change Priority to High" />
\t \t \t \t \t </TD>
\t \t \t \t </TR>
\t \t \t </TBODY>
\t \t </TABLE>
\t </div>
\t
<div id='gridSearchResult' style="margin-top: 10px;">
\t \t <table id="list"></table>
</div>
\t <div style="border: 1px solid black; align: centre; margin-top: 10px; padding-top: 10px; padding-bottom: 10px;">
\t \t <TABLE width="100%">
\t \t <TBODY>
\t \t \t <TR>
\t \t \t \t <TD align=center>
\t \t \t \t \t <input type="button" name="save" id="save" value="Save" />
\t \t \t \t \t
\t \t \t \t \t <input type="button" name="submit" id="submit" value="Submit" />
\t \t \t \t </TD>
\t \t </TR>
\t \t </TBODY>
\t </TABLE>
\t </div>
</body>
</html>
答
您使用非常旧的代码示例，这是我在项目开始免费jqGrid的前写道。免费的jqGrid现在支持很多功能，它允许以简化代码（并使其工作）
演示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);
}
});
我们不能设置多选降下来价值就像我们之前做的那样。例如，我的多选下拉值来自另一个服务。早期的方法是：searchoptions：{ \t \t \t \t \t \t \t \t \t SOPT：[ '当量'， 'NE']， \t \t \t \t \t \t \t \t \t值：scorecardAsString， \t \t \t \t \t \t \t \t \t attr：{multiple：'multiple'，size：3}， \t \t \t \t \t \t \t \t \t dataInit：dataInitMultiselect \t \t \t \t \t \t \t \t} – SKumar
感谢奥列格，我看到它是不容易的，从到最新版本，旧版本的jqGrid的迁移。做这个改变后，我现在面临很多问题。 – SKumar
@SKumar：很抱歉，您使用的版本是** 4.3 **，这个版本更像5年前的版本。你必须在很多年前迁移到更新的版本。你现在必须去做你去年跳过的工作。我建议您在发布下一个版本后直接迁移到新版本（或者测试一些兼容性问题）。例如，Chrome和Firefox都只支持最新版本和以前的版本。 Chrome每1.5个月发布一次新版本。因此，您必须*在1-3个月内组织迁移到下一个版本的Chrome。 5年来不可接受的网页开发。 – Oleg