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"
}, ]

下面是Sample数据。这里的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声明：＆＃34;该值不得包含任何空格字符＆＃34;）。此外，该名称将用于不同的CSS选择器，如果使用名称包含[或]（请参阅[Percent Complete]），您可能会遇到问题。

你不应该使用formatter来构建＆＃34;虚拟＆＃34;的值。其他现有物业的财产。而不是你应该使用jsonmap或＆＃34;预处理＆＃34;输入数据以设置新属性。如果您使用自定义formatter，则严格建议您指定unformat回调。

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

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

如何将多列合并为1列jqgrid

1 个答案: