09zTree - 异步加载节点数据的树

简介: 09zTree - 异步加载节点数据的树

效果图

image.png

代码

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - Async</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-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      async: {
        enable: true,
        url:"../asyncData/getNodes.php",
        autoParam:["id", "name=n", "level=lv"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        dataFilter: filter
      }
    };
    function filter(treeId, parentNode, childNodes) {
      if (!childNodes) return null;
      for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
      }
      return childNodes;
    }
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting);
    });
    //-->
  </SCRIPT>
</HEAD>
<BODY>
    <ul id="treeDemo" class="ztree"></ul>
</BODY>
</HTML>

异步加载的方法:

image.png

目录
相关文章
|
8月前
10zTree - 用 zTree 方法异步加载节点数据
10zTree - 用 zTree 方法异步加载节点数据
60 0
|
17天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
12 0
|
17天前
|
JavaScript 前端开发 安全
对 Dom 树的理解
对 Dom 树的理解
34 0
|
7月前
zTree节点增删改
zTree节点增删改
|
7月前
ztree实现节点事件
ztree实现节点事件
|
8月前
ztree 设置父节点不能选择
ztree 设置父节点不能选择
77 0
|
8月前
11zTree - 用 zTree 方法更新节点数据
11zTree - 用 zTree 方法更新节点数据
49 0
|
8月前
54zTree - 隐藏普通节点
54zTree - 隐藏普通节点
21 0
|
8月前
34zTree - 多棵树之间 的 数据交互
34zTree - 多棵树之间 的 数据交互
23 0
|
8月前
04zTree - 不显示节点图标的树
04zTree - 不显示节点图标的树
56 0