如何在列 header 上存储 N 个值？

Question

我有以下 jsfiddle 在 pivot 中生成一个 jqgrid。 jsfiddle code 它使用以下 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", 
    "shortsalesdate": "10-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",
    "shortsalesdate": "10-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",
    "shortsalesdate": "11-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",
    "shortsalesdate": "11-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",
    "shortsalesdate": "10-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",
    "shortsalesdate": "12-01-06",
    "groupheaderorder":"2",
    "childorder":"2"
}];

在 json 数据中，销售日期 有两种格式 salesdate 属性有四位数字的年份和 shortsalesdate 有两位数的年份。在网格动态销售日期列中，必须以 yy-mm-dd 格式显示销售日期（因此要显示它应使用 shortsalesdate 属性）。

在 fiddle 代码中，日期按降序排列。新修改还必须按降序对日期进行排序。这次它应该使用属性 salesdate 中的销售日期进行排序，但它应该使用列 header 上的属性 'shortsalesdate` 显示销售日期。

其次，有两个用于显示和隐藏列的按钮。 hiding/showing 之前的方法 getYColumnName 中有销售日期的比较。在当前的jsfiddle代码中，它使用salesdate属性中的值进行比较。这应该保持原样。

所以基本上有两件事： 1.要显示销售日期，应该使用属性 shortsalesdate中的值 2. 对于所有日期比较和排序，它必须使用属性 salesdate

中的值

我该如何实现？

旁注： 我正在考虑在 header 列中存储两个值，一个来自属性 shortsalesdate 的隐藏值和一个来自属性 shortsalesdate 的可见值。那么基本上可以在一列中存储两个值吗？

谢谢

Answer 1

我可以建议您一些解决方法，如何在当前版本的免费 jqGrid 4.13.6 中实现您的要求，但我认为您的问题的解决方案应该非常简单。

您要做的只是自定义文本，该文本将显示在 header 列中。因此，我对免费 jqGrid 的代码进行了一些更改（请参阅此处）并将结果发布到 GitHub.

The demo 从 GitHub 加载最新代码并使用

yDimension: [
    { dataName: "salesdate", sortorder: "desc",
        label: function (options) {
            // options has the following properties:
            //    yData, yIndex, yLevel, pivotOptions
            var date = String(options.yData).split("-");
            return date[0].substr(2) + "-" + date[1] + "-" + date[2];
        }}
]

新的 label 回调允许根据数据构建列 header。我将日期按 - 拆分，从年份中删除前两个符号并构建新字符串。一见下图的效果

我的演示不使用 shortsalesdate 属性，只使用原始的 salesdate。

在 yDimension 中使用多个元素的情况下同样有效。演示 https://jsfiddle.net/OlegKi/e1rvyczh/3/ 使用

yDimension: [
    { dataName: "salesYear", sorttype: "integer", sortorder: "desc",
        label: function (options) {
            return "(" + options.yData + ")";
        }},
    { dataName: "salesdate", sortorder: "desc",
        label: function (options) {
            // options has the following properties:
            //    yData, yIndex, yLevel, pivotOptions
            var date = String(options.yData).split("-");
            return date[0].substr(2) + "-" + date[1] + "-" + date[2];
        }}
]

采用年度虚拟格式：我只是将其括在大括号中：( 和 ) 使用 return "(" + options.yData + ")";。结果如下

请务必从 GitHub (from here)

刷新您的免费 jqGrid 源

如何在列 header 上存储 N 个值？

How to store N number of values on a column header?

jquery

jqgrid

free-jqgrid