當使用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