jquery - Jqpivotの自動ソートを停止するには?

Question

次の jqpivot グリッドは、レンタカーの販売情報を表示します。このための完全なコードはjsfiddleにあります

var data = [{
    "id": 1,
    "make": "toyota",
    "model": "corolla",
    "fuelusagecity": "17",
    "fuelusagehwy": "12",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 120000.0000,
    "highsalestext": null,
    "salesdate": "2010-12-01"
}, {
    "id": 2,
    "make": "toyota",
    "model": "corolla",
    "fuelusagecity": "10",
    "fuelusagehwy": "14",
    "salesaboveavg": false,
    "fuelmeasure":'Litre',
    "totalnumberofsales": 100000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2010-12-15"
}, {
    "id": 3,
    "make": "toyota",
    "model": "belta",
    "fuelusagecity": "15",
    "fuelusagehwy": "10",
    "salesaboveavg": true,
    "fuelmeasure":'Litre',
    "totalnumberofsales": 200000.0000,
    "highsalestext": null,
    "salesdate": "2011-01-10"
}, {
    "id": 4,
    "make": "toyota",
    "model": "camry",
    "fuelusagecity": "13",
    "fuelusagehwy": "10",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 300000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2011-04-23"
}, {
    "id": 5,
    "make": "nissan",
    "model": "skyline",
    "fuelusagecity": "14",
    "fuelusagehwy": "9",
    "fuelmeasure":'Litre',
    "salesaboveavg": true,
    "totalnumberofsales": 500000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2010-09-10"
}, {
    "id": 6,
    "make": "nissan",
    "model": "zx300",
    "fuelusagecity": "10",
    "fuelusagehwy": "8",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 400000.0000,
    "highsalestext": null,
    "salesdate": "2012-01-06"
}];

/* convert the salesdate in  */
var i, item, dateParts;
for (i = 0; i < data.length; i++) {
    item = data[i];
    if (typeof item.salesdate === "string") {
        dateParts = item.salesdate.split("-");
        item.salesYear = dateParts[0];
        item.salesMonth = dateParts[1];
        item.salesDay = dateParts[2];
        item.salesDateFormatted = dateParts[0];
    }
}

var myIntTemplate = {
    formatter: "currency",
    align: "right", sorttype: "number",
    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
    formatoptions: { defaultValue: ""}
},
    $grid = $("#list483");

$grid.jqGrid("jqPivot",
             data,
             {
    frozenStaticCols: true,
    skipSortByX: true,
    useColSpanStyle: true,
    //defaultFormatting: false,
    xDimension: [
        { dataName: "make", width: 100, label: "Make", compareVectorsEx(x1,x2){
        // how do i use x1, x2 parameters to stop auto sort
        }  },
        { dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true, compareVectorsEx(x1,x2){

        } },
        { dataName: "fuelmeasure", width: 103, label: "Units", compareVectorsEx(x1,x2){

        } },
    ],
    yDimension: [
        { dataName: "salesdate", sortorder: "desc"}//,
        //{ dataName: "salesYear", sorttype: "integer" },
        //{ dataName: "salesMonth", sorttype: "integer" }
    ],
    aggregates: [{
        member: "totalnumberofsales",
        template: myIntTemplate,
        formatter:function(cellvalue, options, rowObject){
            if(cellvalue=== undefined){
                return '';
            }
            else{

                var x = options.rowData.pivotInfos[options.colModel.name].rows[0].highsalestext;

                if(x==="HIGH")
                {
                    return x;
                }
                else
                {
                    return cellvalue;
                }
            }
        },
        cellattr: function (rowId, cellValue, rawObject, cm, rdata) {
            if (rawObject != null) {
                var items = rawObject.pivotInfos[cm.name];
                if (items != null && items.rows != null && items.rows.length > 0) {
                    var isHigh = true, i;
                    for (i = 0; i < items.rows.length; i++) {
                        if (items.rows[i].highsalestext !== "HIGH") {
                            isHigh = false;
                            break;
                        }
                    }
                    if (isHigh) {
                        return "class='high-marker'";
                    }
                }
            }
        },
        aggregator: "max"
    }/*,
                 {
                 member: "totalnumberofsales",
                 aggregator: "count",
                 //template: "integer",
                 label: "{0}"
                 }*/]
},
             // grid options
             {
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true, width: 75 },
    shrinkToFit: false,
    useUnformattedDataForCellAttr: false,
    autoResizing: { compact: true },
    groupingView: {
        groupField: ["x0"],
        groupColumnShow: [false],
        groupText: ["<span class='group-text'>{0}</span>"]
    },
    //width: 450,
    pager: true,
    rowNum: 20,
    caption: "<b>Car sales statistics</b>",
    rowList: [5, 10, 20, 100, "10000:All"]
}
            );

このwikiによると、wikiの下部にあるjqpivot公式wikiの自動ソートを抑制します：

x または y ベクトル全体によるカスタムソート

オプション compareVectorsByX および compareVectorsByY を使用すると、x または y ベクトル全体によるカスタムソートに使用されるコールバック関数を指定できます。

ベクトルによる並べ替えのデフォルトの実装は、ここにあります。ArrayOfFieldsets の compareVectorsEx メソッドです。この関数は次の 2 つの目的で使用されることを理解することが重要です。1) ベクトルを比較する、2) 比較したベクトルに違いがあるベクトルのインデックスを見つけるしたがって、compareVectorsEx メソッドは、index と result の 2 つのプロパティを持つオブジェクトを返します。プロパティの結果は既知の値 -1 です。これは、最初のベクトルが 2 番目のベクトルよりも小さいことを意味し、0 はベクトルが等しいことを意味し、1 は最初のベクトルが 2 番目のベクトルよりも大きいことを意味します。プロパティ index は、ベクトルが異なる比較ベクトルの要素の 0 ベースのインデックスを返します。

述べたように機能を追加しましたcompareVectorsExが、その機能を使用して自動ソートを停止するにはどうすればよいですか?

すべての x フィールドの自動ソートを停止する必要があります。並べ替えを停止する必要がある理由は、グリッドにフィールド make と model を元の json と同じ順序で表示させるためです。

アップデート：

各オブジェクトにjson2 つのプロパティを持つように元のデータソースを変更しました。プロパティはのオブジェクトのプロパティの順序であり、プロパティはすべてのメイク名のプロパティの順序です。groupheaderorderchildordergroupheaderordermakejsonchildordermodel

ここにjsonデータがあります

var data = [{
    "id": 1,
    "make": "toyota",
    "model": "corolla",
    "fuelusagecity": "17",
    "fuelusagehwy": "12",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 120000.0000,
    "highsalestext": null,
    "salesdate": "2010-12-01", 
    "groupheaderorder":"1",
    "childorder":"1"
}, {
    "id": 2,
    "make": "toyota",
    "model": "corolla",
    "fuelusagecity": "10",
    "fuelusagehwy": "14",
    "salesaboveavg": false,
    "fuelmeasure":'Litre',
    "totalnumberofsales": 100000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2010-12-15",
    "groupheaderorder":"1",
    "childorder":"1"
}, {
    "id": 3,
    "make": "toyota",
    "model": "belta",
    "fuelusagecity": "15",
    "fuelusagehwy": "10",
    "salesaboveavg": true,
    "fuelmeasure":'Litre',
    "totalnumberofsales": 200000.0000,
    "highsalestext": null,
    "salesdate": "2011-01-10",
    "groupheaderorder":"1",
    "childorder":"2"
}, {
    "id": 4,
    "make": "toyota",
    "model": "camry",
    "fuelusagecity": "13",
    "fuelusagehwy": "10",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 300000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2011-04-23",
    "groupheaderorder":"1",
    "childorder":"3"
}, {
    "id": 5,
    "make": "nissan",
    "model": "skyline",
    "fuelusagecity": "14",
    "fuelusagehwy": "9",
    "fuelmeasure":'Litre',
    "salesaboveavg": true,
    "totalnumberofsales": 500000.0000,
    "highsalestext": "HIGH",
    "salesdate": "2010-09-10",
    "groupheaderorder":"2",
    "childorder":"1"
}, {
    "id": 6,
    "make": "nissan",
    "model": "zx300",
    "fuelusagecity": "10",
    "fuelusagehwy": "8",
    "fuelmeasure":'Litre',
    "salesaboveavg": false,
    "totalnumberofsales": 400000.0000,
    "highsalestext": null,
    "salesdate": "2012-01-06",
    "groupheaderorder":"2",
    "childorder":"2"
}];

これはjsfiddleコードへのリンクです（これは、新しい2つのプロパティが追加されたことを除いて、私の元の投稿と同じコードです）

例を通してこれを説明しましょう

josn には 3 つのトヨタと 2 つの日産があります。同じメーカーとモデルgroupheaderorderの番号とchildorder番号を見ると、それらは同じ値を持っていますが、異なるメーカーとモデルの場合は異なる値を持っています.したがって、との組み合わせは、メーカーとモデルの異なる組み合わせに対して常に一意です. グループテキストとその子に独自のソート順を与えるには、これが良いオプションだと思いました。元のソート順を保持して表示するからです。groupheaderorderchildheaderorder

元のデータは、ストアドプロシージャコードで変更できないストアドプロシージャからのものであり、返される結果セットには並べ替えに使用された列さえ含まれていません。したがって、ASP MVC から構築された私の Web アプリでは、そのコントローラーロジックで、これらの 2 つの並べ替えプロパティを追加して、それらがjson.

他のより良い方法があるかもしれません。もしそうなら、私は本当に知りたいです:)
しかし、元の並べ替え順序を保持するためにこれら2つのプロパティを追加したので、生成されたピボットグリッドでこの順序を保持して表示することはできませんか?

score 1 · Accepted Answer

コードに小さな変更を加える必要があります。まず、skipSortByX: trueオプションを削除する必要があります。これ以上は必要ありません。ソートに必要なプロパティでxVector を拡張する必要がgroupheaderorderある秒数childorder。列を表示しないadditionalProperty: trueため、列にプロパティを使用できます。結果として、以下を使用できますxDimension。

xDimension: [
    { /*x0*/ dataName: "make", width: 100, label: "Make" },
    { /*x1*/ dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true },
    { /*x2*/ dataName: "fuelmeasure", width: 103, label: "Units", skipGrouping:true },
    { /*x3*/ dataName: "groupheaderorder", additionalProperty: true },
    { /*x4*/ dataName: "childorder", additionalProperty: true }
]

プロパティの名前 (インデックス) を説明するコメントを含めました。makeプロパティは x ベクトルでインデックス 0 を持ち、modelプロパティはインデックス 1 を持ち、...childorderプロパティはインデックス 4 を持ちます。

最終的な jqGrid には、列に対応するdataプロパティx0, x1, ...,を持つ入力があります。x4列 "make" と "model" ( x0, x1) を基づいてソート可能にするgroupheaderorderために、最初の 2 つの列にコールバックをchildorder追加できsorttypeます。結果として、

xDimension: [
    { /*x0*/ dataName: "make", width: 100, label: "Make",
        sorttype: function (cellValue, item) {
            return parseInt(item.x3, 10);
        } },
    { /*x1*/ dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true,
        sorttype: function (cellValue, item) {
            return parseInt(item.x4, 10);
        }},
    { /*x2*/ dataName: "fuelmeasure", width: 103, label: "Units", skipGrouping:true },
    { /*x3*/ dataName: "groupheaderorder", additionalProperty: true },
    { /*x4*/ dataName: "childorder", additionalProperty: true }
]

最後にcompareVectorsByX、X ベクトルでデータを並べ替えるために使用できるコールバックを実装する必要があります。コールバックcompareVectorsByXには、ソースデータからの x-item となる 2 つのパラメータがあります。たとえばx1 = ["toyota", "corolla", "Litre", "1", "1"]、と2 = ["toyota", "belta", "Litre", "1", "2"]です。コールバックは、との 2 つのプロパティを持つオブジェクトを返す必要がindexありresultます。結果は -1、0、または 1 で、数値の比較では誰もが知っています。は、とindexの違いが見つかった x 配列内のインデックスで、どちらが比較されます。上記の例の場合、x 配列の 2 番目の要素の違いを見つけます (2 番目の要素のインデックスは 1 です)。最後の ( ) 値に基づいてとを比較します: とを比較します。したがって、コールバックは返す必要がありますx1x2"corolla""belta""childorder""1""2"compareVectorsByX{ index: 1, result: -1 }上記のオプションについて。一般的なコードは次のようになります。

compareVectorsByX: function (x1, x2) {
    // x1 = ["toyota", "corolla", "Litre", "1", "1"],
    // x2 = ["toyota", "belta", "Litre", "1", "2"]
    var groupheaderorder1 = parseInt(x1[3], 10), childorder1 = parseInt(x1[4], 10),
        groupheaderorder2 = parseInt(x2[3], 10), childorder2 = parseInt(x2[4], 10);
    if (groupheaderorder1 !== groupheaderorder2) {
        return { index: 0, result: groupheaderorder1 - groupheaderorder2 };
    }
    if (childorder1 !== childorder2) {
        return { index: 1, result: childorder1 - childorder2 };
    }
    return {
        index: -1,
        result: 0
    };
}

それはすべてです。コードを含む変更されたデモはhttps://jsfiddle.net/OlegKi/cukLs23n/2/です

jquery - Jqpivotの自動ソートを停止するには?

1 に答える 1

Related

Reference