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