zTree 树形控件 ajax动态加载数据

很久没搞过树形控件了，再次接触看官网文档有点没懂，于是在网上找了个代码copy上，但数据是写死的，就想这在用ajax异步取出数据替换，下面是js代码

<SCRIPT type="text/javascript" >

//定义全局ztree数据

    var zNodes;

     /* 初始化ztree数据 */

     function initZtree(){

        $.ajax({

            type: "GET",

            url: "<%=request.getContextPath() %>/articleType/getArticleType",

            dataType: "json",

            async:false,

            success: function(data){

                var str="";

                for(var i =0;i<data.type.length;i++){

                    str += "{id:'"+ data.type[i].id+"', pId:'"+data.type[i].pid+"', name:'"+data.type[i].name+"'},\n";

                   }

                   alert("["+str+"]");

                   zNodes='['+str+']';

                   $("#ztree").val(zNodes);

            }

        });

    }

     $(function(){

         //initZtree();

         alert($("#ztree").val()+"999");

         alert(zNodes);

           zNodess = zNodes;

          alert("8888"+zNodess);

     })

    var zTreeObj,

    setting = {

        view: {

            selectedMulti: false

        },

        async: {

            enable: true,

            url: "<%=request.getContextPath() %>/articleType/getArticleType",

            otherParam: { "id":"1", "name":"test"}

        },

        data: {

            simpleData: {

                enable:true,

                idKey: "id",

                pIdKey: "pId",

                rootPId: ""

            }

        },

        callback: {

            onClick: function(treeId, treeNode) {

                var treeObj = $.fn.zTree.getZTreeObj(treeNode);

                var selectedNode = treeObj.getSelectedNodes()[0];

                $("#txtId").val(selectedNode.id);

                $("#txtAddress").val(selectedNode.name);

            }

        }

    }

    $(document).ready(function(){

        zTreeObj = $.fn.zTree.init($("#tree"), setting,zNodess );

    });

  </SCRIPT>

代码捏有点乱，大概就是想用ajax取出数据，但遇到个问题，取出来的数据拼接成json 不能被识别。

于是又继续看官网demo 和api

找到个基础的动态取数据

<!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" src="../../../js/jquery.ztree.excheck.js"></script>

      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.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>

<h1>异步加载节点数据的树</h1>

<h6>[ 文件路径: core/async.html ]</h6>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

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

    </div>

    <div class="right">

        <ul class="info">

            <li class="title"><h2>1、setting 配置信息说明</h2>

                <ul class="list">

                <li class="highlight_red">使用异步加载，必须设置 setting.async 中的各个属性，详细请参见 API 文档中的相关内容</li>

                </ul>

            </li>

            <li class="title"><h2>2、treeNode 节点数据说明</h2>

                <ul class="list">

                <li>异步加载功能对于 treeNode 节点数据没有特别要求，如果采用简单 JSON 数据，请设置 setting.data.simple 中的属性</li>

                <li>如果异步加载每次都只返回单层的节点数据，那么可以不设置简单 JSON 数据模式</li>

                </ul>

            </li>

            <li class="title"><h2>3、其他说明</h2>

                <ul class="list">

                <li class="highlight_red">观察 autoParam 和 otherParam 请使用 firebug 或 浏览器的开发人员工具</li>

                <li class="highlight_red">此 Demo 只能加载到第 4 级节点（level=3）</li>

                <li class="highlight_red">此 Demo 利用 dataFilter 对节点的 name 进行了修改</li>

                </ul>

            </li>

        </ul>

    </div>

</div>

</BODY>

</HTML>

官网demo

在阅读官网demo的时候不能看到demo的具体js代码这时你需要下载ztree插件在下载好的文件夹里面会有demo的js代码

那个路径就是下载下来的文件夹路径，这也是后面发现才找到的js代码

下面是后面根据demo修改的js代码

<SCRIPT type="text/javascript">

        var setting = {

                view: {

                    selectedMulti: false

                },

            async: {

                enable: true,

                url:"<%=request.getContextPath() %>/Type/Type",

                autoParam:[],

                contentType: "application/json",

                otherParam:{},

                dataFilter: filter //异步获取的数据filter 里面可以进行处理  filter 在下面

            },

            data: {

                simpleData: {

                    enable:true,

                    idKey: "id",

                    pIdKey: "pid",

                    rootPId: ""

                }

            },//个人理解加上这个就能按级别显示，其中的id pid 对应你的实体类

            callback: {

                onClick: function(treeId, treeNode) {

                    var treeObj = $.fn.zTree.getZTreeObj(treeNode);

                    var selectedNode = treeObj.getSelectedNodes()[0];

                    $("#txtId").val(selectedNode.id);

                    $("#txtAddress").val(selectedNode.name);

                }

            } //这里是节点点击事件

        };

        function filter(treeId, parentNode, childNodes) {

            alert(childNodes.length);

            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>

其异步获取后台数据要转json

@RequestMapping(value="getArticleType")

    //@ResponseBody

    public void getArticleType(HttpServletRequest request ,HttpServletResponse response,ArticleTypeQuery query){

        response.setContentType("text/html");

        response.setCharacterEncoding("UTF-8");

        Map<String, Object> map=new HashMap<String,Object>();

        try {

            List<ArticleType> list=articleTypeMapper.selectArticleTypeByQuery(query);

            map.put("type", list);

             response.getWriter().print(JSON.toJSONString(list));

        } catch (Exception e) {

            // TODO: handle exception

        }

        //return map;

    }

上面注释的修改过的，也就是最开始的写法，用map返回的json数据，不知道不能识别是不是因为这个原因，后面就改了不用map了

结合上面两段代码，能正常显示出树形来了！

对了还的有页面代码

页头记得加上ztree相关的js和css哟

<div class="zTreeDemoBackground left">

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

    </div>

ztree官网：http://www.treejs.cn/

zTree 树形控件 ajax动态加载数据的更多相关文章

Ajax动态加载数据
前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...
C#自定义控件、用户控件、动态加载菜单按钮
一.效果图,动态加载5个菜单按钮: 二.实现方法 1.创建用户控件 2.在用户控件拖入toolStrip 3.进入用户控件的Lood事件,这里自动添加5个选 ToolStripMenuItem,后期 ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...
easyui Tree树形控件的异步加载
Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...
Jquery chosen动态设置值实例介绍 select Ajax动态加载数据设置chosen和获取他们选中的值
for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...
Winform DevExpress控件库（二）使用SplashScreenManager控件定制程序加载页面
SplashScreenManager控件:主要作用是显示在进行耗时操作时的等待界面: 位于工具箱 -> Navigation & Layout(导航栏与布局类控件) 目录下: 在工具 ...
使用SplashScreenManager控件定制程序加载页面
需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中使用SplashScr ...
爬虫——爬取Ajax动态加载网页
常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...
Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

随机推荐

取SQL分组中某几行数据
常用的方法有:子查询.ROW_NUMBER.APPLY,总体感觉还是ROW_NUMBER比较直观 if OBJECT_ID('testGroup') is not null drop table te ...
【转载】使用rman进行坏块修复（ORA-01578、ORA-01110）
[转自]http://blog.itpub.net/21256317/viewspace-1062055/ 使用rman进行坏块修复(ORA-01578.ORA-01110) 2012年的一天,处理的 ...
多线程-CAS原理
背景在JDK1.5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁,锁机制存在以下问题: (1)在多线程竞争中,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题 ...
Atitit.使用引擎加脚本架构的设计使用php,js来开发桌面程序。。
Atitit.使用引擎加脚本架构的设计使用php,js来开发桌面程序.. 1. 引擎加脚本架构跨平台,桌面与web的优势1 2. 架构桌面引擎(java,c#)2 3. php桌面引擎要点2 3. ...
loongson官方PMON使用
目录 [隐藏] 1 PMON使用介绍 1.1 进入PMON控制界面 1.2 Pmon的图形界面 1.3 Pmon的基本命令 1.3.1 Boot and Load 启动与加载内核 1.3.2 MyC ...
zepto,kissy前端框架实现跨域
三.jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理 json ...
nyoj 460 项链（区间dp）
项链时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子, ...
CSS Sprites的概念、原理、适用范围和优缺点
CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
Compiler Error C2872: ambiguous symbol
参考资料:http://blog.csdn.net/greytree/article/details/354530 刚才写的程序报错ERROR C2872(CL.exe)原因很简单 ZThread有定 ...
CSS学习笔记（1）--浮动
总结:浮动只能在脱离文档流的当前位置向上浮动,不能像定位一样到处乱跑. 清除浮动,设置一个类.clear{clear:both;} 1.没有浮动,都独占一行: <!DOCTYPE html> ...

zTree 树形控件 ajax动态加载数据

zTree 树形控件 ajax动态加载数据的更多相关文章

随机推荐

热门专题