使用 jqGrid 时，如何在页面加载以及单击时强制单元格在其可编辑视图中加载？
如果您像下面这样设置“单元格编辑”，则该复选框仅在您单击单元格时出现。
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
同样在单击复选框时，是否有一种方法可以立即将 AJAX 帖子发送到服务器，而不必依赖用户按 Enter 键？
要允许复选框始终可点击，请使用复选框格式化程序的disabled属性：
{ name: 'MyCol', index: 'MyCol',
editable:true, edittype:'checkbox', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
要回答您的第二个问题，您必须为复选框设置一个事件处理程序，以便在单击一个函数时调用一个函数，例如，向服务器发送一个 AJAX POST。这是一些示例代码，可帮助您入门。您可以将其添加到loadComplete事件中：
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});
这是一个旧的，但有很多观点，所以我决定也在这里添加我的解决方案。
我正在使用 JQuery 的 .delegate 函数来创建一个后期绑定实现，这将使您摆脱使用 loadComplete 事件的义务。
只需添加以下内容：
$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });
这将晚将该处理程序绑定到网格行上的每个复选框。如果您有多个复选框列，您可能会遇到问题。
我遇到了同样的问题，我想我找到了一个很好的解决方案来立即处理复选框单击。主要思想是当用户点击不可编辑复选框时触发 editCell 方法。这是代码：
jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
//I use edit-cell class to differ editable and non-editable checkbox
if(!$(this).parent('td').hasClass('edit-cell')){
//remove "checked" from non-editable checkbox
$(this).attr('checked',!($(this).attr('checked')));
jQuery("#grid").editCell(iRow,iCol,true);
}
});
除此之外，您应该为您的网格定义事件：
afterEditCell: function(rowid, cellname, value, iRow, iCol){
//I use cellname, but possibly you need to apply it for each checkbox
if(cellname == 'locked'){
//add "checked" to editable checkbox
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
//trigger request
jQuery("#grid").saveCell(iRow,iCol);
}
},
afterSaveCell: function(rowid, cellname, value, iRow, iCol){
if(cellname == 'locked'){
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
}
},
然后，您的复选框将在每次用户单击它时发送编辑请求。
我有一个提交功能，将所有网格行发送到网络服务器。
我使用以下代码解决了这个问题：
var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
checkboxFix.push($(this).attr('checked'));
});
然后我混合了从下面的代码中获得的值。
$("#jqTable").jqGrid('getGridParam', 'data');
我希望它可以帮助某人。
我在下面的链接中分享了完整的代码，如果需要，可以查看。
更好的解决方案：
<script type="text/javascript">
var boxUnformat = function ( cellvalue, options, cell ) { return '-1'; },
checkboxTemplate = {width:40, editable:true,
edittype: "checkbox", align: "center", unformat: boxUnformat,
formatter: "checkbox", editoptions: {"value": "Yes:No"},
formatoptions: { disabled: false }};
jQuery(document).ready(function($) {
$(document).on('change', 'input[type="checkbox"]', function(e){
var td = $(this).parent(), tr = $(td).parent(),
checked = $(this).attr('checked'),
ids = td.attr('aria-describedby').split('_'),
grid = $('#'+ids[0]),
iRow = grid.getInd(tr.attr('id'));
iCol = tr.find('td').index(td);
grid.editCell(iRow,iCol,true);
$('input[type="checkbox"]',td).attr('checked',!checked);
grid.saveCell(iRow,iCol);
});
});
</script>
在您的 colModel 中：
...
{name:'allowAccess', template: checkboxTemplate},
...