Ztree使用方法

今天在工作中简单得学习了使用ztree，
记录下来。
使用方法：
1，在页面中引入ztree的类库和样式文件。

<script type="text/javascript" src="/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/scripts/ztree/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" href="/scripts/ztree/zTreeStyle.css"type="text/css"> 

2，在body中放入

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

3，定义配置属性

        var zTree;
        var setting = {
            isSimpleData : true, //数据是否采用简单 Array 格式，默认false
            treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
            treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
            showLine : true, //是否显示节点间的连线
            checkable : true, //每个节点上是否显示 CheckBox
            callback: {
                onClick: leftClick//单击
            }
        };
        var tree = ${departmentTree};//后台传递的Jsontree

4，最后加载Ztree

zTree = $.fn.zTree.init($("#treeDemo"), setting, tree.departmentTree);

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>