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>
目录
相关文章
|
Java 数据库连接 数据库
|
消息中间件 存储 监控
ActiveMQ系列: ActiveMQ 的死信队列与消费重试机制
maximumRedeliveryDelay:最大传送延迟,只在 useExponentialBackOff 为 true 时有效(V5.5),假设首次重连间隔为 10ms,倍数为 2,那么第二次重连时间间隔为 20ms,第三次重连时间间隔为 40ms,当重连时间间隔大的最大重连时间间隔时,以后每次重连时间间隔都为最大重连时间间隔。默认为 -1。
1801 0
ActiveMQ系列: ActiveMQ 的死信队列与消费重试机制
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
633 2
|
算法 Unix Linux
tar 解压缩命令总结
tar 解压缩命令总结
3255 5
|
Java API
java date 增加10s后的时间
在 Java 中,要将 `Date` 对象增加 10 秒,可以通过 `Calendar` 类(适用于 Java 8 之前)或 `java.time` 包中的 `LocalDateTime`、`ZonedDateTime` 和 `Instant` 类(Java 8 及以上)实现。使用 `Calendar` 类时,需设置并修改 `Calendar` 实例。而在 `java.time` 包中,可以使用 `plus` 方法结合 `ChronoUnit.SECONDS` 来增加秒数。具体选择取决于是否需要处理时区以及 Java 版本。
585 1
|
网络安全 Windows 容器
5-16|OSError: [WinError 193] %1 不是有效的 Win32 应用程序。
5-16|OSError: [WinError 193] %1 不是有效的 Win32 应用程序。
|
数据可视化 前端开发 大数据
Echarts数据可视化大屏展示页(附源码一键搞定)
Echarts数据可视化大屏展示页(附源码一键搞定)
|
Oracle 安全 Java
JAVA用Mail发送API的方法步骤教程
使用Java和Mail发送API实现自动化邮件发送,提高效率。步骤包括:1. 安装JDK并配置JAVA_HOME,2. 添加JavaMail库(可通过Maven或官网下载)。配置邮件发送涉及邮件服务器地址、端口和认证信息。创建邮件会话、邮件消息对象,然后使用Transport发送。示例代码展示完整流程。注意处理认证失败、连接问题和邮件发送失败等常见问题。
UEditor上传图片成功但回显不出来
UEditor上传图片成功但回显不出来
529 1

热门文章

最新文章