如何更新JQGrid中的行？

Question

I am using JQGrid for showing results from database. 我正在使用JQGrid显示数据库结果。 Now I need to update rows by user. 现在，我需要按用户更新行。 I have tried to use Inline Navigator. 我试图使用Inline Navigator。 I have used the following code for making the grid. 我使用以下代码制作网格。

$("#MyGrid").jqGrid({
        url: service,
        datatype: "json",
        mtype: 'GET',
        colNames: ['Col1', 'Col2'],
        colModel: [
  { name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: true, sorttype: "text" },
  { name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },

        pager: '#pagerLab',
        rowNum: 1000,
        rowList: [10, 30, 100, 1000],
        sortname: 'modified',
        viewrecords: true,
        gridview: true,
         loadonce: true,        
        editurl: '/Service.svc/UpdateGrid',
    });
      jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab", { edit: true, add: false, del: false, search:false });
    jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");

} }

Now I am not sure how to write the server side code to save user's changes in database. 现在，我不确定如何编写服务器端代码以将用户的更改保存到数据库中。 I am using AJAX enabled web service. 我正在使用启用AJAX的Web服务。

Here is my web service code for showing the grid: 这是我的Web服务代码，用于显示网格：

 [OperationContract]
        [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
        public JQGridViewTable MyGrid(string ID)
        {
            Reader reader = new Reader();

            return Reader.ReadDetails(ID);
        }

And my C# code in Reader class(in data model): 还有我的Reader类中的C＃代码（在数据模型中）：

 public JQGridViewTable ReadDetails(string ID)
    {        
           JQGridViewTable table = new JQGridViewTable();
    // read data from database and store in table   
        return table;
    }

I need help with: 我需要以下方面的帮助：

1- Do I need to use Post instead of Get? 1-我需要使用Post而不是Get吗？ Notice that I am displaying and editing the grid in one function. 注意，我在一个函数中显示和编辑网格。 2- Do I need to add anything else in Javascript? 2-我需要在Javascript中添加其他内容吗？ for example edit or restore functions? 例如编辑或还原功能？ In documentations they have edit and restore functions in inline editing but not in Inline navigation. 在文档中，它们具有内联编辑但不具有内联导航的编辑和还原功能。 3- In what format data is sent to web service for editing? 3-以什么格式将数据发送到Web服务进行编辑？ For displaying, it is in JQGridView format. 为了显示，它采用JQGridView格式。 4- I don't know how to implement UpdateGrid method in web service, because I don't know what exactly Inline Navigator functions are doing, what data it is sending to web service and what data it is expecting from server. 4-我不知道如何在Web服务中实现UpdateGrid方法，因为我不知道Inline Navigator函数到底在做什么，它向Web服务发送了什么数据以及期望从服务器获得什么数据。

I have searched the whole web, but everyone is using it in a different way. 我搜索了整个网络，但每个人都以不同的方式使用它。 I would appreciate any help. 我将不胜感激任何帮助。

Answer 1

Based on your example code, the jqGrid will do a post operation on 根据您的示例代码，jqGrid将在

editurl: '/Service.svc/UpdateGrid'

You will need to create a this method on your WCF service. 您将需要在WCF服务上创建此方法。 The jqGrid will invoke and HTTP Post and call this method, sending in the column values. jqGrid将调用和HTTP Post并调用此方法，以发送列值。

You will weed to add an operation, simalar to the following to your WCF service: 您将杂草为WCF服务添加类似于以下内容的操作：

    [OperationContract]
    [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json)]
    public void UpdateGrid(string col1, string col2)
    {
          //code to actually do the update to the database
    }

The WCF operation will be resposible for actually locating the right row in the database table (I am assuming you can do this based on either the value stored in col1 or col2) and perform the update operation. WCF操作将可用于在数据库表中实际定位右行（我假设您可以基于col1或col2中存储的值执行此操作）并执行更新操作。

The code snippets below are from my implementation using your sample as a starting point: 下面的代码段来自于我的实现，以您的示例为起点：

[default.html] [default.html]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.2.js"></script>
    <link href="Content/ui.jqgrid.css" rel="stylesheet" />
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript">
        var lastSel;

        $(document).ready(function() {

            var service = 'http://localhost:5127/Service.svc/GetData';

            $("#MyGrid").jqGrid({
                url: service,
                datatype: "json",
                height: 255,
                width: 600,
                colNames: ['Col1', 'Col2'],
                colModel: [
                              { name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: false, sorttype: "text" },
                              { name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },
                ],
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    cell: "",
                    repeatitems: false
                },
                rowNum: 1000,
                rowList: [10, 30, 100, 1000],
                pager: '#pagerLab',
                sortname: 'Col1',
                viewrecords: true,
                gridview: true,
                loadonce: true,       
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        $(this).restoreRow(lastSel);
                        lastSel = id;
                    }
                    jQuery(this).editRow(id, true);
                },
                editurl: 'http://localhost:5127/Service.svc/UpdateData',
                ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
                serializeRowData: function (data) {
                    return JSON.stringify(data);
                }

            });

            jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab",
                { edit: false, add: false, del: false, search: false }
                );
            jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");

        });
    </script>
</head>


<body>
    <table id="MyGrid"></table>
    <div id="pagerLab"></div>
</body>
</html>

[IService.cs] [IService.cs]

[ServiceContract]
public interface IService
{
    [OperationContract]
    [WebInvoke(Method="GET", BodyStyle=WebMessageBodyStyle.Bare, ResponseFormat=WebMessageFormat.Json)]
    jqGridModel<GridListItem> GetData();

    [OperationContract]
    [WebInvoke(Method="POST", BodyStyle=WebMessageBodyStyle.WrappedRequest,  RequestFormat=WebMessageFormat.Json)]
    void UpdateData(string id, string oper, string Col1, string Col2);

}

[DataContract]
public class GridListItem
{
    [DataMember]
    public string Col1 { get; set; }

    [DataMember]
    public string Col2 { get; set; }
}

[DataContract]
public class jqGridModel<T>
{
    public jqGridModel()
    {
        this.total = 0;
        this.rows = null;
        this.records = 0;
        this.page = 0;
    }

    [DataMember]
    public int total { get; set; }
    [DataMember]
    // this is the property where you store the actual data model
    public IList<T> rows { get; set; }
    [DataMember]
    public int page { get; set; }
    [DataMember]
    public int records { get; set; }
    }
}

[Service.svc.cs] [Service.svc.cs]

public class Service : IService
{

    jqGridModel<GridListItem> IService.GetData()
    {
        jqGridModel<GridListItem> model = new jqGridModel<GridListItem>();
        List<GridListItem> list = new List<GridListItem>();
        GridListItem item = new GridListItem() { Col1 = "1", Col2 = "Dog" };
        list.Add(item);

        item = new GridListItem() { Col1 = "2", Col2 = "Cat" };
        list.Add(item);

        model.records = list.Count;
        model.rows = list;
        return model;
    }

    void IService.UpdateData(string id, string oper, string Col1, string Col2)
    {
        //do work here to save the updated data
    }
}

如何更新JQGrid中的行？

问题描述

1 个解决方案

解决方案1
0 2013-03-25 17:09:09

如何更新JQGrid中的行？

问题描述

1 个解决方案

解决方案1 0 2013-03-25 17:09:09

解决方案1
0 2013-03-25 17:09:09