如何使用 RowGroup 显示图像？

Question

我正在使用 RowGrouping 插件，所有行都正确分组，如下所示：

这是我的实现：

HTML

<html>
  <head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  <link href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
  
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
 
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

JS

$(document).ready(function() {
  var collapsedGroups = {};
  var table = $('#example').DataTable({
    ajax: "/ajax/objects.txt",
    order: [[ 2, "desc" ]],
    columns: [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
    ],
    rowGroup: {
      dataSrc: 'office',
      startRender: function ( rows, group ) {
        var collapsed = !!collapsedGroups[group];
        rows.nodes().each(function (r) {
          r.style.display = collapsed ? 'none' : '';
        });
        return $('<tr/>')
          .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
      },
    },
  });
  $('#example tbody tr.group-start').each(function() {
    var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
  });
  table.draw(false);
  $('#example tbody').on('click', 'tr.group-start', function () {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);
  });  
});

这是每个对象的数据结构：

{
    extn: "5421",
    name: "Tiger Nixon",
    office: "Sidney",        
    position: "System Architect",
    salary: "0,800",
    start_date: "2011/04/25",
    country: {
         id: "1",
         flag: "https://media.api-sports.io/flags/au.svg"
    }
}

我试图在城市名称附近显示每位员工所在国家/地区的国旗，但遗憾的是我无法访问当前行。

我尝试使用 rows.data().eq(0)，但这实际上 return 组的所有行。

有人可以帮我吗？

Answer 1

我用这段代码做了一个实验，有点棘手，我解析 rows.data() 并搜索包含标志的正确对象，然后与 group 进行比较参数，相同则显示

  rowGroup: {
        dataSrc: 'office',
        startRender: function(rows, group) {
            let data = rows.data();
            let flag;
            Object.values(data).forEach(function(e, i) {
                if (typeof e == "object") {
                    if (e.hasOwnProperty("country") && e.hasOwnProperty('office')) {
                        if (e.office == group) {
                            flag = e.country.flag
                        }
                    }
                }
            });
            var collapsed = !!collapsedGroups[group];
            rows.nodes().each(function(r) {
                r.style.display = collapsed ? 'none' : '';
            });
            return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')  <img width="20" src=' + flag + ' /></td>')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
        },
    },

Answer 2

您可以在 startRender 函数中访问标志 URL，如下所示：

rows.data().toArray()[0].country.flag

这是可行的，因为 rows 值实际上是一个 Datatables API 实例 - 因此包含您需要的数据。

在我的例子中，我访问了第一行数据 - 并且始终保证至少有一个这样的行 - 否则将不会创建该组。

解决方案的其余部分使用了一些 CSS 使用弹性网格进行定位和对齐。

这是一个演示：

var dataSet = [
    {
    extn: "5421",
    name: "Tiger Nixon",
    office: "Sydney",        
    position: "System Architect",
    salary: "0,800",
    start_date: "2011/04/25",
    country: {
         id: "1",
         flag: "https://media.api-sports.io/flags/au.svg"
    }
}
  ];

$(document).ready(function() {
  var collapsedGroups = {};
  var table = $('#example').DataTable({
    //ajax: "ajax/objects.txt",
    data: dataSet,
    order: [[ 2, "desc" ]],
    columns: [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
    ],
    rowGroup: {
      dataSrc: 'office',
      startRender: function ( rows, group ) {
        var flagUrl = rows.data().toArray()[0].country.flag;
        var collapsed = !!collapsedGroups[group];
        rows.nodes().each(function (r) {
          r.style.display = collapsed ? 'none' : '';
        });
        return $('<tr/>')
          .append('<td colspan="8" style="display: flex; align-items: center;"><span style="padding-right: 10px;">' + group + ' (' + rows.count() + ')</span><img src="' + flagUrl + '" width="40" height="50">' + '</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
      },
    },
  });
  $('#example tbody tr.group-start').each(function() {
    var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
  });
  table.draw(false);
  $('#example tbody').on('click', 'tr.group-start', function () {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);
  });  
});

<!doctype html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  <link href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.js"></script>
  
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
 
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>



</body>
</html>

这是一个演示：

如何使用 RowGroup 显示图像？

How to display an image using RowGroup?

javascript

jquery

datatables