关于Jquery和Ztree的应用和总结

关于Jquery和Ztree的应用和总结

树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。

Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰,EXTtree、E3tree功能不全。

ZTree是一个依靠 jQuery 实现的多功能 “树插件”,支持选择框等显示,动态更改图标,提供多种事件响应回调,而且异步数据功能强大。

示例如下:

  1. 添加相关CSS和js库

    <head>
    <meta charset="utf-8" />
        //添加相关的ztree的css
    <link rel="stylesheet" href="../plugins/jQueryZtree/demo.css" />
    <link rel="stylesheet" href="../plugins/jQueryZtree/zTreeStyle.css" />
    //添加相关的jquery和ztree的js库
    <script src="../plugins/jQueryZtree/jquery-1.4.4.min.js"></script>
    <script src="../plugins/jQueryZtree/jquery.ztree.core-3.5.js"></script>
    <script src="../plugins/jQueryZtree/jquery.ztree.excheck-3.5.min.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onCheck: onCheck
                }
            };
    
        function filter(node) {   //过滤器直选中2级节点累加
            return (node.checked == true);
        }
    
        function onCheck(e, treeId, treeNode) {
            var pNode = treeNode;
            var pNodePath = "";
            while(!!pNode){
                pNodePath = "\\"+ pNode.name + pNodePath;
                pNode = pNode.getParentNode();
            }
            alert(pNodePath);
            /*
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo").getNodesByFilter(filter);
    
            for(var i = 0,len = zTreeObj.length; i < len; i++){
                alert(zTreeObj[i].name);
            }
            */
        }       
    
        var zNodes =[
            { name:"父节点1 - 展开", open:true,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},
            { name:"父节点2 - 折叠",
                children: [
                    { name:"父节点21 - 展开", open:true,
                        children: [
                            { name:"叶子节点211"},
                            { name:"叶子节点212"},
                            { name:"叶子节点213"},
                            { name:"叶子节点214"}
                        ]},
                    { name:"父节点22 - 折叠",
                        children: [
                            { name:"叶子节点221"},
                            { name:"叶子节点222"},
                            { name:"叶子节点223"},
                            { name:"叶子节点224"}
                        ]},
                    { name:"父节点23 - 折叠",
                        children: [
                            { name:"叶子节点231"},
                            { name:"叶子节点232"},
                            { name:"叶子节点233"},
                            { name:"叶子节点234"}
                        ]}
                ]},
            { name:"父节点3 - 没有子节点", isParent:true}
    
        ];
    
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo")
                //配置ztree同时选中父节点和子节点
            zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
        });
        //-->
        </SCRIPT>
    </head>
    <body>
       <div class="content_wrap">
            <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    </body>
  2. 注意在head中的JavaScript标签,标签里面要加上<!--//-->,否则部分JavaScript可能无法执行,比如普通for循环就不能执行

    <SCRIPT type="text/javascript">
    <!--
        for(var i = 0; i < 3; i++){
            alert(i);
        }
    //-->
    </SCRIPT>

关于Jquery和Ztree的应用和总结

上一篇:HTML 头部


下一篇:HTML学习9