繁体   English   中英

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

[英]jqgrid : Inline checkbox editing in Client Side

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

我在这里找到了解决方案。 不完全符合我的预期,但确实符合我的目的。

使列成为复选框

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM