JqGrid с редактируемым столбцом флажка

Ответ 1

Чтобы флажки всегда были доступны для кликов, используйте свойство boxter 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...
        });
    });

Ответ 2

Это старый, но у меня много просмотров, поэтому я решил добавить свое решение и здесь.

Я использую функцию .delegate JQuery для создания последней реализации привязки, которая освободит вас от обязанности использования события loadComplete.

Просто добавьте следующее:

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

Это будет связано с привязкой этого обработчика к каждому флажку, который находится в строках сетки. У вас может быть проблема, если у вас более одного столбца флажка.

Ответ 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');
                }   
            }, 

Затем ваш флажок будет отправлять запросы редактирования каждый раз, когда пользователь нажимает на него.

Ответ 4

У меня есть одна функция отправки, которая отправляет все строки сетки на веб-сервер.

Я решил эту проблему, используя этот код:

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

Затем я смешался со значениями, полученными из кода ниже.

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

Я надеюсь, что это поможет кому-то.

Ответ 5

Я поделился полным кодом по ссылке ниже, вы можете посмотреть, если вам это нужно.

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

Ответ 6

Лучшее решение:

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