1

下面的 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 方法。重要的是要了解该函数将用于两个目的：1）比较向量 2）找到比较向量存在差异的向量索引。因此方法 compareVectorsEx 返回具有两个属性的对象：索引和结果。属性结果是众所周知的值 -1，表示第一个向量小于第二个向量，0 表示向量等于，1 表示第一个向量大于第二个向量。属性索引返回向量不同的比较向量元素的从 0 开始的索引。

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

我必须停止所有 x 字段的自动排序。我需要停止排序的原因是让网格以与原始 json 相同的顺序显示字段制作和模型。

更新：

我已将原始json数据源修改为在每个对象上有两个属性，groupheaderorder并且childorder. 属性groupheaderorder是make对象的属性顺序，json属性是所有品牌名称的属性顺序。childordermodel

这是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 代码的链接（除了添加了新的两个属性之外，这与我的原始帖子的代码相同）

让我通过一个例子来解释一下

josn里有三辆丰田和两辆日产。如果您查看相同品牌和型号groupheaderorder的数字和childorder编号，它们具有相同的值，但对于不同的品牌和型号，它们具有不同的值。因此，对于品牌和型号的不同组合，和的组合始终是唯一的。我认为这可能是为grouptext及其子项提供自定义排序顺序的好选择，因为它们保留并显示其原始排序顺序。groupheaderorderchildheaderorder

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

可能还有其他更好的方法，如果是这样，我真的很想知道:)
但是，由于我添加了这两个属性以保留原始排序顺序，是否可以在生成的枢轴网格中保留并显示此顺序？

4

1 回答 1

1

应该对您的代码进行一些小的更改。首先应该删除skipSortByX: true一个不需要更多的选项。groupheaderorder几秒钟后，我们应该使用和属性扩展 xVector 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，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，每个人在比较数字时都知道。是 x 数组中的索引，其中一个发现和index之间的差异，一个比较。在上述示例的情况下，找到 x 数组的第二个元素的差异（第二个元素的索引为 1）。我们比较and基于最后一个 ( ) 值：通过比较 and 。因此回调应该返回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/

于 2017-01-05T18:17:17.350 回答