Question

我正在尝试在当前版本的angular datable（http://l-lin.github.io/angular-datatables/）中使用行分组，但没有得到任何线索如何实现它。我有一个格式为：

的json数据

vm.data=[
   {
     'groupName': 'Match 1',
     'content':[{'id': 1, 'name': abc'}]
   }
]

这就是html的样子：

我不确定这是怎么回事。我在其他问题中发现，有一个建议在$ scope上使用event：dataTableLoaded，但似乎当前版本中没有eventit。有什么建议吗？

Answer 1

我还没有使用过那个版本的数据表，但这对我来说很有用

   $scope.dtOptions = DTOptionsBuilder
   .fromFnPromise(reportService.getReportData($scope.reportInfo,
   $scope.model))
       .withPaginationType('full_numbers')
       .withOption('fnDrawCallback',
           function(oSettings) {
              var api = this.api();
              var rows = api.rows({ page: 'current' }).nodes();
              var last = null;
              api.column(0, { page: 'current' })
              .data()
              .each(function(group, i) {
              if (last !== group) {
                 $(rows)
                 .eq(i)
                 .before(
                 '<tr class="group"><td colspan="5">' + group + '</td></tr>');
                                    last = group;
                                }
                            });
                    })

Answer 2

只需再将一个withOption添加到您的数据表中即可。 columIndex 具有您要进行分组的列的索引。 angular-datatables v0.6.x中这对我有用

.withOption('fnDrawCallback', function (oSettings) {
    var api = this.api();
    var rows = api.rows( {page:'current'} ).nodes();
    var last=null;
    columIndex = 1
    api.column(columIndex, {page:'current'} ).data().each( function ( group, i ) {
        if ( last !== group ) { 
            colspan = Object.keys($scope.dtColumnPermission).length ; 
            $(rows).eq( i ).before(
                '<tr class="groupColumns"><td colspan="'+colspan+'">'+group+'</td></tr>'
            ); 
            last = group;
        }
    } );
})

Answer 3

这对我来说使用 angular-datatables“：” ^ 8.0.0“

drawCallback

this.dtOptions = {
  lengthMenu: [5, 10, 15, 25],
  pageLength: 5,
  ordering: false,
  processing: true,
  searching: false,
  drawCallback(setting) {
    console.log("setting is  ", setting)
    var api = this.api();
    var rows = api.rows({ page: 'current' }).nodes();
    console.log("rows is ", rows);
    var last = null;
    const columIndex = 0;
    api.column(columIndex, { page: 'current' }).data().each(function (group, i) {
      if (last !== group) {

        $(rows).eq(i).before(
          '<tr style="color: crimson !important;background-color: blanchedalmond;" class="groupColumns"><td style="display: none;"></td><td>' + "        " + group + '</td><td></td></tr>'
        );
        last = group;
      }
    });

  }




};

Angular Datatable v0.4.0中的行分组

3 个答案: