js树插件zTree获取所有选中节点数据的方法

Mr欢先生

2019-04-25

本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下：

由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用zTree在项目中。这个获取所有选中节点数据很简单。看一下API就能看懂了。所以我就直接上代码了。

代码如下：

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Standard Data </TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

    <link rel="stylesheet" href="css/demo.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>

    <!--

      <script type="text/javascript" src="js/jquery.ztree.exedit-3.4.js"></script>-->

    <SCRIPT type="text/javascript">

        <!--

        var setting = {    

            check:{

                enable:true

            },

            /*data: {

                simpleData: {

                    enable: true

                }

            }*/

            data:    {

                simpleData:{

                    enable:true

                }

            },

            callback:{

                onCheck:onCheck

            }

        };

        var zNodes =[

            { id:1, pId:0, name:"随意勾选 1", open:false},

            { id:11, pId:1, name:"随意勾选 1-1", open:true},

            { id:111, pId:11, name:"随意勾选 1-1-1"},

            { id:112, pId:11, name:"随意勾选 1-1-2"},

            { id:12, pId:1, name:"随意勾选 1-2", open:true},

            { id:121, pId:12, name:"随意勾选 1-2-1"},

            { id:122, pId:12, name:"随意勾选 1-2-2"},

            { id:2, pId:0, name:"随意勾选 2",  open:false},

            { id:21, pId:2, name:"随意勾选 2-1"},

            { id:22, pId:2, name:"随意勾选 2-2", open:true},

            { id:221, pId:22, name:"随意勾选 2-2-1"},

            { id:222, pId:22, name:"随意勾选 2-2-2"},

            { id:23, pId:2, name:"随意勾选 2-13"}

        ];


        $(document).ready(function(){

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });

            function onCheck(e,treeId,treeNode){

            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),

            nodes=treeObj.getCheckedNodes(true),

            v="";

            for(var i=0;i<nodes.length;i++){

            v+=nodes[i].name + ",";

            alert(nodes[i].id); //获取选中节点的值

            }

            }

        //-->

    </SCRIPT>

</HEAD>

<BODY>

<div class="zTreeDemoBackground left">

        <ul id="treeDemo" class="ztree"></ul>

    </div>

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

ztree js js代码 javascript 脚本