如何在jqGrid footerData中使用colspan?

时间:2014-07-30 07:13:12

标签: javascript html css jqgrid

想要按照以下网格中所述创建jqgrid页脚:

Jqgrid footer row with merged row

我希望jqgrid中的页脚如上面的jqGrid所示。 我设置了footerrow:true$self.jqGrid("footerData", "set", { Total: actualSum });,我可以获得footerRow。 并且如我所提到的那样为此添加标签' Grand Total:'我需要合并两列Amount和Tax .. 那么,怎样才能实现这些目标。 我经历过this。 但是cellattr用于合并细胞。如果有方法使用这些方法,我不能得到这个celtitr。我怎样才能用这个解决我的问题?

我甚至经历了these answer。 在这里,只是右边框有条件地隐藏,但没有使用colsapn。 所以这也没有帮助我解决我的问题。

目前我正在获取这样的页脚: enter image description here

@Oleg你能指导我如何解决这个问题并使用我所描述的colspan创建页脚。

1 个答案:

答案 0 :(得分:4)

也可以在页脚中使用colspan。了解jqGrid在创建网格期间设置页脚一次非常重要,然后如果用户调整列宽,则可以更改页脚上列的宽度。

为了简化代码,我建议在我们使用resizable: false的列上设置colspan属性。 The demo演示了解决方案:

enter image description here

在演示中,我在" Client"中添加了resizable: false属性。和"日期"列("名称"和" invdate"列)并在创建 jqGrid后使用以下代码

var $footRow = $("#list").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");

var $name = $footRow.find('>td[aria-describedby="list_name"]'),
    $invdate = $footRow.find('>td[aria-describedby="list_invdate"]'),
    width2 = $name.width() + $invdate.outerWidth();
$invdate.css("display", "none");
$name.attr("colspan", "2").width(width2);

$footRow.find('>td[aria-describedby="list_tax"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_total"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_closed"]').css("border-right-color", "transparent");
$footRow.find('>td[aria-describedby="list_ship_via"]').css("border-right-color", "transparent");