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>
目录
相关文章
Echarts线性渐变、径向渐变、纹理填充
Echarts线性渐变、径向渐变、纹理填充
53zTree - 异步加载模式下全部展开
53zTree - 异步加载模式下全部展开
121 1
|
JavaScript 前端开发
若依 自定义实现导入功能
若依 自定义实现导入功能
838 1
|
12月前
|
前端开发 JavaScript
Bootstrap5 消息弹窗(Toasts)1
Bootstrap5 弹窗(Toasts) 是一种轻量级通知组件,适用于页面角落或底部显示临时信息。使用 .toast 类创建,包含 .toast-header 和 .toast-body 分别定义标题和内容。默认关闭状态,通过 .show 显示,利用 data-bs-dismiss=&quot;toast&quot; 关闭。支持通过 JavaScript 初始化和控制显示。
|
SQL Java 数据库连接
成功解决:was not registered for synchronization because synchronization is not active
这篇文章是关于解决Mybatis在同步过程中出现"was not registered for synchronization because synchronization is not active"错误的技术博客。
成功解决:was not registered for synchronization because synchronization is not active
|
IDE Go 开发工具
8-13|Cannot run program "C:\Users\Administrator\AppData\Local\Temp\GoLand\___8go_build__go.exe" (in
8-13|Cannot run program "C:\Users\Administrator\AppData\Local\Temp\GoLand\___8go_build__go.exe" (in
|
监控 安全 调度
JFinal如何实现定时任务
JFinal如何实现定时任务
334 0
|
JavaScript 前端开发 API
JavaScript实现表格排序
JavaScript实现表格排序
189 0
|
JavaScript 前端开发
layui使用实践总结
layui使用实践总结
300 0