使用 jqGrid 'editGridRow' 创建新行而不是自动生成的行 ID jqg1 时如何提供行 ID [英] How to supply a Row ID when using jqGrid 'editGridRow' to create a new row and not the auto generated Row ID jqg1

问题描述

我是 jqGrid 的新手，所以希望有人能指出我正确的方向.

I'm new to jqGrid, so hopefully someone can point me in the right direction.

基本上，我使用 jgGrid 来显示我从文件中读取的日期和成本列表，我希望用户能够修改或添加新条目或删除现有条目.在用户单击屏幕上的应用"按钮回发表单后，我读出 jqGrid 并以 JSON 字符串的形式回发到服务器.

Basically, I am using jgGrid to display a list of dates and costs that I have read in from a file that I want the user to be able to amend or add new entries or delete existing entries. Upon the user clicking an onscreen button "Apply" to post back the form , I read out the jqGrid and post back to Server in the form of a JSON string.

我的问题是，当我添加新行(通过editGridRow")时，jqGrid 正在使用它自动生成的 jqg1、jg2、jg3 等，并且新行被填充在网格顶部而不是它们的行 ID 位置即在网格的底部.

My problem is that when I add new rows (via 'editGridRow'), jqGrid is using it's autogenerated jqg1, jg2, jg3, etc and the new rows are being populated at the top of grid instead of at their row id position i.e at the bottom of grid.

我可以根据需要生成 RowID，但是在创建新条目时我似乎无法将它们提供给editGridRow"，相反，我似乎必须使用关键字new".

I am able to generate RowID's as necessary, however I do not seem to be able to supply them to 'editGridRow' when creating new entries, instead it appears I have to use the keyword "new".

如您所知，我使用 editGridRow 而不是 addRowData 的原因是 editGridRow 创建了一个模式对话框供用户输入数据.

As you are aware the reason I am using editGridRow instead of addRowData is that editGridRow creates a modal dialog for the user to enter the data.

任何帮助将不胜感激.

<代码>这就是我想用来提供行 ID 的内容:$("#tableGrid").jqGrid('editGridRow', gridRowID, {reloadAfterSubmit:false});

This is what I would like to use to supply a row ID: $("#tableGrid").jqGrid('editGridRow', gridRowID, {reloadAfterSubmit:false});

这是我必须用来让代码工作的东西:$("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});

This is what I have to use to get the code to work: $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});

这是我在 JSP 中用于创建 gqGrid 的代码片段:

Here is the code snippet I use for creating the gqGrid in my JSP:

<代码>var gridRowID = ${costHistoryEntries}.length

var gridRowID = ${costHistoryEntries}.length

    $("document").ready(function() {

            $("#tableGrid").jqGrid({
                data: ${costHistoryEntries},
                datatype: "local", 
                height: 200, 
                colNames:['Date', 'Cost'],
                colModel:[ 
                        {name:'chdate', index:'chdate', width:110, sorttype:"date", editable:true, editrules:{date:true, required:true, custom:true, custom_func:checkDate}, datefmt:'d/m/Y'}, 
                        {name:'cost', index:'cost', width:160, align:"right", sorttype:"float", editable:true, editrules:{number:true, required:true}, formatter:'float'},
                ],
                autowidth: true,
                loadonce: true,
                sortname: 'chdate',
                sortorder: "desc", 
                rowList:[10, 20, 30],
                pager: jQuery('#tablePager'),
                viewrecords: true,
                editurl: '/myurl',
                caption: "Cost History Entries" }

            ); 

            $("#tableGrid").jqGrid('navGrid', "#tablePager", {edit:true, add:true, del:true, search:true, refresh:true});

            $("#addEntry").click(function() {
                gridRowID++;
                $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});
            });
    });

我还创建了一个按钮并将其链接到addEntry"，作为使用 jqGrid 导航器添加/编辑/删除/查找/重新加载"栏添加新行的替代方法.如您所见，在使用数据加载网格之前，我将条目数存储在 gridRowID 中.我希望能够在#addEntry"点击函数中做的是使用更新的 gridRowID 作为 RowID 参数.

I also created a button and linked it to "addEntry" as an alternative way to adding a new row using the jqGrid Navigator "add/edit/delete/find/reload" bar. As you can see previous to loading the grid with data I stored the number of entries in gridRowID. What I was hoping to be able to do in the "#addEntry" click function was use the updated gridRowID as a RowID parameter.

仅供参考:在以前版本的代码中，我使用以下代码将数据加载到网格中:

As a FYI: In a previous version of the code I was using the following to load the data into the grid:

            var griddata = ${costHistoryEntries};
            for (var i=0; i <= griddata.length; i++) {
                $("#tableGrid").jqGrid('addRowData', i+1, griddata[i], "last");
            }

但发现我可以用

data: ${costHistoryEntries},

两个版本都为从服务器提供的样本数据正确创建了行 ID:[{"chdate":"20/05/2011","cost":"0.111"},{"chdate":"01/06/2011","cost":"0.222"},{"chdate":"07/07/2011","成本":"0.333"}]

Both versions correctly create row ID's for the supplied sample data from the server: [{"chdate":"20/05/2011","cost":"0.111"},{"chdate":"01/06/2011","cost":"0.222"},{"chdate":"07/07/2011","cost":"0.333"}]

我的问题是添加新的数据行.

My problem is adding new rows of data.

进一步更新，在服务器端，作为测试，我截获了/myurl 的帖子并将 id 从_empty"更新为7"，但 jqGrid 中的新条目仍然具有自动生成的 jqGrid Row IDjqg1":

Further update, On the server side, as a test I intercepted the post to /myurl and updated the id from "_empty" to "7" but the new entry in jqGrid still has an autogenerated jqGrid Row ID "jqg1":

Key = chdate, Value = 26/09/2011
Key = oper, Value = add
Key = cost, Value = 14
Key = id, Value = _empty

Updated Key = chdate, Value = 26/09/2011
Updated Key = oper, Value = add
Updated Key = cost, Value = 14
Updated Key = id, Value = 7

推荐答案

我不太明白你的要求.您从服务器获取 jqGrid 的输入，但使用 datatype: "local" 而不是 datatype: "json" 例如指示 jqGrid 在需要时向服务器获取 ajax 请求以获取数据.此外，您想在服务器上保存日期，但使用 editurl: '/dummyurl' 而不是 real 服务器 url.editurl 将从 $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false}); 获取输入数据并且应该回发新生成行的 id.这不是你想要的吗?

I am not quite understand your requirement. You get the input for the jqGrid from the server, but use datatype: "local" instead of the datatype: "json" for example which instruct jqGrid to get ajax request to the server to get the data whenever as needed. Moreover you want to save the date on the server, but use editurl: '/dummyurl' instead of the real server url. The editurl would get the input data from the $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false}); and should post back the id of the new generated row. Is it not what you want?

所以我的建议是使用一些基于服务器的 datatype(韧皮是 datatype: "json")并以同样的方式使用真正的 editurl 将数据保存在服务器上(主要在数据库中)，并将新生成的数据项的 id 放在服务器响应中.

So my suggestion would be to use some server based datatype (the bast is datatype: "json") and in the same way use real editurl which save the data on the server (in the database mostly) and place in the server response the id on the new generated data item.

更新:如果您使用editGridRow 的reloadAfterSubmit: false 选项，您必须使用afterSubmit 事件处理程序与 reloadAfterSubmit 一起解码服务器响应并以 格式返回结果[true,'',new_id] 例如，如果您的服务器只是返回新的 rowid 作为您可以使用的数据

UPDATED: If you use reloadAfterSubmit: false option of the editGridRow you have to use afterSubmit event handler together with reloadAfterSubmit which decode the server response and return the result in the format [true,'',new_id] For example if your server just return new rowid as the data you can use

$("#tableGrid").jqGrid('editGridRow', "new",
    {
        reloadAfterSubmit: false,
        afterSubmit: function (response) {
            return [true, '', response.responseText];
        }
    }
);

这篇关于使用 jqGrid 'editGridRow' 创建新行而不是自动生成的行 ID jqg1 时如何提供行 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！