JQuery jqgridがクライアント側でソートしない

Question

データがグリッドに正常に読み込まれますが、ソートされません。

テーブルヘッダーをクリックすると、並べ替えの矢印が表示されますが、データは並べ替えられません。

ありがとうございました。

$("#CompTable").jqGrid({ 
      url:'BomExplosionInJsonObj.asp' 
     , datatype: 'json' 
     , mtype: 'GET' 
     , height: 400 
     , colNames:['Part','Description','Src','Std Usage','Usage Inc Scrap','Rate Scrap','UOM','Item','Unit Cost','Stock'] 
     , colModel:[ {name:'COMP1_PART',index:'Part', width:120} 
           , {name:'WSCOMPDESC',index:'Desc', width:300} 
           , {name:'WSCOMPSRC',index:'Src', width:10} 
           , {name:'COMPUSAGE',index:'Usage', width:80, align:"right",sorttype:"float"} 
           , {name:'WSGROSSQTY',index:'TotUsage', width:80, align:"right",sorttype:"float"} 
           , {name:'COMPRATE_SCRAP',index:'Rate Scrap', width:80, align:"right",sorttype:"float"} 
           , {name:'COMPBASIC_UNIT',index:'UOM', width:20} 
           , {name:'COMP1_ITEM',index:'Item', width:20} 
           , {name:'WSCOMPUNITCOST',index:'UnitCost', width:80, align:"right",sorttype:"float"} 
           , {name:'WSCOMPQTYSTOCK',index:'Stock', width:80, align:"right",sorttype:"float"} 
          ] 
     , jsonReader: { 
       root:"rows" 
      , page: "page" 
      , total: "total" 
      , records: "records" 
      , repeatitems: false 
      , id: "0" 
      } 
     , multiselect: false 
     , caption: "Bom Detail" 
     , rowNum: 10000 
     , autoencode: true 
     , loadonce: true 
     , sortable: true 
     , loadComplete: function() {jQuery("#CompTable").trigger("reloadGrid");}// Call to fix client-side sorting 
    }); 
}); 

JSONデータが返されています（Firebugからの読み取りとして）。

{ 
    "total":"1" 
    ,"page":"1" 
    ,"records":"2" 
    , "rows": 
     [ 
     {"ID":1,"WSCOMPDESC":"ZYTEL E101L BLK MOUL ","WSCOMPUNITCOST":7.08,"WSCOMPSRC":"P ","WSCOMPQTYSTOCK":75,"COMPBASIC_UNIT":"KG ","COMPUSAGE":0.0034,"COMPRATE_SCRAP":0,"WSGROSSQTY":0.0034,"COMP1_PART":"1180019 ","COMP1_ITEM":" " 
     }, 
     {"ID":2,"WSCOMPDESC":"INSERT ","WSCOMPUNITCOST":1.89,"WSCOMPSRC":"P ","WSCOMPQTYSTOCK":400,"COMPBASIC_UNIT":"EA ","COMPUSAGE":2,"COMPRATE_SCRAP":0,"WSGROSSQTY":2,"COMP1_PART":"4OWE195689\/ISS 2 ","COMP1_ITEM":" " 
     } 
     ] 
    } 

Answer 1

あなたのコードを実行されるC＃MVCコントローラのコード、多くの重要なエラーを持っている：

1. colModelは用nameの値と異なっているindexプロパティが含まれています同じ商品です。それは主なバグです。任意のsortnameオプションをjqGridに指定していないので、indexのプロパティの値はサーバーから見えません。 loadonce: trueを使用する場合、indexプロパティは、nameプロパティの値と同じである必要があります。 indexのプロパティをすべてに含めないことをお勧めします。 id: "0"：ケースでindexプロパティは、あなたがjsonReaderでidプロパティの誤った値を使用しnameプロパティ
2. の値で初期化されます。 repeatitems: trueの場合は、そのような値を使用することもあります。この場合、行はの配列というJSON入力で表されます。したがって、0の値は、inが配列のインデックスとして使用できるため、正しい値になります。使用方法がrepeatitems: falseの場合、JSON入力のデータ行は、名前付きプロパティを持つオブジェクトです。あなたのケースではid: "ID"を使用する必要があります。さらに、jsonReaderに値がデフォルト（root:"rows"、page: "page"）のプロパティを含める必要はありません。
3. 次の問題は、無条件のreloadGridをloadCompleteの内部で使用することです。 loadCompleteは、グリッドを再ロードするたびにが実行されることを理解する必要があります。（ローカル再ロードのイベント）。だから、グリッドを永久にリロードするのは間違っているでしょう。またloadCompleteの中にreloadGridの使用は別の観点から悪いです。 reloadGridをトリガーすると、イベントはすぐに*実行されますが、グリッドは以前のロードの処理中ではありません。そのため、の内部で再ロードをトリガーするのは、50 msのような小さな時間間隔でトリガーする方が正しいでしょう。
4. 最後に、K&R（Kernighan and Ritchie's）スタイルのコードの使用が推奨されています。別のコンピュータ言語で使用するコードの書式設定のスタイルはそれほど重要ではなく、あなたが個人的に読んだほうが良いものは重要ではありません。 JavaScriptには独自の権利があります。そこからの1つは、自動セミコロンの挿入です（たとえば、hereを参照）。 K & Rに従うと、セミコロンの自動挿入に問題はありません。
5. 多くの行を表示する必要がない場合は、height: "auto"を使用することをお勧めします。コードのサイズを縮小し、管理を簡略化する列テンプレートを使用します。

対応するデモが​​ある

var myFloatTemplate = { width: 80, align: "right", sorttype: "float" }; 

$("#CompTable").jqGrid({ 
    url: "BomExplosionInJsonObj.asp", 
    datatype: "json", 
    height: "auto", 
    colNames: ["Part", "Description", "Src", "Std Usage", "Usage Inc Scrap", "Rate Scrap", "UOM", "Item", "Unit Cost", "Stock"], 
    colModel: [ 
     {name: "COMP1_PART", width: 120}, 
     {name: "WSCOMPDESC", width: 300}, 
     {name: "WSCOMPSRC", width: 40}, 
     {name: "COMPUSAGE", template: myFloatTemplate}, 
     {name: "WSGROSSQTY", width: 120, template: myFloatTemplate}, 
     {name: "COMPRATE_SCRAP", width: 90, template: myFloatTemplate}, 
     {name: "COMPBASIC_UNIT", width: 60}, 
     {name: "COMP1_ITEM", width: 60}, 
     {name: "WSCOMPUNITCOST", template: myFloatTemplate}, 
     {name: "WSCOMPQTYSTOCK", template: myFloatTemplate} 
    ], 
    jsonReader: { 
     repeatitems: false, 
     id: "ID" 
    }, 
    caption: "Bom Detail", 
    rowNum: 10000, 
    autoencode: true, 
    loadonce: true, 
    sortable: true, 
    sortname: "COMP1_PART", 
    //sortorder: "desc", 
    loadComplete: function() { 
     var $self = $(this); 
     if ($self.jqGrid("getGridParam", "datatype") === "json") { 
      setTimeout(function() { 
       $self.trigger("reloadGrid"); // Call to fix client-side sorting 
      }, 50); 
     } 
    } 
}); 

を下回るようになります可能性が変化する、上述した後。ローカルソート作品と、それは次のような結果

UPDATEDが表示されます。バージョン私が開発しjqGridの4.12.0 free jqGridフォーク以降では、新しいforceClientSorting: trueオプションをサポートしています。これはloadonce: trueオプションと組み合わせて動作し、サーバーの応答から最初にすべてのデータをロードしてから、データをローカルでにソートし、次にデータのページを表示することができます。それはloadCompleteで開始されたsetTimeoutのグリッドのリロードでトリックを行い、答えに記載されていません。上記のloadCompleteコードを1つの追加オプションforceClientSorting: trueに置き換えてください。オプションforceClientSorting: trueは、追加の2つの利点があります。

1. 一つは、最初の（ソートされていない）グリッドの表示をした後、任意のちらつきが表示されません。
2. グリッドの表示は、特に行が多い場合は、グリッドの表示がソートほど遅いため、優れています。さらに、古い回答に記載されているトリックでは、グリッドが表示されてからコンテンツが削除され、ソートされたグリッドがもう一度表示されます。

Answer 2

投稿したコードは、クライアントではなくサーバーで並べ替えが行われることを示しています。 jqGridはsordとsidxのパラメータを投稿して、jqGridにデータを返すときにそのようにすることができます。

例：ページングも

public ActionResult GetGridData(string sidx, string sord, int page, int rows, bool _search, string filters) 
{ 
... 
var pagedQuery = wholeDataSet.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows).ToList(); 
...