Question

如何在Jtable中添加页脚行，我正在使用jTable 2.4.0版本的js文件和mvc 4。

参考

Samir你可以使用https://github.com/gbisheimer/jtable/tree/master/lib/extensions中的jquery.jtable.footer.js jtable扩展名。

并为您配置页脚，如下所示

           Balance: {
                    title: 'Balance',
                    width: '70',
                    create:false,
                    edit: false,
                    display: function (data) {
                            return "£ " + data.record.Balance;
                    },
                    footer: function (data) {
                        var total = 0;
                        $.each(data.Records, function (index, record) {
                            total = Number(record.Balance);
                        });
                        return ("£"+total.toFixed(2));
                    }
                }

Answer 1

使用footer.js文件

https://github.com/sheryever/jtable/blob/master/lib/extensions/jquery.jtable.footer.js

查看更多jtable扩展

https://github.com/sheryever/jtable/tree/master/lib/extensions

Answer 2

我已经为我的jtable实现了这个，并遇到了隐藏列和页脚字段没有正确排列的问题。我特意将ID列作为表中的第一列，但将其可见性设置为隐藏在jtable定义中。

我用一些小编辑（一个到类文件和一个到基础jtable文件）克服了这个，我不确定是否可以将其转换为类文件以使其更完整而不会被基础打破课程更新）

修改后的类扩展文件：

_createFooterCellForField: function (fieldName, field) {
        var style = "";
        if(field.visibility == 'hidden') style = ' style="display: none;" ';
        return $('<th class="jtable-column-footer" '+style+'>' +
            '<div class="jtable-column-footer-container"><span class="jtable-column-footer-text"></span></div></th>');
    }

这仍然会将一个页脚表格单元格放入DOM，但如果该列从初始配置中隐藏则隐藏它

修改后的基类文件：

改变了：

.find('>thead >tr >th:nth-child(' + columnIndexInTable + '),>tbody >tr >td:nth-child(' + columnIndexInTable + ')')

成为：

.find('>thead >tr >th:nth-child(' + columnIndexInTable + '),>tbody >tr >td:nth-child(' + columnIndexInTable + '),>tfoot >tr >th:nth-child(' + columnIndexInTable + ')')

如果通过右键单击上下文菜单选择列，则在基类内

两次隐藏/显示页脚单元格以及列的其余部分。这些编辑是在第4500行的_changeColumnVisibilityInternal: function (columnName, visibility) {函数内完成的

同样在上面的示例中，您的总公式略有不正确，应为total += Number(record.Balance);

如何在JTable中添加页脚行

2 个答案: