编辑：

Question

我在JQGrid上取得了一些成功，但我现在处于需要加载数据然后在客户端执行所有crud操作的情况下，就像听起来那么简单我完全陷入困境。我一直都是通过堆栈溢出和谷歌，似乎无法找到任何简单的客户端jqgrid操作的好例子（我可能是错的但我无法在官方的jqgrid文档中找到任何客户端的东西）。我试图利用这里的例子：

http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm

但是我仍然是ajax / javaxcript / jquery的新手，它有点压倒性的我无法让它与我的网格一起运行。我非常感谢任何教程的提示或链接。到目前为止，我的代码和我收集的关于这个过程的内容如下：

我有我的网格：

 editSettings = {
                jqModal: false,
                reloadAfterSubmit: false,
                closeOnEscape: true,
                savekey: [true, 13],
                closeAfterEdit: true,
                onclickSubmit: editSubmit,
                height: 200,
                width: 400
            },
             addSettings = {
                jqModal: false,
                reloadAfterSubmit: false,
                savekey: [true, 13],
                closeOnEscape: true,
                closeAfterAdd: true,
                onclickSubmit: addSubmit,
                height: 200,
                width: 400
            },
         $('#engineerGrid').jqGrid({
         datatype: 'json',
         colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
         colModel: [
         {name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
         editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
     },
         { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
             editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
         },
         { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' }
            ],
         rowNum: 10,
         rowList: [5, 10, 20],
         pager: '#pager',
         gridview: true,
         rownumbers: true,
         autoencode: true,
         ignoreCase: true,
         sortname: 'invdate',
         viewrecords: true,
         sortorder: 'desc',
         loadonce: true,
         caption: 'Project Engineers',
         editurl: 'clientArray',
         url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})'
     }).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings);
 });

我从服务器获取json信息，我认为因为我有loadonce：true设置它应该将数据类型从json切换到local。这是我开始感到困惑的地方。我是否需要手动编写所有crud函数并使用onclickSubmit链接到它们？如果是这样的话，是否有人愿意解释如何正确获取/设置数据？

addSubmit = function(){   
               //I think something needs to go here?   
                };

编辑：

以为我会重申那些看到这一点的人。由于我没有太多经验，这可能是低水平，但也许其他新手可以从外行的解释中受益。使用本地数据时，您无法使用表单编辑（删除除外）。但是，为了添加/编辑行，您可以使用inlineNav。我的工作是在下面，有一些挑剔的部分，但就本地数据添加/编辑/删除它是有效的。

     $(document).ready(function () {
     var myData = [],
            editOptions = {},
            addOptions = {},
            lastSel = -1,
            parameters = {
                edit: false,
                editicon: "ui-icon-pencil",
                add: true,
                addicon: "ui-icon-plus",
                save: true,
                saveicon: "ui-icon-disk",
                cancel: true,
                cancelicon: "ui-icon-cancel",
                addParams: { useFormatter: false },
                editParams: {}
            },
            myDelOptions = {
                onclickSubmit: function (options, rowid) {
                    var grid = $('#engineerGrid');
                    // delete the row
                    grid.delRowData(rowid);                     
                    grid.trigger("reloadGrid", [{ page: 0}]);
                    return true;
                },
                processing: true
            };

     $('#engineerGrid').jqGrid({
         datatype: 'json',
         url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")',
         colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
         colModel: [
         { name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
             editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
         },
         { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
             editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
         },
         { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number',
             formatoptions: { decimalPlaces: '0', defaultValue: '20'}
         }
            ],
         rowNum: 20,
         rowList: [5, 10, 20],
         pager: '#pager',
         gridview: true,
         rownumbers: true,
         autoencode: true,
         ignoreCase: true,
         sortname: 'invdate',
         viewrecords: true,
         sortorder: 'desc',
         loadonce: true,
         width: 750,
         caption: 'Project Engineers',
         editurl: 'clientArray',
         onSelectRow: function (id) {
         //if selected row changed restore values of previously selected row
             if (id && id !== lastSel) {
                 jQuery('#engineerGrid').restoreRow(lastSel);
                 lastSel = id;
             }
             jQuery('#engineerGrid').editRow(id, true);
         }
     }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions);
     jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters);
 });

无论如何，感谢Oleg的帮助！

Answer 1

来自The demo的

old answer包含非常长而硬的核心代码。它基于使用内部参数processing: true。我同意新手很难，但到目前为止jqGrid仍然不支持本地表单编辑。

delSettings代码的部分并不复杂。所以你可以使用它。对于行编辑和插入新行，您可以使用内联编辑。我个人觉得编辑模式最舒服，因为用户仍然可以看到原始位置上的所有数据。因此，您可以使用它而不是表单编辑。如果您需要使用的表不用于编辑，但是为了查看数据，我会在ondblClickRow回调的情况下使用它来开始编辑。如果您只需要网格进行编辑，则可以开始编辑行选择：onSelectRow。

如果您喜欢navigator toolbar，则可以仅将navGrid用于“删除”操作，将inlineNav用于“添加”和“编辑”操作。方法inlineNav仍然相对较新，可能仍然不完美，但可以很好地使用。

作为导航器工具栏的替代方法，您可以在带有“编辑”和“del”按钮的附加列中使用格式化程序：“actions”。您还可以根据自己的喜好组合以上所有方法。

在the official demo页面上，您可以找到所有方式的示例。

jqgrid中的客户端数据操作

编辑：

1 个答案: