如何停止Jqpivot的自动排序? [英] How to stop auto sorting of Jqpivot?
问题描述
以下jqpivot网格显示了汽车租赁的销售信息.完整的代码在 jsfiddle
the following jqpivot grid displays sales information of car rentals. The complete code for this is in 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上声明:
according to this wiki suppress auto sort on jqpivot official wiki at the bottom of the wiki it states:
按整个x或y向量进行自定义排序
compareVectorsByX和compareVectorsByY选项允许指定 回调函数，将用于对整个x进行自定义排序 或y向量.
The options compareVectorsByX and compareVectorsByY allows to specify callback function which will be used for custom sorting by the whole x or y vector.
可以在此处找到按向量排序的默认实现. 它是ArrayOfFieldsets的compareVectorsEx方法.重要的是 了解该功能将用于两个目的:1)比较 向量2)找到存在向量的索引 比较向量的差异.所以方法compareVectorsEx 返回具有两个属性的对象:索引和结果.物业 结果是众所周知的值-1，这意味着第一个向量是 小于第二个，即0，表示向量等于1，即 表示第一个向量大于第二个向量.这 属性索引返回要比较的元素的从0开始的索引 向量不同的向量.
The default implementation of sorting by the vector can be found here. It's compareVectorsEx method of ArrayOfFieldsets. It's important to understand that the function will be used for two purpose: 1) compare the vectors 2) finding the index of the vectors where there are differences in the compared vectors. So the method compareVectorsEx returns object with two properties: index and result. The property result is well known value -1, which means that the first vector is less then the second one, 0, means the vectors are equal to, 1, which means that the first vector is greater then the second one. The property index returns 0-based index of the element of the compared vectors where the vectors are different.
我已经如上所述添加了功能compareVectorsEx，但是如何使用该功能停止自动排序呢?
i have added the function compareVectorsEx as stated but how do use that function to stop the auto sort?
我必须停止对所有x字段的自动排序.我需要停止排序的原因是使网格以与原始json中相同的顺序显示字段make和model.
i have to stop the auto sort of all x fields. The reason i need to stop sort is to make the grid show the fields make and model in the same order as in the original json.
更新:
i修改了原始的json数据源，以在每个对象groupheaderorder和childorder上具有两个属性.属性groupheaderorder是json中对象的属性make的顺序，而childorder属性是所有品牌名称的model属性的顺序.
i have modified the original json datasource to have two properties on each object groupheaderorder and childorder. The property groupheaderorder is the order of the property make of an object in json and childorder property is the order of the model property for all make names.
这是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代码的链接(这与我的原始帖子的代码相同，除了新增了两个属性)
Here is link to the jsfiddle code (this is the same code as my original post except the new two properties were added)
让我通过示例进行解释
在乔恩河中，有三个丰田和两个日产.如果您查看品牌和型号的groupheaderorder号和childorder号，它们具有相同的值，但是不同品牌和型号 >它们具有不同的值.因此，groupheaderorder和childheaderorder的组合对于品牌和型号的不同组合来说总是唯一.我认为这可能是为 grouptext 和他们的孩子指定自定义排序顺序的好选择，因为他们会保留并显示其原始排序顺序 >.
In the josn there are three toyotas and two nissans. if you look at groupheaderorder number and childorder number for the same make and model they have the same values but for different makes and models they have different values.So the combination of groupheaderorder and childheaderorder is always unique for the different combinations of makes and models. I thought this could be a good option to give a custom sort order for the grouptext and their children, because they keep and show their original sort order.
原始数据来自存储过程，我无法在存储过程代码中进行修改，令人畏惧的是，返回的结果集甚至没有用于排序的列.因此，在从ASP MVC构建的Web应用程序中，在其控制器逻辑中，我唯一的选择是添加这两个排序属性，以便将它们包含在json.
The original data comes from a stored procedure that i cannot modify in the stored procedure code and dauntingly the returning result set does not even have the columns that were used to sort. So in my web app that was built from ASP MVC, in its controller logic the only option i have is to add those two sort properties so they will be included in the json.
还有其他更好的方法，如果可以的话，我真的很想知道:)
但是，由于我添加了这两个属性来保留原始的排序顺序，因此要保留并在生成的数据透视网格中显示此顺序吗?
There could be other better ways and if so i really love to know abouts : )
However since i have added those two properties to preserve the original sort order is there away to keep and show this order in the generated pivot grid?
推荐答案
一个人应该对您的代码进行一些小的更改.首先，应删除skipSortByX: true选项，该选项不需要更多.其次，我们应该使用排序所需的groupheaderorder和childorder属性扩展xVector.我们将不显示列，因此可以对列使用additionalProperty: true属性.结果，我们可以使用以下xDimension:
One should make some small changes in your code. First of all one should remove skipSortByX: true option, which one not need more. Seconds we should extend xVector with groupheaderorder and childorder properties, which we need for sorting. We will don't display the columns, thus we can use additionalProperty: true property for the columns. As the result we can use the following 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.
I included comments, which describes the name (the index) of the property: the make property will have the index 0 in the x-vector, the model property will have the index 1, ... the childorder property will have the index 4.
最终的jqGrid将具有属性x0，x1，...，x4的输入data，该属性与各列相对应.为了使列"make"和"model"(x0，x1)能够基于groupheaderorder和childorder进行排序，我们可以在前两个列中添加sorttype回调.结果我们得到了
The final jqGrid will have input data with properties x0, x1, ..., x4, which corresponds the columns. To make the columns "make" and "model" (x0, x1) sortable based on groupheaderorder and childorder we can add sorttype callback to two first columns. As the result we get
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项，例如x1 = ["toyota", "corolla", "Litre", "1", "1"]和2 = ["toyota", "belta", "Litre", "1", "2"].回调应返回具有两个属性的对象:index和result.结果是-1、0或1，这是每个人在对数字进行比较时都知道的. index是x数组中的索引，在该索引中可以找到x1和x2之间的差异，并进行比较.在上述示例的情况下，可以找到x数组的第二个元素之间的差异(第二个元素的索引为1).我们基于最后一个("childorder")值比较"corolla"和"belta":通过比较"1"和"2".因此，compareVectorsByX回调应在上述选项上返回{ index: 1, result: -1 }.通用代码如下所示:
Finally we need to implement compareVectorsByX callback, which can be used to sort the data by X-vector. The callback compareVectorsByX have two parameters which will be the x-items from the source data, for example x1 = ["toyota", "corolla", "Litre", "1", "1"] and 2 = ["toyota", "belta", "Litre", "1", "2"]. The callback should return object with two properties: index and result. The result is -1, 0 or 1, which everybody know in comparing of numbers. The index is the index in the x-array where one found the differences between x1 and x2, which one compares. In case of above example one find the difference in the second element of x array (the second element has the index 1). We compare "corolla" and "belta" based on the last ("childorder") value: by comparing "1" and "2". Thus the compareVectorsByX callback should return { index: 1, result: -1 } on the above options. The common code will be like the following:
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/
It's all. The modified demo with the code is https://jsfiddle.net/OlegKi/cukLs23n/2/
这篇关于如何停止Jqpivot的自动排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
