如何在免费的 jqGrid 4.13.0 中实现单击复选框
How to implement single click checkbox in free jqGrid 4.13.0
在 4.13 之前的免费 jqGrid 中
editoptions: {
disabled: false
},
用于实现在线编辑中的单击复选框。
在 4.13 中，如果在没有保存的情况下单击新行，复选框状态将不再恢复。
要复制，运行 下面的代码并单击未选中的关闭列以将复选标记放入其中。
现在单击其他行。
在 4.13 中，复选标记仍然出现在上一行中。
在 4.13 复选标记消失之前。
如何解决这个问题？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript">
$.extend(true, $.jgrid.defaults, {
multiSort: true,
iconSet: "fontAwesome",
navOptions: {
position: "center"
},
toppager: true,
multiselect: true,
scrollrows: true,
loadui: 'block',
cmTemplate: { autoResizable: true },
autoencode: true,
autoEncodeOnEdit: true,
gridview: true
});
$(document).ready(function () {
'use strict';
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list")
;
$grid.jqGrid({
datatype: 'local',
data: mydata,
colModel: [
{
name: 'invdate', index: 'invdate', width: 80, align: 'center', editable: true
},
{ name: 'name', index: 'name', editable: true, width: 65, editrules: { required: true } },
{ name: 'amount', index: 'amount', width: 75, editable: true },
{ name: 'tax', index: 'tax', width: 52, editable: true },
{ name: 'total', index: 'total', width: 60, editable: true },
{
template: "booleanCheckbox",
name: 'closed',
editable: true,
editoptions: {
disabled: false
},
},
{
name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true, formatter: 'select',
edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'IN' },
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:IN' }
},
{ name: 'note', index: 'note', width: 60, sortable: false, editable: true, edittype: 'textarea' }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
height: '100%',
editurl: 'clientArray',
beforeSelectRow: function (rowid, e) {
var savedRow = $(this).jqGrid("getGridParam", "savedRow");
if (savedRow.length === 0 || savedRow[0] === undefined) {
$(this).jqGrid('editRow', rowid, true);
return true;
}
if (rowid !== savedRow[0].id) {
$grid.jqGrid('restoreRow', savedRow[0].id);
$(this).jqGrid('editRow', rowid, true);
}
return true;
}
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
抱歉，我不明白如果单元格是可编辑的，属性disabled: false 的使用目的。复选框的状态将在 before editRow 开始时更改，单元格的未格式化将 return 与原始源数据的值不同的值。结果，保存行 (p.savedRow) 中的数据将保存在 editRow 的开头，将保持 chanckbox 的 modified 状态，而不是原始状态。
formatter: "checkbox" 的选项 disabled: false 如果想要在 不启动任何编辑模式的情况下执行编辑 几乎没有意义。参见 the demo (created for the answer) or another one (created for the answer)。演示 修改 单击复选框时的本地数据，不使用任何编辑模式。
您应该只删除 属性，因为您想要使用内联编辑来编辑该行。你之前使用的代码好像是错误的，但可能是4.13.0版本的变化让bug可见。
在 4.13 之前的免费 jqGrid 中
editoptions: {
disabled: false
},
用于实现在线编辑中的单击复选框。 在 4.13 中，如果在没有保存的情况下单击新行，复选框状态将不再恢复。
要复制，运行 下面的代码并单击未选中的关闭列以将复选标记放入其中。 现在单击其他行。 在 4.13 中，复选标记仍然出现在上一行中。 在 4.13 复选标记消失之前。 如何解决这个问题？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript">
$.extend(true, $.jgrid.defaults, {
multiSort: true,
iconSet: "fontAwesome",
navOptions: {
position: "center"
},
toppager: true,
multiselect: true,
scrollrows: true,
loadui: 'block',
cmTemplate: { autoResizable: true },
autoencode: true,
autoEncodeOnEdit: true,
gridview: true
});
$(document).ready(function () {
'use strict';
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list")
;
$grid.jqGrid({
datatype: 'local',
data: mydata,
colModel: [
{
name: 'invdate', index: 'invdate', width: 80, align: 'center', editable: true
},
{ name: 'name', index: 'name', editable: true, width: 65, editrules: { required: true } },
{ name: 'amount', index: 'amount', width: 75, editable: true },
{ name: 'tax', index: 'tax', width: 52, editable: true },
{ name: 'total', index: 'total', width: 60, editable: true },
{
template: "booleanCheckbox",
name: 'closed',
editable: true,
editoptions: {
disabled: false
},
},
{
name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true, formatter: 'select',
edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'IN' },
stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:IN' }
},
{ name: 'note', index: 'note', width: 60, sortable: false, editable: true, edittype: 'textarea' }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
height: '100%',
editurl: 'clientArray',
beforeSelectRow: function (rowid, e) {
var savedRow = $(this).jqGrid("getGridParam", "savedRow");
if (savedRow.length === 0 || savedRow[0] === undefined) {
$(this).jqGrid('editRow', rowid, true);
return true;
}
if (rowid !== savedRow[0].id) {
$grid.jqGrid('restoreRow', savedRow[0].id);
$(this).jqGrid('editRow', rowid, true);
}
return true;
}
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
抱歉，我不明白如果单元格是可编辑的，属性disabled: false 的使用目的。复选框的状态将在 before editRow 开始时更改，单元格的未格式化将 return 与原始源数据的值不同的值。结果，保存行 (p.savedRow) 中的数据将保存在 editRow 的开头，将保持 chanckbox 的 modified 状态，而不是原始状态。
formatter: "checkbox" 的选项 disabled: false 如果想要在 不启动任何编辑模式的情况下执行编辑 几乎没有意义。参见 the demo (created for the answer) or another one (created for the answer)。演示 修改 单击复选框时的本地数据，不使用任何编辑模式。
您应该只删除 属性，因为您想要使用内联编辑来编辑该行。你之前使用的代码好像是错误的，但可能是4.13.0版本的变化让bug可见。