我们经常碰到须要构建树结构展示的情况，我推荐使用zTree和JSON。

比如：

<?

php

/**

 * *  使用zTree和json构建树节点

 * */

$arr = array(

0=>array(

    'id' => 1,

    'pid' => 0,

    'name' => 'china',

    'son' => array(

      array(

        'id' => 3,

        'pid' => 1,

        'name' => 'Beijing',

      ),

       array(

        'id' => 5,

        'pid' => 1,

        'name' => 'Nanjing',

        'son' => array(

          array(

              'id' => 7,

              'pid' => 1,

              'name' => 'Jiangning',

          )

        ),

      ),

    ),

  ),

1=>array(

    'id' => 2,

    'pid' => 0,

    'name' => 'USA',

    'son' => array(

      array(

        'id' => 4,

        'pid' => 2,

        'name' => 'Washington',

      ),

     array(

        'id' => 6,

        'pid' => 2,

        'name' => 'New York',

      ),

    ),

  ),

);

function json_string($arr){

	echo(str_replace("son","children",json_encode($arr)));//zTree中下级用children表示,json_encode仅仅支持utf-8编码

}

json_string($arr);

?

>

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=gb2312">

  <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">

  <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

  <script type="text/javascript" src="../js/jquery.ztree.all-3.5.min.js"></script>

  <script type="text/javascript">

      function zTreeInit() {

          var zTreeObj;

          var setting = {};

          var zNodes = eval(<?php json_string($arr) ?

> );

          zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

      }

      $(document).ready(function () {

          zTreeInit();

      });

  </script>

 </HEAD>

<BODY>

<div>

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

</div>

</BODY>

</HTML>

输出效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnVidTg2MzM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

使用zTree和json构建简单树节点的更多相关文章

  1. 【zTree】zTree展开树节点

    今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...

  2. zTree根据json选中节点，并且设置其他节点不可选

    首先,在适配目录树时,使用checkbox形式,配置代码如下: var settingCatalog = { check:{ enable: true }, data:{ simpleData:{ e ...

  3. 如何自定义修改ztree树节点的图标

    1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...

  4. 【ztree】zTree取消树节点选中的背景色

    点击树节点的时候是ztree给树加了个class:    curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedN ...

  5. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  6. zTree变异篇：如何让同级树节点平铺而非垂直显示

    昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:   通过在浏览器调试模式下观察其同级节点的css为: 这个dis ...

  7. 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  8. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  9. Ztree树节点应用

    树节点增删改查: 前台jsp页面: <% String root=request.getContextPath();//获取项目目录 %> <SCRIPT type="te ...

随机推荐

  1. Linux教程:如何在Linux下进行C++开发？

    Linux是一类Unix计算机操作系统的统称,Linux操作系统的内核的名字也是“Linux”, 在Linux下进行C++开发,需要注意许多问题,比如:减少不必要的编辑动作,减少编辑的时间. Wind ...

  2. C++晋升之std中vector的实现原理（标准模板动态库中矢量的实现原理）

    我们实现的数据结构是为了解决在执行过程中动态的开辟空间使用(比如我们不停的输入,输入的多少我们不确定) 假设当你看到这篇文章的话,就当作是零食咀嚼,营养没有有BUG,能够直接看我博客中文章:CPU对内 ...

  3. Lucene.Net 2.3.1开发介绍 —— 三、索引（二）

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(二) 2.索引中用到的核心类 在Lucene.Net索引开发中,用到的类不多,这些类是索引过程的核心类.其中Analyzer是索引建立的 ...

  4. java.text.MessageFormat格式化字符串时的小技巧

    java.text.MessageFormat格式化字符串时的小技巧 public static void main(String[] args) throws InterruptedExceptio ...

  5. 测试关闭mojo utf-8

    [root@wx03 ~]# cat test.pl use Mojolicious::Lite; use JSON qw/encode_json decode_json/; use Encode; ...

  6. windows线程同步的总结

    一 线程 1)如果你正在编写C/C++代码,决不应该调用CreateThread.相反,应该使用VisualC++运行期库函数_beginthreadex,退出也应该使用_endthreadex.如果 ...

  7. hdu 1665 That Nice Euler Circuit(欧拉定理)

    输入n个点,然后从第一个点开始,依次链接点i->点i+1,最后回到第一点(输入中的点n),求得到的图形将平面分成了多少部分. 根据欧拉定理 v_num + f_num - e_num = 2可知 ...

  8. [Android学习笔记]Android中多线程开发的一些概念

    线程安全: 在多线程的情况下,不会因为线程之间的操作而导致数据错误. 线程同步: 同一个资源,可能在同一时间被多个线程操作,这样会导致数据错误.这是一个现象,也是一个问题,而研究如何解决此类问题的相关 ...

  9. c#2解决c#1中的问题之用泛型实现参数化类型

    为什么需要泛型 你手中还有c#1的代码吗?数一数其中的强制转换有多少,特别是那些大量使用集合的代码.几乎每次使用foreach都需要隐式的强制转换.使用那些为不同数据类型而设计的类型,就意味着强制转换 ...

  10. Python天天美味(25) - 深入理解yield

    Python天天美味(25) - 深入理解yield - CoderZh - 博客园 Python天天美味(25) - 深入理解yield   yield的英文单词意思是生产,刚接触Python的时候 ...