在列模型在jqgrid中动态绑定时,将格式选项和事件附加到列模型

时间:2013-12-10 08:33:35

标签: c# asp.net-mvc jqgrid inline-editing

在MvcJQGrid中,我必须动态绑定列才能正常工作,但我必须使用每行的编辑按钮进行内联编辑。 当我在客户端传递列模型时......

colModel:[
                { index: 'Id', name: 'Id', align: 'center', 'hidden': true, editable: false },
                { index: 'Name', name: 'Name', align: 'center', editable: true },
                { index: 'Value', name: 'Value', align: 'center', editable: true },
                {
                    name: 'Id', index: 'Id', width: 55, align: 'center', sortable: false, formatter: 'actions',
                    formatoptions: {
                        keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                        onEdit: function (rowid) {
                            alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
                        },
                        onSuccess: function (jqXHR) {
                            var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
                            alert("in onSuccess used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\n\nWe can verify the server response and return false in case of" +
                                  " error response. return true confirm that the response is successful");
                            return true;
                        },
                        onError: function (rowid, jqXHR, textStatus) {
                            alert("in onError used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\nstatus=" + jqXHR.status +
                                  "\nstatusText" + jqXHR.statusText +
                                  "\n\nWe don't need return anything");
                        },
                        afterSave: function (rowid) {
                            debugger;
                            var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
                            alert("in afterSave (Submit): rowid=" + rowid + d);
                        },
                        afterRestore: function (rowid) {
                            alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
                        },
                        delOptions: {
                            onclickSubmit: function (rp_ge, rowid) {
                                debugger;
                                var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
                                var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
                                debugger;

                                alert("The row with rowid=" + rowid + " will be deleted Guid: " + (rowid.Id));

                                rp_ge.processing = true;

                                $("#dataList").delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();

                                if (grid[0].p.lastpage > 1) {
                                    // reload grid to make the row from the next page visable.
                                    // TODO: deleting the last row from the last page which number is higher as 1
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }
                                return true;
                            },
                            processing: true // !!! the most important step for the "local" editing
                            //     skip ajax request to the server
                        }
                    }
                }
            ],

然后它正在运行,但是列将在运行时绑定,并且列模型的最后一个elemet将在客户端提供

从服务器获取列模型我正在

[Object { Index="Id", Name="Id", Align="center"}, Object { Index="Name", Name="Name", Align="center"}, Object { Index="Value", Name="Value", Align="center"}]

在这种情况下如何绑定列模型,以便在获得上面的列模型后,我可以附加

{
                    name: 'Id', index: 'Id', width: 55, align: 'center', sortable: false, formatter: 'actions',
                    formatoptions: {
                        keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                        onEdit: function (rowid) {
                            alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
                        },
                        onSuccess: function (jqXHR) {
                            var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
                            alert("in onSuccess used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\n\nWe can verify the server response and return false in case of" +
                                  " error response. return true confirm that the response is successful");
                            return true;
                        },
                        onError: function (rowid, jqXHR, textStatus) {
                            alert("in onError used only for remote editing:" +
                                  "\nresponseText=" + jqXHR.responseText +
                                  "\nstatus=" + jqXHR.status +
                                  "\nstatusText" + jqXHR.statusText +
                                  "\n\nWe don't need return anything");
                        },
                        afterSave: function (rowid) {
                            debugger;
                            var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
                            alert("in afterSave (Submit): rowid=" + rowid + d);
                        },
                        afterRestore: function (rowid) {
                            alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
                        },
                        delOptions: {
                            onclickSubmit: function (rp_ge, rowid) {
                                debugger;
                                var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
                                var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
                                debugger;

                                alert("The row with rowid=" + rowid + " will be deleted Guid: " + (rowid.Id));

                                rp_ge.processing = true;

                                $("#dataList").delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();

                                if (grid[0].p.lastpage > 1) {
                                    // reload grid to make the row from the next page visable.
                                    // TODO: deleting the last row from the last page which number is higher as 1
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }
                                return true;
                            },
                            processing: true // !!! the most important step for the "local" editing
                            //     skip ajax request to the server
                        }
                    }
                }

0 个答案:

没有答案