如何停止Jqpivot的自动排序？

时间：2017-01-04 15:42:03

标签： jquery jqgrid free-jqgrid jqpivot

以下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底部的jqpivot官方维基上的这个wiki suppress auto sort声明：

  

按整个x或y向量进行自定义排序

     

compareVectorsByX和compareVectorsByY选项允许指定   回调函数，用于整个x的自定义排序   或者是矢量。

     

可以在此处找到向量排序的默认实现。   它是ArrayOfFieldsets的compareVectorsEx方法。这很重要   了解该功能将用于两个目的：1）比较   向量2）找到存在的向量的索引   比较向量的差异。所以方法compareVectorsEx   返回具有两个属性的对象：index和result。该物业   结果是众所周知的值-1，这意味着第一个向量是   小于第二个，0，表示向量等于1，即   表示第一个向量大于第二个向量。该   属性索引返回基于0的索引元素的比较   向量不同的向量。

我已经按照说明添加了函数compareVectorsEx但是如何使用该函数来停止自动排序？

我必须停止所有x字段的自动排序。我需要停止排序的原因是使网格显示字段make和model的顺序与原始json中的顺序相同。

更新

我修改了原始json数据源，使其在每个对象groupheaderorder和childorder上都有两个属性。属性groupheaderorder是make中对象的属性json的顺序，childorder属性是所有属性的model属性的顺序命名。

这里是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"
}];

Here is link to the jsfiddle code（这与我原来的帖子相同，只是添加了新的两个属性）

让我通过一个例子

解释一下

在josn中有三个丰田和两个日产。如果您查看相同品牌和型号的groupheaderorder号码和childorder号码，则相同的值，但不同品牌和模型他们具有不同的值。对于不同的组合，groupheaderorder和childheaderorder的组合始终是唯一的制作和模型。我认为这可能是为 grouptext 和他们的孩子提供自定义排序顺序的好选择，因为他们会保留并显示原始排序顺序。

原始数据来自一个我无法在存储过程代码中修改的存储过程，并且令人畏惧的是，返回的结果集甚至没有用于排序的列。所以在我从ASP MVC构建的web应用程序中，在其控制器逻辑中，我唯一的选择是添加这两个排序属性，以便它们将包含在json.

中

可能还有其他更好的方法，如果是这样，我真的很想知道：） 但是，因为我已经添加了这两个属性以保留原始排序顺序，所以在生成的数据透视网格中保留并显示此顺序？

1 个答案:

答案 0 :(得分：1)

您应该对代码进行一些小的更改。首先应该删除skipSortByX: true选项，其中一个不需要更多选项。我们应该使用groupheaderorder和childorder属性扩展xVector，我们需要进行排序。我们不会显示列，因此我们可以使用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，这些列对应列。要根据x0和x1对“make”和“model”列（groupheaderorder，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-vector对数据进行排序。回调compareVectorsByX有两个参数，它们是源数据中的x项，例如x1 = ["toyota", "corolla", "Litre", "1", "1"]和2 = ["toyota", "belta", "Litre", "1", "2"]。回调应返回具有两个属性的对象：index和result。结果是-1,0或1，每个人在比较数字时都知道。 index是x数组中的索引，其中一个找到了x1和x2之间的差异，而后者则进行了比较。在上述示例的情况下，找到x数组的第二个元素的差异（第二个元素具有索引1）。我们根据最后一个（"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/

相关问题
最新问题