如何在 jqGrid 4.0 中合并单元格 [英] How to merge cells in jqGrid 4.0

问题描述

我一直在尝试合并" jqGrid 中的单元格，也就是说，我想让特定行的单元格具有 colspan=2(或更多).到目前为止，我已经能够使用列模型中的 cellattr 选项使边框正常工作，如下所示:

I've been trying to "merge" cells in a jqGrid, that is, I want to make cells for specific rows have a colspan=2 (or more). So far I've been able to get the borders to work properly using the cellattr option in the column model with something like this:

colModel = { name: "a", width=50, 
             cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (rowId < 5) { return 'sytle="border-right:0px"'; } },

             name: "b", width=50, 
             cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (rowId < 5) { return 'sytle="border-left:0px"'; } } };

这只是删除了我要合并的单元格的边框(a & b 直到第 5 行).但是，如果我在这些框中的任何一个中添加文本，text-align 显然将无法正常工作，并且如果文本大于 50 像素，则会被截断.

This just removes the border for the cells that I want to merge (a & b up to line 5). But if I add text to any of these boxes text-align will obviously not work properly and the text just gets cut off if it is larger than 50 pixels.

我可以做一些疯狂的事情，通过将所有文本切成两半并将每一半分别添加到右对齐和左对齐下的a"和b"列来进行居中对齐.但是，似乎应该有更好的方法.

I could do some crazy thing where I do center-align by cutting all the text in half and add each half to column "a" and "b" under right-align and left-align respectively. However, there seems like there should be a better way.

推荐答案

我觉得你的问题很有趣，所以向我 +1.

I find your question very interesting, so +1 from me.

在我看来，colspan=2 的使用才是你真正需要的.要在具有 colspan=2 的行中具有相同数量的列，我建议隐藏该行中的下一个 <td> 元素:

It seems to me that the usage of colspan=2 is what you really need. To have the same number of the columns in the rows having colspan=2 I suggest to hide the next <td> element in the row:

{
    name:'a',index:'a', width:50,
    cellattr: function(rowId, tv, rawObject, cm, rdata) {
        if (Number(rowId) < 5) { return ' colspan=2' }
    }
},
{
    name:'b',index:'b', width:50,
    cellattr: function(rowId, tv, rawObject, cm, rdata) {
        if (Number(rowId) < 5) { return ' style="display:none;"' }
    }
}

我只测试了几次实现，但它似乎工作:

I tested the implementation only a few time, but it seems to work:

您可以在这里看到现场演示.

The demo you can see live here.

更新:另一个答案显示了如何使用rowspan jqGrid 中的属性.

UPDATED: Another answer shows how can be used rowspan attribute in jqGrid.

这篇关于如何在 jqGrid 4.0 中合并单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！