带有可编辑的checkbox列的jqGrid
当使用jqGrid时，你如何强制一个单元格加载到页面加载的可编辑视图以及单击它时？
如果像下面那样设置“单元格编辑”，只有在单击单元格时才会出现checkbox。
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, cellEdit:true, 同时点击checkbox，有没有办法发送一个AJAX的post到服务器上，而不必依靠用户按回车？
要使checkbox始终可点击，请使用checkbox格式化程序的disabled属性：
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, formatter: "checkbox", formatoptions: {disabled : false} , ...
要回答你的第二个问题，你将不得不为这个checkbox设置一个事件处理程序，这样当你点击一个函数时，就会调用一个函数，例如发送一个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... }); });
这是一个旧的，但有很多的意见，所以我决定在这里添加我的解决scheme。
我正在使用JQuery的.delegate函数来创build一个后期绑定实现，它将使您免于使用loadComplete事件。
只需添加以下内容：
$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });
这会将该处理程序延迟绑定到网格行上的每个checkbox。 如果您有多个checkbox列，您可能会遇到问题。
我有同样的问题，我想我发现了一个很好的解决scheme，立即处理checkbox点击。 主要的想法是当用户点击不可编辑的checkbox时触发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'); } },
然后，每当用户点击时，您的checkbox将发送编辑请求。
我有一个提交function，将所有网格行发送到Web服务器。
我使用这个代码解决了这个问题：
var checkboxFix = []; $("#jqTable td[aria-describedby='columnId'] input").each(function () { checkboxFix.push($(this).attr('checked')); });
然后我混合从下面的代码得到的值。
$("#jqTable").jqGrid('getGridParam', 'data');
我希望它可以帮助别人。
我已经在下面的链接中分享了一个完整的代码，你可以看看你是否需要它。
更好的scheme：
<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}, ...
