当使用jqGrid时，如何强制一个单元格在页面加载时以及点击时加载到其可编辑视图中？带有可编辑复选框列的jqGrid
如果您像下图一样设置“单元格编辑”，则仅在单击单元格时显示复选框。
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
同样在点击复选框，是否有发送AJAX后到服务器瞬间，而不必依赖于用户输入压的一种方式？
要允许复选框始终点击可以使用复选框格式化的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},
...
@Justin伟大的答案！谢谢，如果这是我的问题，我会给你打勾。 – Dan 2010-05-06 15:02:37
太棒了！我希望我可以将其标记为选定的答案！ – Nigel 2010-05-06 15:03:16
不客气！这是一个耻辱这个问题是如此古老，但希望答案仍然可以帮助:) – 2010-05-06 15:21:33