Question

我正在使用Bootstrap-Treeview。我需要一个带复选框的树。我想按下按钮时以treview格式将所有树发送到服务器。但我无法理解如何从树视图中提取实际数据。

＆＃13;

<html xmlns="http://www.w3.org/1999/html">
<head>
    <link href="bootstrap-treeview.min.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="bootstrap-treeview.min.js"></script>
    <script>
        window.onload = function () {
            var object = [
                {
                    text: "Parent 1",
                    nodes: [
                        {
                            text: "Child 1",
                            nodes: [
                                {
                                    text: "Grandchild 1"
                                },
                            ]
                        },
                        {
                            text: "Child 2"
                        }
                    ]
                },
                {
                    text: "Parent 2"
                },
            ];

            $('#tree').treeview({
                data: object,
                showCheckbox: true,
            })
                    .on('nodeSelected', function (event, data) {
                        console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
                        console.log('object =' + JSON.stringify(object));
                        console.log('tree  =' + JSON.stringify($('#tree').data('treeview')));
                        console.log('tree  2 =' + JSON.stringify($('#tree')));
                        console.log('tree  3 =' + JSON.stringify($('#tree').treeview(true)));
                    });
        };
    </script>

</head>
<body>
<div id="tree">twetwe</div>
</body>
</html>

＆＃13;

页面加载后，我选中任何复选框，然后单击任何项目，以便调用console.log。但是没有关于所有树视图的实际状态的信息。我需要有关所有节点的信息：

 {"text":"Child 2","nodeId":3,"parentId":0,"selectable":true,"state":{"checked":false,"disabled":false,"expanded":false,"selected":true}}

Answer 1

不可能获得树的所有节点，因为树视图对象上没有可用于提供整个树的当前状态的公共方法。即所有节点。

但是，可以通过将treeview.getCollapsed（）和treeview.getExpanded（）方法的输出组合到单个对象中来间接提取数据。

    <html xmlns="http://www.w3.org/1999/html">
<head>
    <link href="bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
    <script src="bootstrap-treeview.min.js"></script>

    <script>
        window.onload = function () {
            var object = [
                {text: "Parent 1", 
                        nodes: [{text: "Child 1", 
                                    nodes: [{text: "Grandchild 1"}] 
                                }, 
                                {text: "Child 2"} 
                        ] 
                }, 
                {text: "Parent 2"} ];

            $('#tree').treeview({
                data: object,
                showCheckbox: true,
            }).on('nodeSelected', function (event, data) {
                    console.log( getAllNodes() );
                    console.log( JSON.stringify(getAllNodes() ));
                    console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
                });
        };

        function getAllNodes(){
            var treeViewObject = $('#tree').data('treeview'),
                allCollapsedNodes = treeViewObject.getCollapsed(),
                allExpandedNodes = treeViewObject.getExpanded(),
                allNodes = allCollapsedNodes.concat(allExpandedNodes);

            return allNodes;
        }


    </script>

</head>
<body>
<div id="tree">twetwe</div>`enter code here`
</body>
</html>

但请注意，结果对象在结构上与作为数据提供给treeview的输入对象不相似。可以重新格式化结果对象以构造类似于输入对象的对象。

从Bootstrap-Treeview获取当前数据（object / json）

1 个答案: