3

MVCとWebApiを使用してアプリケーションを構築しています。ビューでは、JqGridを使用しています。以前は、正常に機能していたJqGridにローカルデータを割り当てていました。ロジックの変更により、WebApiを使用してサーバーからデータを取得しています。これはJsonデータであり、変数に格納してから、このデータオブジェクトをJqGridに割り当てますが、データは表示されません。データオプションの代わりにWebAPIの「url」を指定するとすべてが正常に機能しますが、「データ」オプションを使用するとすぐにjqgridが機能しなくなります。考えられる理由は何ですか。これを行う理由は、データをローカルで追加、編集、更新し、最後の保存ボタンを押すと、データがサーバーに戻るためです。

 $().ready(function () {        
    //{"total":1,"page":1,"records":3,"rows":[{"id":"1","cell":["1","Tomato        
    //Soup","db@db.com","db@db.com","Groceries"]},{"id":"2","cell":["2","Yo-
    //yo","db@db.com","db@db.com","Toys"]},{"id":"3","cell":
    //["3","Hammer","db@db.com","db@db.com","Hardware"]}]}
    //   

    $.getJSON("api/userwebapi/",
         function (data) {
             //userDataFromApi = jQuery.parseJSON(data);
             userDataFromApi =data;
             //alert(userDataFromApi[0].ID);
             ConfigureUserGrid(userDataFromApi);
         });


});

function ConfigureUserGrid(userDataFromApi) {

    var grdUsers = $("#grdUsers");
    var lastsel = 0;
    $("#grdUsers").jqGrid({            
        datatype: "json"
        , data: userDataFromApi
        //, url: "api/userwebapi"
        ,colNames: ['ID', 'Name', 'User Role', 'Email', 'Address']
        ,colModel: [
            { name: 'ID', index: 'ID', width: 80, hidden: true }
        , { name: 'Name', index: 'Name', width: 150 }
        , { name: 'UserRole', index: 'UserRole', width: 150 }
        , { name: 'Email', index: 'Email', width: 200, sortable: true }
        , { name: 'Address', index: 'Address', width: 200, sortable: true }]            
        , viewrecords: true            
        , pager: '#pager1'
        , mtype: 'GET'
    ,rowNum:true
    ,caption: 'My first grid'
    });                            //close of jQuery("#grdUsers").jqGrid({

    $("#grdUsers").jqGrid('navGrid', '#pager1',
            { add: false, del: false, edit: false, search: false, refresh: false });
}
4

1 に答える 1

2

問題の理由は、jqGridパラメーター（オプション）の誤った使用法です。正確には、jqGridオプションの間違った組み合わせを使用します。Tony Tomov（jqGridの開発者）は、新しいバージョンごとにjqGridに多くの機能を追加しました。彼は、可能であれば下位互換性を維持したいと考えていました。結果として、明確な名前変換のない多くのオプションがあります。多くのオプションは、他のいくつかのオプションが設定されている場合にのみ機能します。jQueryまたはjQueryUIの場合とまったく同じように、入力パラメーターの検証はありません。jqGridを使い始める人には多くの問題があります。

あなたの場合の問題は、dataパラメータをと一緒に使用することdatatype: "json"です。パラメータの組み合わせが間違っています。問題は、jqGridが2つのリモートデータ型といくつかのローカルデータ型をサポートしていることです。

を使用するdatatype: "json"かdatatype: "xml"、jqGridを使用すると、グリッドの初期入力と、すべての並べ替え、ページング、および（オプションで）フィルタリングのためのAJAXリクエストが取得されます。いずれにせよ、へのリクエストが送信されurlます。パラメータで指定されたHTTPコマンドを使用しmtypeます。データのページングと並べ替えは、サーバー側で実装する必要があります。リクエストには、リクエストされたページ番号、ページの長さ、並べ替えに使用される列のインデックス、および並べ替えの方向が含まれます。サーバーから返されるデータは、ここで説明する形式である必要があります。非標準のデータ形式を使用しているjsonReader場合は、jqGridおよびjsonmap（xmlmap）のオプションをcolModel使用して、グリッドを埋めるためにサーバー応答をどのように使用するかを指定できます。

サーバー側のページング、データの並べ替え、フィルタリングを実装したくない場合は、loadonce: trueオプションを使用できます。サーバーがすべてのデータを一度に返す必要がある場合。データは、最初の並べ替え列（使用するものに基づいて）に基づいて1回並べ替える必要がsortnameありsortorderます。jqGridは、データの最初のロード後にdatatype自動的にに変わります。"local"

他のすべてのデータ型は、ローカルデータ型として解釈されます。パラメータは、のdata場合にのみ使用されますdatatype: "local"。この場合、別の形式のデータを使用する必要があります。localReader（ここを参照）を使用して、パラメーターからデータを読み取る方法を変更dataできます。

datatype: "jsonstring"グリッドを。で閉じることができるがdatatype: "json"、入力としてオブジェクトまたはJSON文字列を使用する特別な場合があります。この場合、データの入力としてdatastr（!!!ではなく）を使用する必要があります。data最初の入力後、はdatatypejqGridによってからdatatype: "jsonstring"に変更されdatatype: "local"ます。

したがって、問題を修正するためのいくつかのオプションがあります。

  • データのページングを実装したくない場合は、オプションurlを使用します。loadonce: true
  • の代わりに使用datatype: "jsonstring"します。datastrdata
  • 名前付きアイテムの配列として使用datatype: "local"およびdata入力します（アイテムのプロパティは、列のプロパティの値と同じである必要がありnameます）。
于 2012-09-24T17:05:26.493 に答える