0

データベースからの結果を表示するために 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 サービスを使用しています。

グリッドを表示するための Web サービス コードは次のとおりです。

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

            return Reader.ReadDetails(ID);
        }

そして、リーダークラス（データモデル内）の私のC＃コード：

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

次のことについて助けが必要です:

1- Get の代わりに Post を使用する必要がありますか? 1 つの関数でグリッドの表示と編集を行っていることに注意してください。2- Javascript に他に何か追加する必要はありますか? たとえば、編集機能や復元機能はありますか? ドキュメントでは、インライン編集では編集および復元機能がありますが、インラインナビゲーションでは機能しません。3- 編集のために Web サービスに送信されるデータの形式は? 表示する場合は、JQGridView 形式です。4- Web サービスに UpdateGrid メソッドを実装する方法がわかりません。インライン ナビゲーターの機能が正確に何をしているのか、Web サービスに送信しているデータ、サーバーから期待しているデータがわからないためです。

私はウェブ全体を検索しましたが、誰もがそれを別の方法で使用しています. 助けていただければ幸いです。

4

1 に答える 1

0

サンプルコードに基づいて、jqGrid はポスト操作を実行します

editurl: '/Service.svc/UpdateGrid'

WCF サービスで this メソッドを作成する必要があります。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; }
    }
}

[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
    }
}
于 2013-03-25T17:09:09.603 に答える