`
hegz
  • 浏览: 441280 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

jQuery.TreeView的使用介绍及其改进

阅读更多

TreeView为Xuanye 打造的一款支持 jQuery 1.3+ 的高性能树形菜单插件,插件的开发过程作者在《打造基于jQuery的高性能TreeView 》一文中有详细介绍,在此本人不再赘述。

该插件的特点:

1、支持静态的树,即一次性将全部数据加载到客户端。
2、支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。
3、支持Checkbox树(静态/异步),用于选择(如选择组织机构,选择数据字典项)等。
4、支持节点级联。
5、能够承载大数据量,并性能表现优异。
6、支持主流浏览器。

插件的使用非常简单,下面简述其使用步骤。

第一步:装入所需文件

在HTML文档的<head/>标识里加入下面代码:

<!-- // 引入 jQuery框架文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!-- // 引入 jQuery.TreeView 树形菜单插件文件 -->
<script type="text/javascript" src="treeview/js/jQuery.tree.js"></script>
<link rel="stylesheet" type="text/css" href="treeview/jQuery.tree.css"/>

<!-- // 装入树形菜单数据 -->
<script type="text/javascript" src="tree2.js"></script>
 

第二步:添加HTML代码

在HTML文档的<body/>标识里加入下面代码:

<div id="tree"></div>
 

第三步:添加JavaScript代码

在HTML文档的<head/>标识里加入下面代码:

<script type="text/javascript">
        var o = {
            showcheck: true,
            //url: "http://jscs.cloudapp.net/ControlsSample/GetChildData";
            animate:true,
            cbiconpath: "lib/jquery/plugins/treeview/images/icons/", //checkbox icon的目录位置
            //icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],
            emptyiconpath:"lib/jquery/plugins/treeview/images/s.gif", //checkbxo三态的图片
            theme: "bbit-tree-lines", //bbit-tree-lines, bbit-tree-no-lines, bbit-tree-arrows
            onnodeclick:function(item){alert(item.text);}
        };
        o.data = treedata;
        $("#tree").treeview(o);
    });
</script>
 

插件配置参数

var dfop =
            {
                method: "POST", //默认采用POST提交数据
                datatype: "json", //数据类型是json
                url: false, //异步请求的url
                cbiconpath: "images/icons/", //checkbox icon的目录位置
                icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],
                emptyiconpath:"images/s.gif", //checkbxo三态的图片
                showcheck: false, //是否显示checkbox
                oncheckboxclick: false, //当checkstate状态变化时所触发的事件,但是不会触发因级联选择而引起的变化
                onnodeclick: false, // 触发节点单击事件
                cascadecheck: true, //是否启用级联,默认启用
                data: null, //初始化数据
                clicktoggle: true, //点击节点展开和收缩子节点
                theme: "bbit-tree-arrows" //三种风格备选:bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows
            };
 

节点数据格式(JSON)

data:[{
id:1, //ID只能包含英文数字下划线中划线
text:"node 1",
value:"1",
showcheck:false,
checkstate:0,         //0,1,2
hasChildren:true,
isexpand:false,
complete:false, //是否已加载子节点
ChildNodes:[] // child nodes
},
..........
]
 

几个方法

$("#tree").getTSVs()  //获取所有选中的节点的Value数组
$("#tree").getTSNs()  //获取所有选中的节点的Item数组
$("#tree").getTCT()   // 获取当前节点的Item数组
$("#tree").reflash()  // 刷新节点数据
 

插件改进

修改jQuery.tree.css代码,修正树形数据列表的图片与文字垂直对齐的错位。

 .bbit-tree-node-cb
 {
     height:16px;
     vertical-align:bottom; margin-bottom:1px; margin-top:-1px; /*==== 为了让check图片与文字垂直对齐而增加 ======*/
 }

 .bbit-tree-node-el {
    line-height:18px;
    cursor:default;
   /* cursor:pointer;*/
   vertical-align:bottom; margin-bottom:-1px; margin-top:3px; /*==== 为了让图片与文字垂直对齐而增加 ======*/
}

/* 增加一个根图片样式 */
.root .bbit-tree-node-icon{
    background-image:url(images/tree/root.gif);
}
 

css修改前的效果:

 
css修改后的效果:

 
 
修改jQuery.tree.js代码,以方便在FleaPHP/QeePHP下使用。

// 添加<a/>标识的href属性
// ======= 修改开始 ===========
 if (nd.href) {
     ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='" + nd.href + "'>");
} else {
     ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='javascript:void(0);'>");
}
// =========== 修改结束 ========
 

这样,节点数据增加了一个href属性参数。

增加了href属性后的节点数据样式(JSON):

[{
    "id":"3372",
    "text":"东城区",
    "value":"110101",
    "href":"http://127.0.0.1",
    "showcheck":true,
    "isexpand":false,
    "checkstate":0,
    "hasChildren":false,
    "ChildNodes":null,
    "complete":false
}]
 

 

  • 大小: 8 KB
  • 大小: 7.7 KB
  • treeview.zip (58.7 KB)
  • 描述: 改进版
  • 下载次数: 3569
13
0
分享到:
评论
15 楼 面向对象的猪 2011-10-31  
我用了以后 发现你这个方案只适合固定的 一次性的 就比如说读取城市信息

如果是4、5层深度的  那构造json 是会非常麻烦的
treeview 在这方面不太行 推荐梅花树
14 楼 njlhrong 2011-10-13  
菜单的展开和收缩怎么实现
13 楼 rqx110 2011-09-15  
你好,我在请求webservice获取到的值是:
{"d":"[{"id":"1","text":"erew123","value":"","ChildNodes":[{"id":"5","text":"12345test","value":"","ChildNodes":[{"id":"2","text":"192.168.4.201 <b><font color='#1F497D'>(5)</font></b>","value":"192.168.4.201","ChildNodes":[{"id":"2","text":"EMS","href":"","ChildNodes":null},{"id":"3","text":"FTX","href":"","ChildNodes":null},{"id":"4","text":"FTX","href":"","ChildNodes":null},{"id":"5","text":"RRX","href":"","ChildNodes":null},{"id":"6","text":"Power Supply","href":"","ChildNodes":null}]}]}]},{"id":"36","text":"test","value":"","ChildNodes":[{"id":"37","text":"test681230000","value":"","ChildNodes":[{"id":"44","text":"192.168.4.150 <b><font color='#1F497D'>(0)</font></b>","value":"192.168.4.150","ChildNodes":null},{"id":"45","text":"192.168.4.152 <b><font color='#1F497D'>(0)</font></b>","value":"192.168.4.152","ChildNodes":null},{"id":"47","text":"192.168.4.153 <b><font color='#1F497D'>(0)</font></b>","value":"192.168.4.153","ChildNodes":null},{"id":"51","text":"192.168.4.154 <b><font color='#1F497D'>(0)</font></b>","value":"192.168.4.154","ChildNodes":null}]}]}]"}

请问这个格式有错误吗,为什么树形目录一直不会显示? 谢谢
12 楼 apple863 2011-01-26  
博主,你好,正好应要求修改节点选中后的样式。我目前无法在CSS表内添加一个新样式,然后用addClass这个方法添加;

目前我用到的方法是在treeview生成后的回调函数内,写上这几句jquery代码修改选中节点的样式,不知道博主有没有更好的办法,例如新加css样式,然后addClass就好。以下是傻办法代码

$("#org_tree").find("span").css("color","black").css("font-weight","normal");
                         $(this).css("font-weight","bold");
                         $(this).css("color","blue");
11 楼 hegz 2010-10-22  
avseq 写道
請問資料格式只能是JSON嗎?如果我要傳一個javascript的array或其他格式的話可以嗎

传XML也可以啊,只是处理数据不方便。
10 楼 avseq 2010-10-12  
請問資料格式只能是JSON嗎?如果我要傳一個javascript的array或其他格式的話可以嗎
9 楼 haitaoyj0606 2010-09-25  
haitaoyj0606 写道
写的不错,但是代码下载下来之后,运行不了啊。能不能给一个完整的代码示例啊。要能运行的那种,我是初学者,这对我很重要,也可以发我信箱里面。hnhaitao@163.com

好了,你的代码里面没有引用jQuery代码库,我自己加上了,呵呵!
8 楼 haitaoyj0606 2010-09-25  
写的不错,但是代码下载下来之后,运行不了啊。能不能给一个完整的代码示例啊。要能运行的那种,我是初学者,这对我很重要,也可以发我信箱里面。hnhaitao@163.com
7 楼 hegz 2010-07-22  
top3372 写道
请教一下 我json返回的格式是[{complete:true,hasChildren:false,id:"1",isexpand:false,showcheck:false,text:"1",value:"1"},{complete:true,hasChildren:false,id:"2",isexpand:false,showcheck:false,text:"2",value:"2"}]
但通过url读取树,总是出现
"error occur!"

在jQuery 1.4.2下,JSON数据格式要求很严格,键名与键值必须加引号,除了true或false布尔值外。
举例说明:

[{"complete":true,"hasChildren":false,id:"1","isexpand":false,"showcheck":false,"text":"1","value":"1"},{"complete":true,"hasChildren":false,"id":"2","isexpand":false,"showcheck":false,"text":"2","value":"2"}]
6 楼 top3372 2010-07-21  
请教一下 我json返回的格式是[{complete:true,hasChildren:false,id:"1",isexpand:false,showcheck:false,text:"1",value:"1"},{complete:true,hasChildren:false,id:"2",isexpand:false,showcheck:false,text:"2",value:"2"}]
但通过url读取树,总是出现
"error occur!"
5 楼 RPException 2010-06-25  
强大
4 楼 hegz 2010-06-09  
renwolang521 写道
hegz 写道
修正树形数据列表的图片与文字垂直对齐的错位。

你修正后,仔细看确实 “图片与文字垂直对齐”,真是厉害,这也能发现。
但是也有个问题,修正后 两个div 之间有一丝间隙 尤其是 节点展开后,看线就断裂了,而原因就在你加的这个css 上。

这是设置了margin的副作用,反正都是虚线,对视觉影响不大,呵呵。。。
3 楼 renwolang521 2010-06-09  
hegz 写道
修正树形数据列表的图片与文字垂直对齐的错位。

你修正后,仔细看确实 “图片与文字垂直对齐”,真是厉害,这也能发现。
但是也有个问题,修正后 两个div 之间有一丝间隙 尤其是 节点展开后,看线就断裂了,而原因就在你加的这个css 上。
2 楼 zengbaijian 2010-06-04  
楼主,能给份你截图设计出来的页面代码给我吗,就是树形菜单有个按钮可以控制显示和隐藏的那个,蓝色风格,有导航菜单和主窗口的那个,包括相关图片和JS代码,不胜感激,如果可以麻烦发我邮箱523260276@qq.com,十分感谢。
1 楼 xuanye 2010-04-17  
so cool

相关推荐

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...

    jquery.treeview的实现

    &lt;link rel="stylesheet" href="css/jquery.treeview.css"&gt; &lt;script src="js/jquery.treeview.js"&gt; ``` 在HTML结构中,创建一个无序列表(`&lt;ul&gt;`),用于展示树状结构。每个列表项(`&lt;li&gt;`)代表树的一个节点,子...

    jquery.treeview.rar

    2. 解压缩后,将其中的“jquery.treeview.js”和对应的CSS文件(如“jquery.treeview.css”)放置到你的项目文件夹。 3. 在HTML文件中引用jQuery库和treeview的JS及CSS文件。 三、基本使用 1. HTML结构:创建一个...

    jQuery-Treeview.js v1.4 官方版.rar

    在项目中使用jQuery Treeview.js 首先需要引入jQuery库和treeview插件的JS及CSS文件。你可以通过在HTML文件头部添加以下代码来完成这一步: ```html &lt;link rel="stylesheet" href="jquery.treeview.css" type="text...

    jquery.treeview.js树控件

    本文将详细介绍jQuery Treeview.js的使用方法、核心功能以及在实际项目中的应用技巧。 一、jQuery Treeview.js介绍 jQuery Treeview.js是基于jQuery框架的一个轻量级插件,它能够将HTML列表转换成具有折叠和展开...

    jquery.treeview

    在 `jquery.treeview.js` 示例中,我们可能会看到如何应用和定制这个插件的各种功能。 首先,让我们了解 `jQuery.treeview` 的基本用法。要启用此插件,你需要在页面中引入 jQuery 库以及 `treeview.js` 文件。假设...

    jsontree (jquery.treeview.js) jQuery插件版

    在`treeview1.0`压缩包中,可能包含一个默认的样式文件,例如`treeview.css`。确保将其引入到HTML文档中,以保证树状视图的正常显示: ```html &lt;link rel="stylesheet" href="treeview1.0/treeview.css"&gt; ``` ### ...

    jquery.treeview.zip

    2. 接着,下载jQuery Treeview插件文件,包括CSS样式表(如`jquery.treeview.css`)和JavaScript文件(如`jquery.treeview.js`)。本例中的压缩包包含这两个文件。 3. 在HTML文件中,将CSS文件链接到`&lt;head&gt;`部分,...

    jquery treeview demo

    本文将深入探讨jQuery Treeview的使用方法及其在实际应用中的示例。 首先,jQuery Treeview主要用于构建可交互的目录结构或菜单系统,它可以轻松地将HTML列表转换为具有展开/折叠功能的树形视图。这在处理诸如文件...

    Jquery.Treeview+Jquery UI制作Web文件预览

    在本文中,我们将深入探讨如何使用Jquery.Treeview和Jquery UI来创建一个Web文件预览功能。这两个JavaScript库在Web开发中广泛用于增强用户体验,尤其是处理文件管理和展示。让我们一起详细了解一下它们的工作原理和...

    jquery.treeview用到的包

    首先,`jquery.treeview.css`是jQuery Treeview的核心样式文件。它定义了树节点的各种样式,如展开/折叠按钮、节点间的层次间距、选中状态等。通过调整这些样式,我们可以自定义树形视图的外观,使其与网站的整体...

    jquery treeview树控件.zip

    &lt;link rel="stylesheet" href="jquery.treeview.css"&gt; &lt;script src="jquery.js"&gt; &lt;script src="jquery.treeview.js"&gt; ``` 接着,你可以对 HTML 结构进行标记,添加必要的类名以指示树形结构: ```html &lt;li&gt;&lt;a ...

    jquery treeview async

    &lt;link rel="stylesheet" href="jquery.treeview.css"&gt; &lt;script src="jquery.js"&gt; &lt;script src="jquerytreeview.js"&gt; ``` 接着,你可以创建一个基础的HTML结构来表示树形菜单,比如: ```html &lt;ul id="treeview"&gt; ...

    jQuery插件TreeView异步加载树

    以下是一个简单的示例,展示了如何使用jQuery和TreeView插件实现异步加载: ```javascript $("#treeview").treeview({ data: [], // 初始化时为空 collapseIcon: "fa fa-caret-right", expandIcon: "fa fa-caret...

    Jquery TreeView 树形插件

    在项目中使用jQuery TreeView,首先需要确保已引入jQuery库。接着,将`jquery.tree.css`和`jQuery.tree.old.css`这两个CSS文件引入到HTML文档的`&lt;head&gt;`部分,它们分别提供了样式支持和旧版本的样式。同时,将`js`...

    为jQuery.Treeview添加右键菜单的实现代码

    1. 引入必要的jQuery库和插件:需要引入jquery.treeview.min.js树插件和jquery.contextmenu.r2.js右键菜单插件。 2. 准备JSON格式的数据源:可以使用AJAX方法动态从服务器获取数据,也可以直接定义在页面中。 3. ...

Global site tag (gtag.js) - Google Analytics