如何在 JQuery 数据表中添加 Rowspan

Posted

技术标签:

【中文标题】如何在 JQuery 数据表中添加 Rowspan【英文标题】:How to add Rowspan in JQuery datatables 【发布时间】:2015-11-12 08:24:15 【问题描述】:

我正在使用 Jquery 数据表来构建一个表。 我的要求如下

这不是静态表,我们使用 json 数据渲染它。 我在这里,使用“aoColumns”动态呈现行。 有没有办法使用 rowspan 以便可以跨越单元格(1,2,David,Alex)。 数据表支持这种表吗?

【问题讨论】:

不支持表体中的行跨度。 【参考方案1】:

Datatables 不支持这种开箱即用的分组。 但是,在许多情况下,有一个可用的插件。

它称为 RowsGroup,位于此处:Datatables Forums。还包括live example。

如果您将本示例中的 JS 部分更改为以下内容,您将在输出窗口中显示您想要的输出。

$(document).ready( function () 
  var data = [
    ['1', 'David', 'Maths', '80'],
    ['1', 'David', 'Physics', '90'],
    ['1', 'David', 'Computers', '70'],
    ['2', 'Alex', 'Maths', '80'],
    ['2', 'Alex', 'Physics', '70'],
    ['2', 'Alex', 'Computers', '90'],
  ];
  var table = $('#example').DataTable(
    columns: [
        
            name: 'first',
            title: 'ID',
        ,
        
            name: 'second',
            title: 'Name',
        ,
        
            title: 'Subject',
        , 
        
            title: 'Marks',
        ,
    ],
    data: data,
    rowsGroup: [
      'first:name',
      'second:name'
    ],
    pageLength: '20',
    );
 );

这是结果的截图:

【讨论】:

我用过这个。 rowspan 有效,但分页中断。知道如何解决这个问题吗? 是的,分页在我的情况下也不起作用。每当我点击第二页时,它什么都不做,而是在第一页本身。有什么想法吗?【参考方案2】:

我尝试了RowsGroup plugin,但它只是通过劫持 DataTables 排序机制来实现这一点。如果您告诉它对给定的列进行分组,那么它对您所做的基本上就是对您无法关闭的该列应用排序。所以,如果你想按另一列排序,你不能。这在我的应用程序中不起作用。

相反,这是一个可让您实现此结果的配方的工作小提琴:

https://jsfiddle.net/bwDialogs/fscaos2n

基本思想是将所有多行数据扁平化为一行。第 2、3 等行中的内容作为隐藏的 <script> 模板标签存储在第一行中。

它通过使用 DataTables 的 drawCallback 函数在 DataTables 呈现 DOM 后对其进行操作,而不会因为必须尝试解析 rowspan 单元格内容而混淆 DataTables。

由于这会在 DataTables 发挥作用后修改 DOM,因此即使有分页、搜索和排序,您的多行部分也会粘在一起。

干杯。

【讨论】:

谢谢,它就像魅力一样......这就是我所需要的,因为我的一个列需要分组,但它对于每一行都有相同的“html”内容,不能使用 RowGroup 应用扩展或者我不能使用它哈哈 :( 无论如何,谢谢! 很棒的东西。还没有找到比这个更好的答案。谢谢!【参考方案3】:

添加以下代码并根据您的要求进行修改

$(window).on("load",function()            
            MakeRows();
            addRowspan();
            $(".paginate_button").on("click", function() 
                MakeRows();
                addRowspan();
            );
        );

        function MakeRows() 
            var tmp_tbl = $("#dashboardDetails");
            var _l = tmp_tbl.find("tr");
            var _td = "",_t_td = "", old_txt = "",_t_txt = ""; _tr_count = 1;_tr_countadd = 1;
            for(i = 0;i< _l.length; i ++) 
                _t_td = tmp_tbl.find("tr").eq(i).find("td").eq(0).find("span");
                _t_txt = $(_t_td).text();
                _t_txt = _t_txt.replace(/\//,"_");_t_txt = _t_txt.replace(/\//,"_");

                if (_t_txt.length > 0) 
                    if(_t_txt != old_txt) 
                        if($(_l).eq(i).hasClass(_t_txt) == false) 
                            _tr_count = 1;_tr_countadd = 1;
                            $(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i);
                        
                        old_txt = _t_txt;
                     else 
                        _tr_count = _tr_count + 1;
                        if (_tr_countadd == 1) 
                            $(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
                                .addClass("hiddenClass").addClass("maintr").attr("trcount", _tr_count).attr("addedtrcount", "maintr");                            
                            _tr_countadd = _tr_countadd + 1;
                         else 
                            $(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
                                .addClass("hiddenClass").attr("trcount", _tr_count)
                        
                    
                
                _t_td = "";
            
        

        function addRowspan() 
            var t_txt = "";
            var _alltrmain = $(".maintr");
            var _h_td = ["0","10","11","12","13"];
            for (i = 0; i <= _alltrmain.length; i ++) 
                for (j = 0; j <= _h_td.length; j ++) 
                    t_txt = $(_alltrmain).eq(i).attr("trcount");
                    $(_alltrmain).eq(i).prev().find("td").eq(_h_td[j]).attr("rowspan", t_txt);
                
            
        

【讨论】:

您至少可以 (1) 解释代码的工作原理和方式,以及 (2) 重构它以使其可读。像这样“修改”代码并不容易。 修改?你在开玩笑吗? 我只看到一个随机文本,有时看起来像代码:S javascript 好像中风了

以上是关于如何在 JQuery 数据表中添加 Rowspan的主要内容,如果未能解决你的问题,请参考以下文章

在 jquery 中使用 html 的 rowspan_problem

jQuery:通过搜索输入隐藏表格行,解决 td rowspan 和 colspan

使用 jquery 将行跨度添加到每行的第一个 td

如何在 HTML 表格中使用 colspan 和 rowspan?

使用 rowspan 悬停在 td 上时出现问题

具有 Rowspan 悬停和斑马效果的表格