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

目录
相关文章
10zTree - 用 zTree 方法异步加载节点数据
10zTree - 用 zTree 方法异步加载节点数据
101 0
|
17天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
5月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
64 0
|
6月前
|
JavaScript
jQuery遍历节点的方法
jQuery遍历节点的方法
37 0
|
6月前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
29 0
11zTree - 用 zTree 方法更新节点数据
11zTree - 用 zTree 方法更新节点数据
84 0
54zTree - 隐藏普通节点
54zTree - 隐藏普通节点
40 0
34zTree - 多棵树之间 的 数据交互
34zTree - 多棵树之间 的 数据交互
35 0
04zTree - 不显示节点图标的树
04zTree - 不显示节点图标的树
113 0