ZTree简单粗暴快速使用

是什么：功能强大的树形插件

tip：查资料时痛苦的地方，自我改进

1、没有注明版本：版本不对应导致配置完成后各种无端的错误，特别难查找，运气好能找到英文的解答

2、没有写明配置文件，或者不指明配置文件每一段配置的作用

3、自学的过程其实是最好的写博客过程，因为自己会知道哪些地方自己看文档不明白的！

4、以上全是废话，我就是写给自己看的

====================================================================================

1、引入样式文件，自己配置路径，验证！（插件中，附下载链接）

    <link href="tree/ztree_v3-master/css/demo.css" rel="stylesheet" type="text/css">
    <link href="tree/ztree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

2、引入js文件（自己配置路径，验证！）

    <!-- js -->
    <script src="tree//js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="tree//ztree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="tree//ztree_v3-master/js/jquery.ztree.exedit.js" type="text/javascript"></script>

 

使用与配置：

<script>
    //总属性设置============================================
    var setting = {
            
            view: {
                selectedMulti: false
            },
            edit: {
                drag: {
                    autoExpandTrigger:false,
                    isMove:false,
                    isCopy:false,
                    prev: false,//允许向上拖动
                    next: false,//不允许向下拖动
                    inner: false//允许当前层次内进行拖动
                },
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false
            },
            data: {
                keep: {
                    parent:true,
                    leaf:true
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {//绑定的事件函数
                onClick:onLigth,//点击事件     》》》function    zTreeOnClick()
                beforeRename: zTreeBeforeRename,
                beforeRemove: beforeRemove,
                onRemove: remove  
            }    
            
        };

//显示数据=======================================================

jason格式字符串数据，后台组织好

var zNodes =
    [{ id:1, pId:0, name:"默认分组", open:true},
    { id:11, pId:1, name:"XXX 有限公司"},
    { id:12, pId:1, name:"叶子节点 1-2"},
    { id:13, pId:1, name:"叶子节点 1-3"},
    ];

</script>
 
 //初始化===========================================================        

//初始化数据
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化树
        $("#addParent").bind("click", {isParent:true}, add);//新增分组
        //$("#addLeaf").bind("click", {isParent:false}, add);//增加叶子节点
        $("#edit").bind("click", edit);//修改分组
        $("#remove").bind("click", remove);//删除分组
    });
//初始化绑定的onclick函数（第一个function最后一个代码块），页面载入会执行（应该）
    function onLigth(treeId,event, treeNode) {//初始化函数，treeNode中包含所有json中的数据
        //console.log(treeNode)
        var isRegister= treeNode.isRegister;
     
        var contactID= treeNode.contactID;
      
    }

 

 

 

jsp：

<div class="circle_main">
    <div class="circle_box">
        <div class="title"><h1>应收账款科目</h1><a class="guanbi" onClick="circleGuan()">×</a></div>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="right">
                <ul class="info">
                    <li>
                        <ul class="list">
                            <li>
                                <a class="cur" id="beYellow"  title="请选择应收账款科目">登记应收款</a>
                                <a onclick="kuMu()">新增科目</a>
                                <a onclick="circleGuan()">取消</a>
                             </li>
                         </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

====================================================================================

最后，根据浏览器报错补全缺少的空方法

怎么用：

下载地址：http://download.csdn.net/download/the_fool_/10046659