如何在自由的jqgrid 4.15.4中旋转列

Question

我需要免费的jqgrid帮个忙。在这里，我想展示一个带有一些格式的项目的简短摘要。目前，我已经使用setGroupHeaders在一个组下显示多个列。但是这看上去不太方便用户，所以我开始想要改变一下。

关于第一张图片:它现在的样子。

​

​

关于第二个图像:我希望结果网格应该是什么样子？

​

更新:我不清楚是否应该将第二个(结果)网格看作是支点网格还是树网格。

更新2:我已经为同样的问题创建了一个小提琴，但似乎有一些东西是我缺少的这里。代码示例如下所示：

var data = [{
    "id": 1,            
    "deadline":"Deadline",
    "AgreedD":"Agredd Deadline",
    "labelD":"Date",
    "Agreed":"2018-02-11",


},{
 "id": 2,
  "deadline":"Deadline",
"EstimatedD":"Estimated Deadline",
"labelD":"Date",
"Estimated":"2018-02-15"
}
, {
    "id": 2,
   "deadline":"DaysLeft",
    "UAD":"25",
    "UED":"33"
},
 {
    "id": 3,
   "deadline":"Participants",
    "RequiredP":"120",
    "WRec":"88"
},
 {
    "id": 4,
   "deadline":"Utterences",
    "RequiredU":"6000",
    "RecordedU":"4800"
},{
    "id": 5,
   "deadline":"Throughput",
    "RequiredT":"400",
    "ActualT":"12"
},

];
/* convert the salesdate in  */
$("#list483").jqGrid("jqPivot",
data,
{
    frozenStaticCols: true,
    skipSortByX: true,
    useColSpanStyle: true,
    //defaultFormatting: false,
    **xDimension**: [
            {dataName:"deadline"},
        {dataName: "AgreedD" },
        {dataName: "EstimatedD" },
        {dataName: "WRec", sortorder: "desc" },
        {dataName: "UED", sortorder: "desc" },
        {dataName: "Estimated", sortorder: "desc" },

    ],
    **yDimension**: [

         { dataName: "Agreed", width: 100, label: "Agreed" },
         { dataName: "Estimated", width: 100, label: "Estimated" },
         {dataName:"RequiredP", width: 100, label: "RequiredP"},
         {dataName:"UAD", width: 100, label: "UAD"},
         {dataName:"RequiredU", width: 100, label: "RequiredU"},           
         { dataName: "salesYear", sorttype: "integer" },
         { dataName: "salesMonth", sorttype: "integer" }
],
    **aggregates**: [{
        //member: "Agreed",

        //template: "number",
        //template: "integer", //myIntTemplate,

    },
    {
        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: ["x2"],
        groupColumnShow: [false],
        groupText: ["<span class='group-text'>{0}</span>"]
    },
    //width: 450,
    pager: true,
    rowNum: 20,
    //caption: "<b>statistics</b>",
    rowList: [5, 10, 20, 100, "10000:All"]
});    
//var p = $("#list483").jqGrid("getGridParam");
//console.log(JSON.stringify(p.pivotOptions.xIndex));
//console.log(JSON.stringify(p.pivotOptions.yIndex));

所以，如果有人能给我举一些例子，那将是很有帮助的。

Answer 1

使用jqPivot特性无法轻松地实现您所描述的内容，因为您正在显示的数据结构似乎没有遵循特定的规则(一些记录包含一个单元格的值，而另一些记录有两个单元格的值)。

您似乎只需要显示一条记录，其值在两行上分开，而不需要jqGrid提供的特性，在这种情况下，我建议不要使用网格插件，而只是手动创建DOM。

但是，如果您想使用jqgrid，我的命令是在将数据传递给jqgrid之前处理它，并将其转换为更适合于小部件的结构。

您可以通过网格配置实现所需的UI，如下所示：

var dataConverted = convertData(data); //Convert your custom data to the structure of colModel

$('#grid').jqGrid({
    //...
    datatype: "local",
    data: dataConverted,
    colModel: [
        {name: 'deadlineType', label: 'Deadline'},
        {name: 'deadlineValue', label: ''},
        {name: 'daysLeftType', label: 'Days left'},
        {name: 'daysLeftValue', label: ''},
        {name: 'participantsType', label: 'Participants'},
        {name: 'participantsValue', label: 'Total'},
        {name: 'qaPassed', label: 'QA passed'}
    ]
});

*大跨度、对齐、日期格式等所需的小调整

​

​

如果列是动态的，则还可以在处理数据时生成colModel。

演示：https://jsfiddle.net/zohalexix/wy43L0tj/2/