jqGrid с редактируемым флажком

Question

Когда вы используете jqGrid, как вы заставляете ячейку загружаться в редактируемом виде при загрузке страницы, а также при нажатии на нее?

Если вы настроили «редактирование ячейки», как показано ниже, флажок появляется только при нажатии на ячейку.

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

cellEdit:true,

Также при установке флажка существует ли способ мгновенной отправки сообщения AJAX на сервер, вместо того чтобы полагаться на пользователя, нажимающего клавишу ввода?

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

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

Я использую функцию .delegate в JQuery для создания реализации позднего связывания, которая освободит вас от обязательства использовать событие 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