如何将多列合并为1列jqgrid

Question

我有 5 列显示从 Level0 到 Level4 的不同级别。我需要将所有这些级别列显示为 1 个名为 Levels 的主列，即 1 个列名级别具有 5 个名为 lv0、lv1...lv4 的子列？

我尝试了How to display multiple values in same column in jqgrid 中提供的解决方案 但它正在合并值，因此值与标头不匹配。

有没有办法将列合并为 1 列而不仅仅是值？

下面是 jqgrid 的 colModel 和 ColNames：

'detailViewcolNames': [
    "Sub Project(s)",
    "LV0",
    "LV1",
    "LV2",
    "LV3",
    "LV4",
    "Status",
    "%Comp",
    "%Weight",
    "Wins",
    "Attention",
    "Escalation",
    "Comments",
    "Next Steps"
],


'detailGridcolModel': [{
    name: 'name',
    width: '15%',
    index: 'name',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = "<span class='gridTitle'>" + cellvalue + "</span>";
        return cellHtml;
    },
    unformat: function(cellvalue, options, rowObject) {
        return cellvalue;
    },
}, {
    name: "Status",
    index: 'Status',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "from[Subtask].to.Status",
    formatter: function(cellvalue, options, rowObject) {
        return pathProjectModel.getStatusMapImage(cellvalue, options, rowObject);
    }
}, {
    name: 'LV0',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV1',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV2',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV3',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'LV4',
    width: '5%',
    title: false,
    resizable: false,
    sortable: false,
}, {
    name: 'attribute[Percent Complete]',
    index: 'attribute[Percent Complete]',
    width: '10%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "attribute[Percent Complete]",
}, {
    name: 'Weight',
    index: 'Weight',
    width: '10%',
    title: false,
    resizable: false,
    hidden: true,
    sortable: false,
    jsonmap: "Weight",
}, {
    name: "Win",
    index: "Win",
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    jsonmap: "Win",
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    }
}, {
    name: "Attention",
    index: "Attention",
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Attention"
}, {
    name: 'Escalation',
    index: 'Escalation',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Escalation"
}, {
    name: 'Comments',
    index: 'Comments',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Comments"
}, {
    name: 'Next Steps',
    index: 'Next Steps',
    width: '15%',
    title: false,
    resizable: false,
    sortable: false,
    formatter: function(cellvalue, options, rowObject) {
        var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
        return cellHtml;
    },
    jsonmap: "Next Steps"
}, ]

以下是示例数据。这里 id 属性包含 rowid

    responseObj = {
    id: "2432.XXXXXXXXXXXXXX",
    "name": "project Name",
    "Status": "On Track",
    "LV0": "100",
    "LV1": "90.0",
    "LV2": "0.0",
    "LV3": "12.0",
    "LV4": "",
    "attribute[Percent Complete]": "0.0",
    "Weight": "30.0",
    "Win": [
        ["fasdfgasdf"]
    ],
    "Attention": [
        ["sdfasdga"]
    ],
    "Escalation": [
        ["fedgsdshsdfh"]
    ],
    "Comments": [
        ["dgdfhdfhdfuiopjnjkn"]
    ],
    "Next Steps": [
        ["vbmcbvndfgec"]
    ]
}

Answer 1

如果您确实需要使用旧的 jqGrid 4.6.0 并使用datatype: "local"，那么您应该更改输入数据的格式。就是这样，我会推荐你​​。或者，您可以尝试使用datatype: "jsonstring" 并通过datastr 参数而不是data 提供输入数据。您必须更改定义为函数的jsonmap 才能读取输入数据。无论如何，您必须修复您使用的 name 属性的值。

jqGrid 的name 属性将用于生成一些内部元素的id 属性。 HTML5 不允许在id 中使用空格（参见here 声明：“该值不得包含任何空格字符”）。此外，名称将在不同的 CSS 选择器中使用，如果使用名称包含 [ 或 ]（请参阅 [Percent Complete]），您可能会遇到问题。

您不应使用formatter 从其他现有属性构建“虚拟”属性的值。相反，您应该使用jsonmap 或“预处理”输入数据来设置新属性。如果您确实使用自定义formatter，那么强烈建议也指定unformat 回调。

实际示例如下。让我们输入带有数字属性的数据 price 和 tax 任何你想显示相应的列 和 total_price 另外，它们构建为 price 和 @987654345 的总和@。推荐的方法：你应该填写一次total_price或使用定义为函数的jsonmap来计算price和tax之和。之后，您可以使用预定义的formatter: "currency" 来显示该值。我认为您应该以完全相同的方式从 lv0、lv1...lv4 生成一个额外的列。

另外，我想说的是，现在使用旧的 jqGrid 4.6 是危险的，因为它自 2014 年以来就不受支持。确切地说，根本不存在“jqGrid”产品。旧的 jqGrid 存在两个主要 forks："free jqGrid"，我开发的，当前版本是 4.14.0 和 commercial "Guriddo jqGrid JS"，当前版本是 5.2.1。我强烈建议您从当前开发和支持的产品迁移到一个。我提醒您注意the answer 中描述的问题。当时存在的 jqGrid 版本在新版 Chrome 中显示错误的网格。谷歌每 1.5-2 个月发布一次新版本。可能是 jqGrid 4.6（和您现有的 Web 应用程序）将在 Chrome/Firefox 的下一版本或任何其他 Web 浏览器中显示错误的网格。该问题的唯一解决方案是迁移到具有固定代码的另一个版本的 jqGrid。如果您继续使用 jqGrid 4.6，那么您将不得不自己实施修复。如果您要使用当前版本的“free jqGrid”或“Guriddo jqGrid JS”，那么该修复程序将实施相应产品的开发人员，您只需从 GitHub 下载新版本即可。