5

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

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

ありがとう。

    $("#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":" "
       }
      ]
    }
4

3 に答える 3

16

あなたのコードには多くの重要なエラーがあります:

  1. colModelには、同じ項目indexの の値とは異なるプロパティがname含まれています。主なバグです。sortnamejqGrid のオプションを指定していないため、indexプロパティの値がサーバーに表示されることはありません。使用する場合loadonce: true、indexプロパティはプロパティの値と同じである必要がありnameます。プロパティをまったく含めないことをお勧めしますindex。プロパティがプロパティindexの値で初期化される場合name
  2. :で間違ったidプロパティの値を使用しています。の場合、そのような値を使用することがあります。この場合、行は JSON 入力でarrayとして表されます。inは配列内のインデックスとして使用できるため、値は正しいでしょう。使用の場合、JSON 入力のデータ行を表すアイテムは、名前付きプロパティを持つオブジェクトです。したがって、あなたのケースで使用する必要があります。さらに、値がデフォルト ( 、 ) などのプロパティに含める必要はありません。jsonReaderid: "0"repeatitems: true0repeatitems: falseid: "ID"jsonReaderroot:"rows"page: "page"
  3. reloadGrid次の問題は、 の中での無条件の使い方ですloadComplete。がグリッドのリロードごとloadCompleteに実行されることを理解する必要があります(ローカル リロードのイベント)。したがって、グリッドを永続的にリロードするのは間違っています。また、別の観点から見ると中の使い方が悪いです。イベントをトリガーすると * すぐに * 実行されますが、グリッドは以前の読み込みの処理中ではありません。そのため、ミリ秒のような短い時間間隔でリロードをトリガーする方が正しいでしょう。reloadGridloadCompletereloadGridsetTimeout50
  4. 最後の推奨事項は、K&R (Kernighan と Ritchie) のコード記述スタイルの使用です。別のコンピューター言語で使用するコードの書式設定のスタイルはそれほど重要ではありません。また、個人的にどれが最も読みやすいと思うかは重要ではありません。JavaScript には独自の権利があります。そこからの 1 つは、セミコロンの自動挿入です(たとえば、こちらを参照)。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 : バージョン 4.12.0 から、私が開発した jqGrid のフリー jqGridフォークは、新しいforceClientSorting: trueオプションをサポートします。オプションと組み合わせて機能し、loadonce: true最初にサーバー応答からすべてのデータをロードし、次にデータをローカルでソートしてから、データのページを表示することができます。setTimeoutで開始された内のグリッドのリロードでトリックが作成loadCompleteされ、回答で説明されていますが、必要ありません。loadComplete上記のコードを 1 つの追加オプションに置き換えるだけforceClientSorting: trueです。このオプションforceClientSorting: trueには、さらに 2 つの利点があります。

  1. 最初の (ソートされていない) グリッドを表示した後、ちらつきは見られません。
  2. グリッドの表示は並べ替えに比べて非常に遅いため、特に行数が多い場合は、グリッドのパフォーマンスが向上します。さらに、古い回答で説明されているトリックは、グリッドを表示し、コンテンツを削除してから（これもゆっくりです）、ソートされたグリッドをもう一度表示します。
于 2013-05-05T09:47:27.253 に答える
0

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

例: ページングも実行される C# MVC コントローラー コード

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();
 ...
于 2013-05-04T23:03:14.727 に答える