ztree4异步前端代码

最新推荐文章于 2024-09-19 19:39:48 发布

weixin_34273479

最新推荐文章于 2024-09-19 19:39:48 发布

阅读量74

点赞数

文章标签： json 前端 javascript ViewUI

原文链接：https://my.oschina.net/iioschina/blog/731915

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<HTML>

<HEAD>
    <TITLE> ztree test asyn </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.exedit.js"></script>
   <SCRIPT type="text/javascript">



   /**
    *异步加载的意思就是：当点击展开树节点时，
    *才去请求后台action返回点击节点的子节点
    *数据并加载。
    */
    var setting = {
        data : {
            key:{
                name:"name"
            },
            simpleData : {
                enable : true,
                idKey:"id",
                pIdKey:"parentId",
            }
        },
        async : {
            enable : true,
            url : "/testP/asyncTree.do",
            autoParam : ["id"],
            dataFilter : filter
        //异步返回后经过Filter
        },
        callback : {
            // beforeAsync: zTreeBeforeAsync, // 异步加载事件之前得到相应信息
            OnAsyncSuccess : zTreeOnAsyncSuccess,//异步加载成功的fun
            aOnAsyncError : zTreeOnAsyncError, //加载错误的fun
            beforeClick : beforeClick,//捕获单击节点之前的事件回调函数
            onRightClick: zTreeOnRightClick
        }
    };
    //treeId是treeDemo,异步加载完之后走这个方法
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes)
            return null;
        for(var i=0;i<childNodes.length;i++){

              childNodes[i].name= childNodes[i].name+"like";
        }
        return childNodes;
    }
    //点击节点触发事件
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            alert("请选择父节点");
            return false;
        } else {
            return true;
        }
    }
    //异步加载失败走该方法
    function zTreeOnAsyncError(event, treeId, treeNode) {
        alert("异步加载失败!");
    }
    //异步加载成功走该方法
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
       alert("ok");
    }
    //右击事件
    function zTreeOnRightClick(){
        alert("left click ...");
    }
    /**********当你点击父节点是,会异步访问controller,把id传过去*************/
    var zNodes = [];
    $(document).ready(function() {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });


   </SCRIPT>
</HEAD>

<BODY>
<h1>异步加载节点数据的树</h1>
<h6>test Tree</h6>
<div class="content_wrap">
   <div class="zTreeDemoBackground left">
       <ul id="treeDemo" class="ztree"></ul>
   </div>
   test ztree.....
</div>
</BODY>
</HTML>

转载于:https://my.oschina.net/iioschina/blog/731915