专栏首页GIS讲堂web中的树形结构【小结】

web中的树形结构【小结】

最近在做一个项目,是一个b/s架构的,在项目中,用到了树形结构,即如图1所示的结构。

在实现的过程中,因为我们的整个项目是基于Ext js实现的,所以首先考虑的是用Ext js的Tree来实现,但是在后来做的过程中发现,由于IE在处理异步并发方面有点问题,导致显示出来的树形结构要么就是完全显示不出来,要么就是当树有多级的时候只能显示第一级,下面的子节点显示不完全。基于上面的错误,测试了好多种方法,最后的结果还是无功而返!所以就在考虑用别的树形结构去实现,这自然而然的就想到了jquery的zTree。相比ext js,jquery的特点表现的很明显,至于详细的是那些,本文不做详细说明。具体的下面来详细介绍一下ext tree和jquery下树形结构的实现。

一、Ext js tree

1、Ext js简介

         ExtJS是一个很不错的 Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的 b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写,与后台技术无关的前端 ajax框架。因此,可以把 ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

         ExtJs最开始基于 YUI技术,由开发人员 Jack Slocum开发,通过参考 Java Swing

等机制来组织可视化组件,无论从 UI界面上 CSS样式的应用,到数据解析上的异常处理,

都可算是一款不可多得的 JavaScript客户端技术的精品。

2、 获得与引用Ext js

要使用 ExtJS,那么首先要得到 ExtJS库文件,该框架是一个开源的,可以直接从官方

网站下载,网址http://extjs.com/download。下载下来后,可以看到如图2所示的文件。

说明:

1、adapter:负责将里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext所支持的底层库。

2、build:压缩后的 ext全部源码(里面分类存放)。

3、docs: API帮助文档。

4、exmaples:提供使用 ExtJs技术做出的小实例。

5、resources:Ext UI资源文件目录,如 CSS、图片文件都存放在这里面。

6、source:无压缩 Ext全部的源码(里面分类存放)遵从 Lesser GNU(LGPL)开源的协议。

7、Ext-all.js:压缩后的 Ext全部源码。

8、ext-all-debug.js:无压缩的 Ext全部的源码(用于调试)。

9、ext-core.js:压缩后的 Ext的核心组件,包括 sources/core下的所有类。

10、ext-core-debug.js:无压缩 Ext的核心组件,包括 sources/core下的所有类。

应用 extjs需要在页面中引入 extjs的样式及 extjs库文件,样式文件为resources/css/ext-all.css,extjs的 js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中 ext-base.js表示框架基础库,ext-all.js是 extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把 adapter/ext/ext-base.js换成 dapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。因此,要使用 ExtJS框架的页面中一般包括下面几句:

<linkhref="../ext/resources/css/ext-all.css"rel="stylesheet" type="text/css" />

<scriptsrc="../ext/adapter/ext/ext-base.js"type="text/javascript"></script>

<scriptsrc="../ext/ext-all.js"type="text/javascript"></script>

此外,如果想使用汉语的话还得加入以下代码:

<scriptsrc="../ext/src/locale/ext-lang-zh_CN.js"type="text/javascript"></script>

在 ExtJS库文件及页面内容加载完后,ExtJS会执行 Ext.onReady中指定的函数,因此一般情况下每一个用户的ExtJS应用都是从 Ext.onReady开始的,使用 ExtJS应用程序的代码大致如下:

Ext.onReady(function () {

    Ext.MessageBox.alert("Message","Hello World!");

})

执行的结果如图3(左)所示。

当加入汉语言包之后的结果如图3(右)所示。

3、简单的Ext js树形结构

树控件由 Ext.tree.TreePanel类定义,控件的名称为 treepanel,TreePanel类继承自 Panel面板。在 ExtJS中使用树控件其实非常简单,我们先来看下面的代码:

<scripttype="text/javascript">

     Ext.onReady(function () {

var root = new Ext.tree.TreeNode({

             id:"root",

            text:"树的根"

         });

        root.appendChild(new Ext.tree.TreeNode({

           id:"c1",

           text:"子节点1"

        }));

var tree =new Ext.tree.TreePanel({

            renderTo:"tree",

            root: root,

            width: 100

        });

    });

</script>

代码的第一句使用 new Ext.tree.TreeNode类来创建一个树节点,第二句使用树节点的

root的appendChild方法来往该节点中加入一个子节点,最后直接使用new Ext.tree.TreePanel

来创建一个树面板,要树面板的初始化参数中指定树的 root属性值为前面创建的 root节点,也就是树根节点。接下来在<html></html>标签中引用<div id=”tree”></div>将上面的树形结构显示出来!上面的程序执行效果如下图所示:

4、异步树

Ext JS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,可以用来从服务器端动态加载树的节点信息。我们来看下面的代码:

Ext.onReady(function () {

var Tree = Ext.tree;

var tree = new Ext.tree.TreePanel({

        el:'treepanel',

        autoScroll:true,

        rootVisible:false,

        loader:new Tree.TreeLoader({

            dataUrl:'extTree.ashx'/// <reference path="extTree.ashx" />

        }),

        root:new Ext.tree.AsyncTreeNode({})

    });

    tree.render();

})

extTree.ashx这个 url返回的内容如下:

[

         {"cls":"folder","id":101,"leaf":false,expanded:true,"text":"12336报处理流程","children":[

                   {"cls":"users","id":10101,"leaf":true,"children":null,"text":"12336电话接听"},

                   {"cls":"file","id":10102,"leaf":true,"children":null,"text":"审核"},

                   {"cls":"users","id":10103,"leaf":true,"children":null,"text":"案件登记"},

                   {"cls":"file","id":10104,"leaf":true,"children":null,"text":"领导签字办理意见"},

                   {"cls":"file","id":10105,"leaf":true,"children":null,"text":"转盟市办理"},

                   {"cls":"file","id":10106,"leaf":true,"children":null,"text":"反馈办理情况"},

                   {"cls":"file","id":10107,"leaf":true,"children":null,"text":"盟市调查"},

                   {"cls":"file","id":10108,"leaf":true,"children":null,"text":"反馈办理结果"},

                   {"cls":"file","id":10109,"leaf":true,"children":null,"text":"归档"}

         ]},

                   {"cls":"folder","id":102,"leaf":false,expanded:true,"text":"信访处理流程","children":[

                   {"cls":"users","id":10201,"leaf":true,"children":null,"text":"来访登记"},

                   {"cls":"users","id":10202,"leaf":true,"children":null,"text":"信访案件登记"},

                   {"cls":"file","id":10203,"leaf":true,"children":null,"text":"领导签署办理意见"},

                   {"cls":"file","id":10204,"leaf":true,"children":null,"text":"转盟市办理"},

                   {"cls":"file","id":10205,"leaf":true,"children":null,"text":"反馈办理结果"},

                   {"cls":"file","id":10206,"leaf":true,"children":null,"text":"归档"}

         ]}

运行的结构如下图所示。

只是上面的结果在IE中无法显示出来,这里就涉及到了异步并发以及浏览器的处理能力。为了能够在IE中正常的显示,做了如下的改动:

Ext.onReady(function () {

var Tree = Ext.tree;

var tree = new Ext.tree.TreePanel({

        el:'treepanel',

//autoScroll: true,

        rootVisible:false,

        root:new Ext.tree.AsyncTreeNode({})

    });

    tree.render();

//加载提示

var loading = null;

function showLoading() {

        loading =new Ext.LoadMask(Ext.get(tree.getEl()), { msg: "请等待" });

        loading.show();

    }

function hideLoading() {

        loading.hide();

    }

    showLoading();

    Ext.Ajax.request({

        url:'extTree.ashx', /// <reference path="extTree.ashx" />

        success:function (request) {

var data = Ext.util.JSON.decode(request.responseText);

            tree.getRootNode().appendChild(data);

            tree.getRootNode().expandChildNodes(true);

            hideLoading();

        },

        FAILURE:function () {

            hideLoading();

            Ext.MessageBox.show({

                title:'版块管理',

                msg:'对不起,数据加载异常!',

                buttons: Ext.MessageBox.OK,

                icon: Ext.MessageBox.ERROR

            });

        }

    });

})

这是异步树的生成,至于extTree.ashx的内容,里面可以根据需要从数据库中提取并组成类似与extTree.ashx这个url返回的内容的json格式。此外,调用的url可以是任何后台语言返回的json。

二、jquery zTree

1、jquery zTree简介

zTree是利用JQuery的核心代码,实现一套能完成大部分常用功能的Tree插件,它具有以下特点:

1) 兼容 IE、FireFox、Chrome等浏览器;

2) 在一个页面内可同时生成多个Tree实例;

3) 支持 JSON数据;

4) 支持一次性静态生成和Ajax异步加载两种方式;

5) 支持多种事件响应及反馈;

6) 支持Tree的节点移动、编辑、删除;

7) 支持任意更换皮肤/个性化图标(依靠css);

8) 支持极其灵活的 checkbox或 radio选择功能;

9) 简单的参数配置实现灵活多变的功能。

2、获取和使用jquery zTree

要使用jquery zTree,首先应从网站上获取jquery zTree库文件。下载地址:http://www.ztree.me/v3/main.php,现在的最高版本是3.5.12,下载zTree -- jQuery 树插件。下载下来解压后的文件如下图:

要使用jquery zTree,首先应在你的web页面中加入以下代码:

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

<scriptsrc="js/jquery-1.4.2.js"type="text/javascript"></script>

<scriptsrc="js/jquery.ztree-2.6.min.js"type="text/javascript"></script>

         zTreeStyle.css为jquery zTree为样式文件库,jquery-1.4.2.js为jquery库,jquery.ztree-2.6.min.js则定义了ztree库。

3、简单的zTree

首先,看看下面的代码。

<SCRIPT type="text/javascript">

<!--

         var setting = {

                   data: {

                                     simpleData: {

                                               enable: true

                                     }

                            }

                   };

         var zNodes =[

                   { id:1, pId:0, name:"父节点1 -展开", open:true},

                   { id:11, pId:1, name:"父节点11 -折叠"},

                   { id:111, pId:11, name:"叶子节点111"},

                   { id:112, pId:11, name:"叶子节点112"},

                   { id:113, pId:11, name:"叶子节点113"},

                   { id:114, pId:11, name:"叶子节点114"},

                  { id:12, pId:1, name:"父节点12 -折叠"},

                   { id:121, pId:12, name:"叶子节点121"},

                   { id:122, pId:12, name:"叶子节点122"},

                   { id:123, pId:12, name:"叶子节点123"},

                   { id:124, pId:12, name:"叶子节点124"},

                   { id:13, pId:1, name:"父节点13 -没有子节点", isParent:true},

                   { id:2, pId:0, name:"父节点2 -折叠"},

                   { id:21, pId:2, name:"父节点21 -展开", open:true},

                   { id:211, pId:21, name:"叶子节点211"},

                   { id:212, pId:21, name:"叶子节点212"},

                   { id:213, pId:21, name:"叶子节点213"},

                   { id:214, pId:21, name:"叶子节点214"},

                   { id:22, pId:2, name:"父节点22 -折叠"},

                   { id:221, pId:22, name:"叶子节点221"},

                   { id:222, pId:22, name:"叶子节点222"},

                   { id:223, pId:22, name:"叶子节点223"},

                   { id:224, pId:22, name:"叶子节点224"},

                   { id:23, pId:2, name:"父节点23 -折叠"},

                   { id:231, pId:23, name:"叶子节点231"},

                   { id:232, pId:23, name:"叶子节点232"},

                   { id:233, pId:23, name:"叶子节点233"},

                   { id:234, pId:23, name:"叶子节点234"},

                   { id:3, pId:0, name:"父节点3 -没有子节点", isParent:true}

         ];

         $(document).ready(function(){

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

         });

//-->

</SCRIPT>

上面的代码定义了一颗简单的树形结构,在body标记中加入<ul id="treeDemo" class="ztree"></ul>将上面的树显示出来,显示的结果如下:

说明:

1、setting配置信息说明

1) 普通使用,无必须设置的参数

2) 与显示相关的内容请参考 API文档中 setting.view内的配置信息

3) name、children、title等属性定义更改请参考 API文档中 setting.data.key内的配置信息

2、treeNode节点数据说明

1) 标准的 JSON数据需要嵌套表示节点的父子包含关系

例如:

var nodes = [

         {name: "父节点1", children: [

                   {name: "子节点1"},

                   {name: "子节点2"}

         ]}

];

2) 默认展开的节点,请设置 treeNode.open属性

3) 无子节点的父节点,请设置 treeNode.isParent属性

4、异步树

在实际应用中,这种简单的树形结构是无法满足我们开发需求的,因此,我们需要从数据库中提取数据组成树形结构,这是我们就涉及到了异步树。zTree的异步树实现起来也是相对比较简单的。先看下面的代码:

var zTree;

var setting = {

    checkable:true,

    async:true,

    asyncUrl:"../data/zTree.ashx",

    asyncParam: ["id","name"],

    isSimpleData:true,

    treeNodeKey:"id",

    treeNodeParentKey:"pId",

    expandSpeed:"fast",

    callback: {

        click: zTreeOnClick

    }

};

$(document).ready(function () {

    zTree = $("#tree").zTree(setting,null);

});

asyncUrl返回的内容如下:

[

{id:101,pId:0,name:'12336电话举报处理流程,101',isParent:true,checked:true,open:true},

         {id:10101,pId:101,name:'12336电话接听,10101',isParent:false,checked:true},

         {id:10102,pId:101,name:'审核,10102',isParent:false,checked:false},

         {id:10103,pId:101,name:'案件登记,10103',isParent:false,checked:true},

         {id:10104,pId:101,name:'领导签字办理意见,10104',isParent:false,checked:false},

         {id:10105,pId:101,name:'转盟市办理,10105',isParent:false,checked:false},

         {id:10106,pId:101,name:'反馈办理情况,10106',isParent:false,checked:false},

         {id:10107,pId:101,name:'盟市调查,10107',isParent:false,checked:false},

         {id:10108,pId:101,name:'反馈办理结果,10108',isParent:false,checked:false},

         {id:10109,pId:101,name:'归档,10109',isParent:false,checked:false},

{id:102,pId:0,name:'信访事件处理流程,102',isParent:true,checked:true,open:true},

         {id:10201,pId:102,name:'来访登记,10201',isParent:false,checked:true},

         {id:10202,pId:102,name:'信访案件登记,10202',isParent:false,checked:true},

         {id:10203,pId:102,name:'领导签署办理意见,10203',isParent:false,checked:false},

         {id:10204,pId:102,name:'转盟市办理,10204',isParent:false,checked:false},

         {id:10205,pId:102,name:'反馈办理结果,10205',isParent:false,checked:false},

         {id:10206,pId:102,name:'归档,10206',isParent:false,checked:false}

]

上面树形结构显示出来如下图所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Echart在Openlayers的应用-航班的炫光特效

    在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效...

    lzugis
  • Ol4中晕圈点效果的实现

    结合Openlayers4中的overlay,以图片作为晕圈背景,实现晕圈的点效果。

    lzugis
  • Arcgis for Javascript之统计图的实现

    如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1、初始化状态;2、缩放后的状态;3、点击选中显示详情状态。第一种状态下,加载统计图,一般来说,...

    lzugis
  • nginx+memcached构建页面缓存应用

    nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm、djang...

    后端技术探索
  • PHP 开发学习[2] —— wamp memcache 的安装与扩展(Windows 64)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • memcached在centos下自启动脚本

    将脚本保存在 /etc/init.d/目录下,如/etc/init.d/memcached 执行如下命令

    luxixing
  • Memcached使用小记

    该文章简单记录一下在Windows平台下安装与配置Memcached的方法,Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数...

    写代码的猿
  • Mac OS使用brew安装memcached

    代码改变世界-coding
  • nginx+memcached构建页面缓存应用

    nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm、djang...

    后端技术探索
  • memcached全面剖析

    如今,越来越多的Web应用程序开始使用memcached这个高速的缓存服务器软件。然而,memcached的基础知识远远未能像其他Web技术那样普及,memca...

    张善友

扫码关注云+社区

领取腾讯云代金券