如何在免费的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单元格是否可编辑的目标。复选框的状态将在editRow启动之前更改，单元格的取消格式化将返回与原始源数据不同的值。结果，保存在editRow开头的已保存行（p.savedRow）中的数据将保持chanckbox的修改状态而不是原始状态。
如果想要在不启动任何编辑模式的情况下实现编辑，则formatter: "checkbox"的选项disabled: false很少有意义。查看演示（为答案创建）或另一个演示（为答案创建）。演示在单击复选框时修改本地数据，不使用任何编辑模式。
您应该删除该属性，因为您希望使用内联编辑来编辑行。您之前使用的代码似乎是错误的，但可能 4.13.0 版中的更改使错误可见。
相关文章：
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 单击F5时如何停止页面加载
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 类型错误:'单击'对未实现接口HTMLElement的对象调用
- 取消按钮自动回发 - 客户端单击实现的细节
- 如何实现气泡只有在完全缩放的 d3js 下才能单击
- 如何使用jquery在按钮单击上实现全屏编辑器
- 如何在免费的jqGrid 4.13.0中实现单击复选框
- 如何在动态生成的元素上实现手动单击事件
- 如何在 js 和 css3 中使用鼠标光标单击实现滚动图像
- 如何在 jQuery 中的互斥复选框上实现单击事件
- 实现Windows8Tile”;单击“;css3的动画
- 使用jQuery在不使用ID和Name的情况下实现跨度的单击事件
- 如何在单击时实现在数组中添加项
- 我试图在引导下拉菜单上实现单击事件
- 如何实现单击图片时显示详细信息的下拉子页面
- 在实现指针锁定后禁用a帧光标单击
- 在单击而不是悬停时实现翻转卡
