jqgrid添加行并将数据发送到webservice以进行插入

Posted

技术标签:

【中文标题】jqgrid添加行并将数据发送到webservice以进行插入【英文标题】:jqgrid add row and send data to webservice for insert 【发布时间】:2011-04-24 10:40:28 【问题描述】:

我已经能够使用 jQuery/Ajax 从我的数据库中将数据从 web 服务中提取到 jQGrid 中。现在我想将添加/编辑的数据发送回网络服务。我已经看到了一些使用 php 和 editurl: 命令的示例。这也适用于 Web 服务(就像我最初提取数据的方式一样)?

我已经多次查看示例。我什至发现another question 与我所要求的类似,但是,我找不到任何关于如何做我需要做的事的真实例子。有吗?

:更新:

jQuery(document).ready(function () 
    jQuery("#list").jqGrid(
        datatype: proces-s-request,
        mtype: 'POST',
        jsonReader: 
            root: "ListExercise", //arry containing actual data  
            page: "Page", //current page  
            total: "Total", //total pages for the query  
            records: "Records", //total number of records  
            repeatitems: false,
            id: "ID" //index of the column with the PK in it   
        ,
        colNames: ['Id', 'Exercise'],
        colModel: [
       name: 'exercise_id', index: 'exercise_id',editable:false ,
       name: 'exercise_value', index: 'exercise_value',editable:true 
      ],
        caption: 'MyFitnessApplication',
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortorder: "desc",
        viewrecords: true,
        height: '250px',
        loadonce: true,
        editurl: "../webService/exercise_ws.asmx/insertRecord"      
    ).navGrid('#pager',  edit: true, add: true, del: false );
);

如您所见,我添加了 editurl 标签。这似乎调用了我的网络服务。现在我错过了如何将实际参数传递给 web 服务。我遗漏了一些东西,不胜感激!

【问题讨论】:

【参考方案1】:

首先您可以更改一些用于添加/编辑的默认选项:

jQuery.extend(jQuery.jgrid.edit, 
    ajaxEditOptions:  contentType: "application/json" ,
    recreateForm: true,
    serializeEditData: function (postData) 
        if (postData.exercise_value === undefined)  postData.exercise_value = null; 
        return JSON.stringify(postData);
    
);

(其中JSON.stringify 是http://www.json.org/js.html 中定义的函数)。然后,将发送到服务器的数据将被 JSON 编码。几乎相同的设置可用于删除

jQuery.extend(jQuery.jgrid.del, 
    ajaxDelOptions:  contentType: "application/json" ,
    serializeDelData: function (postData) 
        if (postData.exercise_value === undefined)  postData.exercise_value = null; 
        return JSON.stringify(postData);
    
);

现在你可以像下面这样定义insertRecord

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public int ModifyData (string exercise_value, string oper, string id)

    if (String.Compare (id, "_empty", StringComparison.Ordinal) == 0 ||
        String.Compare (oper, "add", StringComparison.Ordinal) == 0) 

        // TODO: add new item with the exercise_value and return new id
        //       as the method result
    
    else if (String.Compare (oper, "edit", StringComparison.Ordinal) == 0) 
        // TODO: modify the data identified by the id
    
    else if (String.Compare (oper, "del", StringComparison.Ordinal) == 0) 
        // TODO: delete the data identified by the id
    

你没有写哪个类型有exercise_id:整数或字符串。如果您使用字符串 id,上面的代码应该稍作改动。

【讨论】:

您的编辑使这更容易阅读:) 谢谢。我能够按照您所说的进行操作并使其正常工作。谢谢!

以上是关于jqgrid添加行并将数据发送到webservice以进行插入的主要内容,如果未能解决你的问题,请参考以下文章

jqgrid,如何在删除行之前POST字段

如何从 jqgrid 发送 CSRF 令牌

添加将重定向到 JQGrid 中当前行的查看页面的按钮

jqgrid 怎么获取返回的数据

jqGrid 添加 合计行 footDate

如何在不重新加载网格的情况下将行添加到下一页中的 jqGrid?