选择框中的无限制级的目录树如何写？

绚彩幽兰 2018-11-29 05:00:57

...全文

382 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

wz_307 2018-12-03

打赏
举报

引用 1 楼風灬雲的回复:

可以利用函数的递归，处理好数据就可以实现，下面的代码以jquery为例，只是大概实现这样的效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box .child{
            padding-left:20px;
        }
    </style>
</head>
<div id="box"></div>
<body>
<script src="../../js/jquery@2.2.4.js"></script>
<script>
    $(function(){
        let treeNode=[{
            name:"treeNode1",
            child:[{
                name:"treeNode2",
                child:[{
                    name:"treeNode3",
                    child:[]
                }]
            },{
                name:"treeNode2",
                child:[{
                    name:"treeNode3",
                    child:[]
                }]
            }]
        }]
        function createNode(arr,dom){
            arr.forEach(e=>{
               let child= $("<details class='child'></details>");
                child.append($(`<div>${e.name}</div>`))
                if(e.child.length){
                    let child2=$("<details class='child'></details>");
                    child.append(child2)
                    createNode(e.child,child2)
                }
                dom.append(child)
            })
        }
        createNode(treeNode,$("#box"))
    })
</script>
</body>
</html>

动图厉害！ #3 说的ztree还是很方便的

winzond 2018-12-03

打赏
举报

var setting = {

    callback: {

        onClick: zTreeOnClick

    },

    view: {

        dblClickExpand: false

    }

};

var menuJSON = JSON.parse(result);

var zNodes = new Array();

formatMenuJSON(menuJSON.MenuP, zNodes);    //这是我自定义的一个将返回值转换成ztree需要的格式的函数

var zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

function zTreeOnClick(event, treeId, treeNode) {

    if (treeNode.dataurl) alert(treeNode.dataurl);    //dataurl是自定义的一个节点属性

    //你可以判断它是否包含isparent属性，有这个属性的表示含有子节点，没有的，就是叶子节点

    else {

        var treeObj = $.fn.zTree.getZTreeObj("ztree");

        treeObj.expandNode(treeNode);

    }

};

就这么几条语句就搞定了，自己编写不是不可以，但是对于细节调试太费时间了，一个小的不理想，要调试很久，甚至可能重写大量代码

winzond 2018-12-03

打赏
举报

引用 5 楼绚彩幽兰的回复:

点击左边，右边的内容怎么关联？？

用ztree，有回调函数，几条语句就完成了

風灬雲 2018-12-03

打赏
举报

引用 5 楼绚彩幽兰的回复:

点击左边，右边的内容怎么关联？？

在数据里面加一个唯一标识，比如id，动态生成的时候绑定点击事件，点击的时候通过ajax请求局部刷新就可以了，

绚彩幽兰 2018-12-03

打赏
举报

点击左边，右边的内容怎么关联？？

mengke.me 2018-12-01

打赏
举报

楼上的答案很棒了

winzond 2018-12-01

打赏
举报

http://www.treejs.cn/v3/main.php#_zTreeInfo

風灬雲 2018-11-29

打赏
举报

可以利用函数的递归，处理好数据就可以实现，下面的代码以jquery为例，只是大概实现这样的效果



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box .child{

            padding-left:20px;

        }

    </style>

</head>

<div id="box"></div>

<body>

<script src="../../js/jquery@2.2.4.js"></script>

<script>

    $(function(){

        let treeNode=[{

            name:"treeNode1",

            child:[{

                name:"treeNode2",

                child:[{

                    name:"treeNode3",

                    child:[]

                }]

            },{

                name:"treeNode2",

                child:[{

                    name:"treeNode3",

                    child:[]

                }]

            }]

        }]

        function createNode(arr,dom){

            arr.forEach(e=>{

               let child= $("<details class='child'></details>");

                child.append($(`<div>${e.name}</div>`))

                if(e.child.length){

                    let child2=$("<details class='child'></details>");

                    child.append(child2)

                    createNode(e.child,child2)

                }

                dom.append(child)

            })

        }

        createNode(treeNode,$("#box"))

    })

</script>

</body>

</html>