帶有可編輯復選框列的jqGrid

Question

當使用jqGrid時，如何在頁面加載以及單擊時強制單元格在其可編輯視圖中加載？

如果您設置如下所示的“單元格編輯”，則僅在單擊單元格時才會顯示復選框。

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },

cellEdit:true,

另外在點擊復選框時，有沒有辦法立即向服務器發送AJAX帖子而不必依賴用戶按Enter鍵？

Answer 1

要允許復選框始終可單擊，請使用復選框格式化程序的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...
        });
    });

Answer 2

這是一個舊的，但有很多視圖所以我決定在這里添加我的解決方案。

我正在利用JQuery的.delegate函數創建一個后期綁定實現，使您免於使用loadComplete事件的義務。

只需添加以下內容：

$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });

這會將該處理程序延遲綁定到網格行上的每個復選框。 如果您有多個復選框列，則可能在此處出現問題。

Answer 3

我遇到了同樣的問題，我想我找到了一個很好的解決方案來立即處理復選框。 主要思想是在用戶單擊不可編輯的復選框時觸發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');
                }   
            }, 

然后，每次用戶點擊時，您的復選框都會發送編輯請求。

Answer 4

我有一個提交函數，它將所有網格行發送到網絡服務器。

我使用此代碼解決了這個問題：

var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
        checkboxFix.push($(this).attr('checked'));
});

然后我混合了從下面的代碼中獲得的值。

$("#jqTable").jqGrid('getGridParam', 'data');

我希望它對某人有幫助。

Answer 5

更好的方案：

<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}, 
...

Answer 6

我在下面的鏈接中分享了完整的代碼，您可以查看是否需要它。

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968