jqgrid : 客户端的内联复选框编辑答案

【问题标题】：jqgrid : Inline checkbox editing in Client Sidejqgrid : 客户端的内联复选框编辑
【发布时间】：2018-02-05 10:59:24
【问题描述】：

我正在使用 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. 
         });

【问题讨论】：

使用哪个版本的 jqGrid - Guriddo jqGrid、free-jqGrid 或 jqGrid 版本
@TonyTomov 4.8.2

标签： javascript jquery jqgrid

【解决方案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
    },

【讨论】：