0

我正在使用 JQGrid 来显示来自数据库的结果。现在我需要按用户更新行。我曾尝试使用内联导航器。我使用以下代码制作网格。

$("#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 服务。

这是我用于显示网格的 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 服务发送什么数据以及它期望从服务器获得什么数据。

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

4

1 回答 1

0

根据您的示例代码，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 中的值执行此操作）并执行更新操作。

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

[默认.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; }
    }
}

[服务.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
    }
}
于 2013-03-25T17:09:09.603 回答