代码之家 › 专栏 › 技术社区 › Chandan

如何在免费jqgrid 4.15.4中透视列

mvcjqgrid free-jqgrid jqgrid jquery

Chandan · 技术社区 · 7 年前

我需要一个免费jqgrid的帮助。在这里,我想展示一个项目的简短摘要和一些格式。目前,我使用 setGroupHeaders 在一个组下显示多个列。但这看起来不太方便用户,所以我开始想改变一下。

关于第一张图片:它目前的样子。

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

更新:我不清楚我是否应该考虑第二个(结果)网格作为枢轴网格或树网格。

更新2:我已经为同样的东西制作了一把小提琴,但似乎我缺少了一些东西 here 。代码示例可在下面找到:

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));

所以,如果有人能给我举一些例子,那将非常有帮助。

1 回复 | 直到 7 年前

Alexandru Severin 7 年前

您所描述的内容不容易通过使用 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'}
    ]
});

* colspan、align、日期格式化程序等所需的小调整

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

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