Question

我正在使用JQGrid显示数据库的结果。现在我需要按用户更新行。我试过使用Inline Navigator。我使用以下代码制作网格。

$("#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");

}

现在我不确定如何编写服务器端代码以保存用户在数据库中的更改。我正在使用支持AJAX的Web服务。

以下是我显示网格的网络服务代码：

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

            return Reader.ReadDetails(ID);
        }

我在Reader类中的C＃代码（在数据模型中）：

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

我需要帮助：

1-我需要使用Post而不是Get吗？请注意，我在一个函数中显示和编辑网格。 2-我需要在Javascript中添加其他内容吗？例如编辑或恢复功能？在文档中，他们可以在内联编辑中编辑和恢复功能，但不能在内联导航中编辑和恢复。 3-数据以什么格式发送到Web服务进行编辑？对于显示，它采用JQGridView格式。 4-我不知道如何在Web服务中实现UpdateGrid方法，因为我不知道Inline Navigator函数到底在做什么，它向Web服务发送了什么数据以及它从服务器期望的数据。

我搜索了整个网络，但每个人都以不同的方式使用它。我将不胜感激任何帮助。

Answer 1

根据您的示例代码，jqGrid将在

上执行后期操作

editurl: '/Service.svc/UpdateGrid'

您需要在WCF服务上创建此方法。 jqGrid将调用HTTP Post并调用此方法，发送列值。

您需要将以下操作添加到您的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
    }

WCF操作将在数据库表中实际定位右行（我假设您可以根据col1或col2中存储的值执行此操作）并执行更新操作。

下面的代码片段来自我的实现，使用您的示例作为起点：

<强> [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]

[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]

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 个答案: