jQuery zTree树插件动态加载实例代码

需求：

　　由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载（增量加载）的方式，以便数据加载，提高体验度。

解决断路：

　　这应该好办，只要找到父节点单击事件，然后进行数据加载，结点附加即可。时间紧，任务重，完全没给研究的时间。只能硬着上，随便搜索一个“zTree动态加载”，出是出来了，标题也对，可里面的代码根本没找到添加结点一说……一边是需求催，一边是没找到类似。无语……对啊，不是有官网，于是把所有api函数浏览一遍，终于发现一个叫addNodes的函数。喜！

控件代码

<div class="UserTree">
  <ul id="treeDemo" class="ztree"></ul>
</div>

脚本代码（实现结点展开、单击事件时进行动态加载）：

<script>
  var zNodes;
  var zTree;
  $(function () {
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      async: false,
      success: function (data) {
        zNodes = data;
      },
      error: function (data) {
        alert("error");
      }
    });
    zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
    zTree.expandAll(false);
  })
  var setting = {
    view: {
      nameIsHTML: true
    },
    data: {
      simpleData: {
        enable: true
      },
      keep: {
        parent: true
      }
    },
    open: false,
    callback: {
      onClick: nodeClick,
      onExpand: function (event, treeId, treeNode) {
        addSubNode(treeNode);
      }
    }
  };
  function showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
  };
  function searchM() {
    var username = $("#txtName").val()
  }
  function nodeClick(event, treeId, treeNode, clickFlag) {
    addSubNode(treeNode);
  }
  function addSubNode(treeNode) {
    if (!treeNode.isParent) return;
    var s = treeNode.children;
    if (s != undefined)
      return;
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      data: { userId: treeNode.id },
      async: true,
      success: function (data) {
        zTree.addNodes(treeNode, data);
      },
      error: function (data) {
        alert("error");
      }
    });
  }
</script>

其中后端请求：

　　其中数据来源为请求路径“/User/NextLeve?userId=xxx”，为返回如下结构的列表的json数据（即List<UserNode>类型的.ToJson()数据），其中userId可为，为空时默认取当前登录用户：

public class UserNode
{
  public long id { get; set; }
  public long pId { get; set; }
  public string name { get; set; }
  public bool open { get; set; }
  public bool isParent { get; set; }
  public string icon { get; set; }
}

效果，则实现为单击父结点/展开父结点时动态加载子结点。

以上所述是小编给大家介绍的jQuery zTree树插件动态加载效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JQuery ztree带筛选、异步加载实例讲解

    JQuery ztree带筛选、异步加载实例讲解

    本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

  • jquery zTree异步加载、模糊搜索简单实例分享

    本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

  • jQuery zTree加载树形菜单功能

    由于项目中需要设计树形菜单功能,于是百度找相关资料,发现zTree方面的资料不少,觉得挺不错,而且zTree官方也有API文档,介绍的非常详细,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 2.zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 3.采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本

  • jQuery使用zTree插件实现树形菜单和异步加载

    jQuery使用zTree插件实现树形菜单和异步加载

    本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l

  • Jquery zTree 树控件异步加载操作

    Jquery zTree 树控件异步加载操作

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点

  • JQuery ztree 异步加载实例讲解

    JQuery ztree 异步加载实例讲解

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

  • jquery zTree异步加载简单实例分享

    首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"

  • jQuery zTree树插件动态加载实例代码

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没

  • VUE路由动态加载实例代码讲解

    首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维护 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import Test1 from './test1.router.js' import Test2 f

  • Treegrid的动态加载实例代码

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: 1.前端 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <script type="text/javascript"> $(function() { $('#goods_type_treegrid').treegrid({

  • jquery Tab效果和动态加载的简单实例

    一:tab效果显示 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题页</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="js/jquery-1.4.2-

  • jQuery zTree树插件的使用教程

    本文为大家分享了jQuery zTree树插件的使用教程,供大家参考,具体内容如下 一.介绍 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 官网地址 特点: zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.Safari 等浏览器 支持 JSON

  • zTree树形插件异步加载方法详解

    zTree树形插件异步加载方法详解

    本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight

  • Google的跟踪代码 动态加载js代码方法应用

    复制代码 代码如下: <script type="text/javascript"> var _gaq = _gaq || []; //如果变量 _gaq 存在,就等于他自己,否则为一个空数组 _gaq.push(['_setAccount', 'UA-24479793-2']); //是个2维数组 _gaq[0] = array(0=>'_setAccount', 1=>'UA-24479793-2');(设置本跟踪代码所对应的Google帐户) _gaq.p

  • jQuery pager.js 插件动态分页功能实例分析

    本文实例讲述了jQuery pager.js 插件动态分页功能.分享给大家供大家参考,具体如下: pager.js 代码 function Page(opt){ var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{}); if(set.startnum>set.num||set.startnum<1){ set.startnum = 1; } var n = 0,htm = ''; var clickpa

随机推荐