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>
我們不能設置多選降下來價值就像我們之前做的那樣。例如,我的多選下拉值來自另一個服務。早期的方法是: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