10zTree - 用 zTree 方法异步加载节点数据

简介: 10zTree - 用 zTree 方法异步加载节点数据

使用 zTreeObj.reAsyncChildNodes 方法

image.png

Function 参数说明

function 举例

  1. 重新异步加载 zTree
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(null, "refresh");
  1. 重新异步加载当前选中的第一个节点
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
  treeObj.reAsyncChildNodes(nodes[0], "refresh");
}

代码

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - reAsyncChildNodes</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 = {
      view: {
        selectedMulti: false
      },
      async: {
        enable: true,
        url:"../asyncData/getNodes.php",
        autoParam:["id", "name=n", "level=lv"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        dataFilter: filter
      },
      callback: {
        beforeClick: beforeClick,
        beforeAsync: beforeAsync,
        onAsyncError: onAsyncError,
        onAsyncSuccess: onAsyncSuccess
      }
    };
    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;
    }
    function beforeClick(treeId, treeNode) {
      if (!treeNode.isParent) {
        alert("请选择父节点");
        return false;
      } else {
        return true;
      }
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {
      className = (className === "dark" ? "":"dark");
      showLog("[ "+getTime()+" beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
      return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
      showLog("[ "+getTime()+" onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
      showLog("[ "+getTime()+" onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root") );
    }
    function showLog(str) {
      if (!log) log = $("#log");
      log.append("<li class='"+className+"'>"+str+"</li>");
      if(log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
      }
    }
    function getTime() {
      var now= new Date(),
      h=now.getHours(),
      m=now.getMinutes(),
      s=now.getSeconds(),
      ms=now.getMilliseconds();
      return (h+":"+m+":"+s+ " " +ms);
    }
    function refreshNode(e) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      type = e.data.type,
      silent = e.data.silent,
      nodes = zTree.getSelectedNodes();
      if (nodes.length == 0) {
        alert("请先选择一个父节点");
      }
      for (var i=0, l=nodes.length; i<l; i++) {
        zTree.reAsyncChildNodes(nodes[i], type, silent);
        if (!silent) zTree.selectNode(nodes[i]);
      }
    }
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting);
      $("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode);
      $("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode);
      $("#addNode").bind("click", {type:"add", silent:false}, refreshNode);
      $("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode);
    });
    //-->
  </SCRIPT>
</HEAD>
<BODY>
<div class="content_wrap">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</div>
</BODY>
</HTML>
目录
相关文章
|
12月前
|
JSON JavaScript 前端开发
ztree+json,渲染树形菜单
ztree+json,渲染树形菜单
72 1
|
12月前
|
JSON 前端开发 数据格式
ztree+ajax+json请求,实现加载一棵ztree树
ztree+ajax+json请求,实现加载一棵ztree树
68 0
ztree+ajax+json请求,实现加载一棵ztree树
11zTree - 用 zTree 方法更新节点数据
11zTree - 用 zTree 方法更新节点数据
84 0
29zTree - 用 zTree 方法 移动 / 复制节点
29zTree - 用 zTree 方法 移动 / 复制节点
40 0
09zTree - 异步加载节点数据的树
09zTree - 异步加载节点数据的树
30 0
|
JavaScript 前端开发
JS 学习笔记四(DOM) 悬停事件 获取节点
JS 学习笔记四(DOM) 悬停事件 获取节点
60 0
|
JavaScript
JS 学习笔记四(DOM)(节点)
JS 学习笔记四(DOM)(节点)
56 0
|
JSON JavaScript 前端开发
JQuery Ztree 树插件配置与应用小结 1
JQuery Ztree 树插件配置与应用小结
139 0
|
存储 JSON JavaScript
JQuery Ztree 树插件配置与应用小结 2
JQuery Ztree 树插件配置与应用小结
199 0