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

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

该插件的特点：

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

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

第一步：装入所需文件 

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

Html代码  

1. <!-- // 引入 jQuery框架文件 -->  
2. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
3.   
4. <!-- // 引入 jQuery.TreeView 树形菜单插件文件 -->  
5. <script type="text/javascript" src="treeview/js/jQuery.tree.js"></script>  
6. <link rel="stylesheet" type="text/css" href="treeview/jQuery.tree.css"/>  
7.   
8. <!-- // 装入树形菜单数据 -->  
9. <script type="text/javascript" src="tree2.js"></script>  

 

第二步：添加HTML代码 

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

Html代码  

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

 

第三步：添加JavaScript代码 

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

Js代码  

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

 

插件配置参数

Js代码  

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

 

节点数据格式（JSON）

Js代码  

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

 

几个方法

Js代码  

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

 

插件改进 

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

Css代码  

1.  .bbit-tree-node-cb  
2.  {  
3.      height:16px;  
4.      vertical-align:bottom; margin-bottom:1px; margin-top:-1px; /*==== 为了让check图片与文字垂直对齐而增加 ======*/  
5.  }  
6.   
7.  .bbit-tree-node-el {  
8.     line-height:18px;  
9.     cursor:default;  
10.    /* cursor:pointer;*/  
11.    vertical-align:bottom; margin-bottom:-1px; margin-top:3px; /*==== 为了让图片与文字垂直对齐而增加 ======*/  
12. }  
13.   
14. /* 增加一个根图片样式 */  
15. .root .bbit-tree-node-icon{  
16.     background-image:url(images/tree/root.gif);  
17. }  

 

css修改前的效果：

 
css修改后的效果：

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

Js代码  

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

 

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

增加了href属性后的节点数据样式（JSON）：

Js代码  

1. [{  
2.     "id":"3372",  
3.     "text":"东城区",  
4.     "value":"110101",  
5.     "href":"http://127.0.0.1",  
6.     "showcheck":true,  
7.     "isexpand":false,  
8.     "checkstate":0,  
9.     "hasChildren":false,  
10.     "ChildNodes":null,  
11.     "complete":false  
12. }]