zoukankan      html  css  js  c++  java
  • jquery 插件ztree的应用简单的树(tree)

     首先在这分享一下ztreeapi地址:http://www.baby666.cn/v3/api.php。如果本文中有些不明白的地方可以去查看api

        我先介绍要构建一个tree所需js文件:query-1.4.4.min.js、 query.ztree.core-3.1.js、 jquery.ztree.excheck-3.1.js这些文件可以去网上下载。

             好,有了这些js脚本,那么我们就要开始代码了,首先我们先来一个简单的例子,形成一个简单的tree,看代码如下           

    复制代码
         var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            var zNodes =[
                { id:'root', pId:0, name:"root"},
                { id:'1', pId:'root', name:"1"},
                { id:'11', pId:'1', name:'11'},
                { id:'2', pId:'root', name:"2"},
                { id:'22', pId:'2', name:"22"}
            ];    
            $(document).ready(function(){
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
    复制代码

        上面的形成的tree效果是这样的

              

        现在让我们简单解释一下js代码,先来看这个行代码:$.fn.zTree.init($("#treeDemo"), setting, zNodes);这是句话就是初始化tree,其中需要三个参数,参数一$("#treeDemo"),这是指定要把形成的tree现在那个div里,参数二 setting,其作用是设置tree的一些属性,参数三zNodes,当然这是树所需要的节点,即是个json对象。

        好了,我就先setting这个参数,剩下其他的大家一看就明白了。看代码          

    复制代码
         var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
    复制代码

          其中的check:是设置是否要显示复选框。Data:是设置节点的数据模式,这里我们用的简单数据模式即[{id:’1’,pId:’0’,name:”1”},[{id:’2’,pId:’1’,name:”2”},…]setting,还有很多属性设置,大家请参看api我就不一一介绍了。

    好了简单的tree形成了。

     

     
    标签: ztreejquery ztree
  • 相关阅读:
    最大子数组的求解(包括首尾相接成环)
    学习进度条第五周
    学习进度条第四周
    学习进度条第三周
    软件工程概论作业二
    软件工程个人作业01
    软件工程概论总结
    梦断代码阅读笔记01
    构建之法阅读笔记04
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2458610.html
Copyright © 2011-2022 走看看