首页 > 解决方案 > DataTables 的 TreeGrid 扩展 - 如何在名称后添加复选框?

问题描述

我找到了 DataTables 的 TreeGrid 扩展:

https://homfen.github.io/dataTables.treeGrid.js/

但我想在名称和位置之间添加一列而不是名称,并在此处放置一个复选框。

但是,当我这样做时,例如:

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) {
                        return item.name;
                    }
                },
                {
                    defaultContent: '',
                     target: 2,
                    className: 'select-checkbox',
                    function(item) {
                        return item;
                    }
                },
                {
                    title: 'Position',
                    target: 3,
                    data: function (item) {
                        return item.position;
                    }
                },
                {
                    title: 'Office',
                    target: 4,
                    data: function (item) {
                        return item.office;
                    }
                },
                {
                    title: 'Extn.',
                    target: 5,
                    data: function (item) {
                        return item.extn;
                    }
                },
                {
                    title: 'Start date',
                    target: 6,
                    data: function (item) {
                        return item.start;
                    }
                },
                {
                    title: 'Salary',
                    target:7,
                    data: function (item) {
                        return item.salary;
                    }
                }
            ];

我得到一个额外的列,但是在检查父级时没有选择所有底层子行。

有人知道如何建立这个吗?

编辑:更新了列定义。

当我添加一个按钮来读取选定的值时,例如:

dom: 'Bfrtip',
        select:true,
        buttons: [
            {
                text: 'Alert selected',
                action: function(e, dt, node, config) {
                    var data = table.rows({
                        selected: true
                    }).data().toArray();
                    
                    var i;
                    var text = new Array();
                    for (i = 0; i < data.length; i++) {
                    text.push(data[i].name);
                       
                    }
                    alert("you selected: " + text.join(",") );
                    console.log("text---" + text.join(","));

                }
            }
        ]

该表开始表现异常,例如:基础子项的选择停止。

标签: datatables

解决方案


推荐阅读