zTree简单使用（异步加载）

最近使用zTree进行目录的展示，使用了基本的用法，做下记录
可以直接去zTree的官网上进行查看相关的使用说明，不过第一次没太明白，多看几篇介绍基本就可以解决了
http://www.treejs.cn/v3/main.php zTree的官网
API点击相关方法会有相关弹框提示

第一步，下载zTree相关的文件
找到文件中的js，如下三个

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.core.js"></script>
<link href="css/zTreeStyle.css" />

第二步：进行设置setting参数：
使用异步加载方式，callback为获取参数完成时进行的回调操作

var setting = {
        view : {
            showIcon : false,
            fontCss : setFontCss_ztree//进行样式设置的方法
        },
        data : {
            simpleData : {
                enable : true,//是否之用简单数据
                idKey : 'id', //对应json数据中的ID
                pIdKey : 'parentId' //对应json数据中的父ID
            },
        },
        async : {
            enable : true,//是否为异步加载
            url : url,//相关的请求网址
            otherParam : {
                "id" : list//传参数，写法和可以参考API文档
            },
        },
        callback : {//请求成功后回调
            onClick : onclickTree,//点击相关节点触发的事件
            onAsyncSuccess : ztreeOnAsyncSuccess,//异步加载成功后执行的方法
        },
    };
//点击树触发的事件
function onclickTree(event, treeId, treeNode) {
    alert(treeNode.id+"  "+treeNode.name);
)}
//获取树成功后进行的回调操作
function ztreeOnAsyncSuccess(event, treeId, treeNode) {
    //展开树
    expand_ztree(treeId)
}
/**
 * 展开树
 * @param treeId  
 */
   function expand_ztree(treeId){
       var treeObj = $.fn.zTree.getZTreeObj(treeId);
       treeObj.expandAll(true);
   }
/**
 * 设置树节点字体样式
 */
function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
        //根节点
        return {color:"#333", "font-weight":"bold"};
    } else if (treeNode.isParent == false){
        //叶子节点
        return {color:"#660099", "font-weight":"normal"};
    } else {
        //父节点
        return {color:"#333", "font-weight":"normal"};
    }
}

第三步：初始化调用

$(function() {
        $.fn.zTree.init($("#testTree"), setting, null);//对应ul要显示的ID，对应相关的setting，如果异步加载，最后一个参数为空，否则为响应的数据
    })

第四步：html文件引用，在哪里显示zTree

<div id="content">
        <ul id="testTree" class="ztree"></ul>//class中ztree为zTree需要使用的
    </div>

完成
使用的json数据格式如下

{“id”:”123”,”isHidden”:false,”open”:true,”parentId”:”“,”ext1”:”“,”name”:”1xxx”,”uuid”:”xxxxx”,”checked”:false},{“id”:”456”,”isHidden”:false,”open”:true,”parentId”:”123”,”ext1”:”“,”name”:”1.1xxxx”,”uuid”:”xxxxx”,”checked”:false}

open代表是否展开该节点,parentid父子关系对应

简单的异步获取目录结构完成

目录的搜索下一篇继续
http://blog.csdn.net/u013009808/article/details/74726029
欢迎参考

zTree简单使用（异步加载）

猜你喜欢