jqgrid：客户端的内联复选框编辑

Question

我正在使用 jqgrid。我想让人们在内联编辑中使用复选框。不会有任何编辑等按钮，只要他点击复选框，它应该被认为是在客户端提交。

有一个复选框我想一直保持在编辑模式。用户完成更改后，他将单击提交按钮，完整的网格数据将发布到服务器。

我希望 getGridParam 方法应该给我更新的单元格值。然而它并没有这样做。

我觉得我的问题是 onSelectRow 方法。在某处我缺少保存当前行状态的实现。＆因此在 getGridParam 方法中。我得到了原始值。

代码：

var lastsel;

 jQuery("#AcOpenDataGrid").jqGrid({
                    url: '/Admin/Role/GetMappedMenus',
                    viewrecords: true, sortname: 'Code', sortorder: "desc",
                    colNames: [
                    "Code",
                    "MenuName",
                    "Allow"
                    ],
                    colModel: [
                     { name: 'Code', width: 10, key: true, align: 'center', hidden: true },
                     { name: 'MenuName', index: 'MenuName', width: 60, search: true, searchoptions: JQ_sopt_string, align: 'left' },
                     { name: 'Allow', index: 'Allow', width: 30, editable: true,edittype:'checkbox',editoptions: { value:"True:False" },formatter:'checkbox', formatoptions: {disabled : false}  ,search: true, searchoptions: JQ_sopt_string, align: 'center' },
                    ],
                    height: '500',
                    autowidth: true,
                    rowList: JQ_Paging_Opt,
                    rowNum: JQ_RowNum_Opt,
                    pager: pager_selector,
                    datatype: 'json', mtype: 'GET',
                    cmTemplate: { title: false },
                    loadonce:true,
                    altRows: true,
                    jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "userdata", id: "Code" },
                    editurl: 'clientArray',
                    onSelectRow: function (id) {
                        if (id && id !== lastsel) {
                            jQuery(grid_selector).jqGrid('restoreRow', lastsel);
                            //jQuery(grid_selector).jqGrid('saveRow', lastsel);
                            jQuery(grid_selector).jqGrid('editRow', id, true);
                            lastsel = id;
                        }
                    },

                }).navGrid(pager_selector, { view: false, del: false, add: false, edit: false, search: false, refresh: true }
                 ).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
            });


  $(".submit").click(function () {
                var localGridData = $("#AcOpenDataGrid").jqGrid('getGridParam', 'data');
                //To Do : Post Ajax here. 
         });

Answer 1

我在这里找到了解决办法。不完全符合我的预期，但它确实符合我的目的。

Make a column be a checkbox

 beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },

jqgrid：客户端的内联复选框编辑

jqgrid : Inline checkbox editing in Client Side

javascript

jquery

jqgrid