个人中心
gpt4 book ai didi

json - 动态地将节点添加到 Bootstrap TreeView

转载 作者：行者123 更新时间：2023-12-04 21:32:49 26 4
gpt4 key购买 nike

我目前有一个巨大的 JSON 文件(超过 15k 行，大小可能会增加)，我想用它构建一个 Bootstrap TreeView 。添加所有节点会使页面加载变得非常缓慢，因此我计划创建一个服务来获取所选节点的 JSON 并相应地填充 TreeView 。这就是我现在所拥有的。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Tree View</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="./TreeView_files/bootstrap-treeview.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Tree View - DOM Tree</h1>
        <br/>
        <div class="row">
            <div class="col-sm-12">
                <label for="treeview"></label>
                <div id="treeview"/>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="./TreeView_files/bootstrap-treeview.js"></script>
    <script type="text/javascript">

        function buildDomTree() {
            var tree = [
            {
                text: "Parent 1",
                nodes: [
                {
                    text: "Child 1",
                    nodes: [
                    {
                        text: "Grandchild 1"
                    },
                    {
                        text: "Grandchild 2"
                    }
                    ]
                },
                {
                    text: "Child 2"
                }
                ]
            },
            {
                text: "Parent 2"
            },
            {
                text: "Parent 3"
            },
            {
                text: "Parent 4"
            },
            {
                text: "Parent 5"
            }
            ];
            return tree;
        }

        $(function() {

            var options = {
                bootstrap2: false, 
                showTags: true,
                levels: 5,
                data: buildDomTree()
            };

            $('#treeview').treeview(options);
        });
    </script>
</body>

Treeview 可以深入 4 级，我想在每次单击节点时获取下一级 JSON。所以，如果我点击“Parent 5”，它应该会弹出子节点。
我不知道如何动态添加节点。任何帮助将非常感激。

最佳答案

应要求回答:我已经找到了一种方法来做到这一点，尽管它的效率有点低。我所做的是，我保持所有展开节点的状态，当我点击一个节点展开它时，我发出一个 HTTP 请求，将新节点添加到旧节点，重绘整个树并重新展开所有先前扩展的节点。我知道这是低效的，但这是我能找到的唯一方法，而无需深入了解细节并基本上自己重新创建整个树(这只是一个美化的递归应用程序)。

这是我发布问题时使用的代码。显然还有改进的余地。

var expandedNodes = [];
var tree = [];

$(function()
{
    $.post("http://localhost:8000/getLevel1", function( data ) 
    {
        var JSObject = JSON.parse(data);

        for (j in JSObject)
            tree.push(JSObject[j]);

        createTree();
    });
});

function createTree(){

    var options = {
        bootstrap2: false, 
        showTags: true,
        levels: 0,
        data: tree,
        expandIcon: 'fa fa-chevron-right',
        collapseIcon: 'fa fa-chevron-down',
        onNodeExpanded: nodeExpand,
        onNodeCollapsed: nodeCollapse,
        onNodeSelected: nodeSelect,
        onNodeUnselected: nodeUnselect
    }
    $('#treeview').treeview(options);
    for (node in expandedNodes)
        $('#treeview').treeview('expandNode', [ expandedNodes[node], { levels: 0, silent: true } ]);
    $('#treeview').treeview('expandNode', 0, { silent: true } );
};


function nodeExpand(event, data)
{
    expandedNodes.push(data.nodeId);
    var requestObject = []
    requestObject.push(data.text);

    var parent, dummy = data;
    while ((parent = $('#treeview').treeview('getParent', dummy.nodeId))["nodeId"] != undefined)
        {
        requestObject.push(parent.text);
        dummy = parent;
    }

    $.post("http://localhost:8000/getNode?param=" + JSON.stringify(requestObject), function(retVal) 
    {
        var JSObject = JSON.parse(retVal);
        var node = findNode(requestObject);
        node.nodes = JSObject;
        createTree();
    });
}

function nodeCollapse(event, data)
{
    var index = expandedNodes.indexOf(data.nodeId);
    if (index > -1) 
        expandedNodes.splice(index, 1);
}

function nodeSelect(event, data)
{
    if (data.state.expanded == true)
        $('#treeview').treeview('collapseNode', data.nodeId);
    else
        $('#treeview').treeview('expandNode', data.nodeId);
    //$('#treeview').treeview('unselectNode', [ data.nodeId, { silent: true } ]);
}

function nodeUnselect(event, data)
{
}

function findNode(array)
{
    var searchIn = tree; //array
    var lastFound = tree;
    for (var i = array.length - 1; i >= 0; i--)
        {
        var obj = searchInObject(searchIn, array[i]);
        searchIn = obj.nodes;
        lastFound = obj;
    }

    return lastFound;
}

function searchInObject(objectArray, string)
{
    for (var index in objectArray)
        if (objectArray[index].text == string)
            return objectArray[index];
}

$(document).ready(function () {
    var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;
    hamburger_cross();
    $('#wrapper').toggleClass('toggled');

    trigger.click(function () {
        hamburger_cross();      
    });

    function hamburger_cross() {

        if (isClosed == true) {          
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
            $('#open_arrow').removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
        } else {   
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
            $('#open_arrow').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-left');
        }
    }

    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');

    });  
});

兴趣点将是 nodeExpand和 createTree方法。

关于json - 动态地将节点添加到 Bootstrap TreeView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47012366/

26 4 0
文章推荐： sql - 是否有可能在 YQL 中获得两个结果集的交集或差异？
文章推荐： spring-boot - Gradle:Spring Boot 依赖管理插件中的访问版本声明
文章推荐： react-native - react 本地Google日历
文章推荐： azure - 从 Azure APIM 策略中动态调用多个后端终结点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com