Question

我正在使用数据表插件datatables-treegrid制作树网格，但它不适用于children数据

＆＃13;

var dataSet = [
            {
                "name":"Test1",
                "children": [
                    {
                        "name": "Test 11 ",
                    }
                ]
            },
            {
                "name":"Test2",
            }
        ];
        var columns = [
            {
                title: '',
                target: 0,
                className: 'treegrid-control',
                data: function (item) {
                    if (item.children) {
                        return '<span>+</span>';
                    }
                    return '';
                }
            },
            {
                title: 'Name',
                target: 1,
                data: function (item,key) {
                    return item.name;
                }
            },
        ];
        $('#example').DataTable({
            'select': {
                'style': 'multi',
                'selector': 'td:not(:first-child)'
            },
            'columns': columns,
            'data':dataSet,
            'treeGrid': {
                'left': 10,
                'expandIcon': '<span>+</span>',
                'collapseIcon': '<span>-</span>'
            }
        });

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.js"></script>



<table id="example">

  </table>

＆＃13;

我正试图做这样的例子：http://homfen.me/dataTables.treeGrid.js/

我在这里缺少什么。

提前致谢。

Answer 1

我尝试了你的代码并让它有点改变。此外，我所包含的图书馆与你的图书馆略有不同（但我认为这不是原因）。

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="dataTables.js" type="text/javascript"></script>
<script src="dataTables.treeGrid.js" type="text/javascript"></script>

包容的顺序至关重要。如果在数据表之前包含treeGrid，它将无法正常工作，并且在您必须包含jquery之前，您已经正确地首先执行了此操作。当我在dataTables之前包含treeGrid时，孩子们不会扩展，所以看起来这可能是你的解决方案。

祝你好运，克里斯

Answer 2

TreeGrid v1.1.0不支持最新版本的DataTables（目前为v1.10.19）。它支持v1.10.13。

但是我对TreeGrid.js进行了一项修复，因此我可以正常运行它。在代码中找到下面的事件处理程序，并按照说明更改行。

// Expand TreeGrid
        dataTable.on('click', 'td.treegrid-control', function (e) {
            if (!$(this).html()) {
                return;
            }
            var tr = $(this).closest('tr[role="row"]');

            // record selected indexes
            var selectedIndexes = [];
            select && (selectedIndexes = dataTable.rows({selected:true}).indexes().toArray());
            var tr = $(this).closest('tr[role="row"]'); //ADD THIS LINE
            var row = dataTable.row(tr); //CHANGE THIS LINE FROM var row = dataTable.row(this); //"this" selects the cell, not the row!!!
            var index = row.index();
            var data = row.data();

datatables-treegrid无法按预期工作

2 个答案: