jqgrid中的多级标题UI问题答案

【问题标题】：Multilevel header UI issue in jqgridjqgrid中的多级标题UI问题
【发布时间】：2016-02-23 06:10:03
【问题描述】：

我的 jqgrid 实现工作正常。但是在多级标题的情况下会有一个轻微的 UI 问题。

我该如何解决这个问题。我正在使用免费的 jqgrid。

【问题讨论】：

例如，我不确定您对 2 级以上的一些额外可用空间的意思。此外，我个人很好，很难在这样的多级标题中找到信息。
我说的是共享图像中中间列“2级”上方和最后一列“3级”上方的空间。

标签： jqgrid free-jqgrid

【解决方案1】：

我个人很好很难在这样的多级标题中找到信息。我看不出在“level2”文本上添加可用空间有什么好处，但通常你可以通过在titleText 中使用空字符串来做到这一点。

The demo 显示如下图所示的结果

它使用代码

.jqGrid("setGroupHeaders", {
    useColSpanStyle: true,
    groupHeaders: [
        { startColumnName: "invdate", numberOfColumns: 1, titleText: "level1" },
        { startColumnName: "amount", numberOfColumns: 2, titleText: "level1" },
        { startColumnName: "note", numberOfColumns: 1, titleText: "level1" }
    ]
})
.jqGrid("setGroupHeaders", {
    useColSpanStyle: true,
    groupHeaders: [
        { startColumnName: "invdate", numberOfColumns: 1, titleText: "level2" },
        { startColumnName: "amount", numberOfColumns: 1, titleText: "" },
        { startColumnName: "tax", numberOfColumns: 1, titleText: "" },
        { startColumnName: "note", numberOfColumns: 1, titleText: "" }
    ]
})
.jqGrid("setGroupHeaders", {
    useColSpanStyle: true,
    groupHeaders: [
        { startColumnName: "amount", numberOfColumns: 1, titleText: "level2" },
        { startColumnName: "tax", numberOfColumns: 1, titleText: "level2" }
    ]
});

【讨论】：

对不起，如果我的问题很明确。但我想删除空格。默认情况下它们会为我显示。
@johndoe：对不起，我不明白你的意思。您可以按照自己的意愿设计标题，使其保持在 HTML <table> 的限制范围内。例如，您可以使某些边框不可见，例如here，并获得与原始图片几乎相同的结果。你应该明白它不再是 jqGrid 的功能。您只有<thead> 的 HTML，您可以根据需要修改它或设置您需要的任何 CSS 样式。没有人会实现青年的具体愿望。你应该自己做。