jQueryTreeView的使用介绍及其改进.doc

jQuery.TreeView的使用介绍及其改进文章分类:Web前端 TreeView为Xuanye 打造的一款支持 jQuery 1.3+ 的高性能树形菜单插件，插件的开发过程作者在打造基于jQuery的高性能TreeView 一文中有详细介绍，在此本人不再赘述。该插件的特点：1、支持静态的树，即一次性将全部数据加载到客户端。2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。3、支持Checkbox树（静态/异步），用于选择（如选择组织机构，选择数据字典项）等。4、支持节点级联。5、能够承载大数据量，并性能表现优异。6、支持主流浏览器。插件的使用非常简单，下面简述其使用步骤。第一步：装入所需文件 在HTML文档的标识里加入下面代码：Html代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 第二步：添加HTML代码 在HTML文档的标识里加入下面代码：Html代码 1. 第三步：添加JavaScript代码 在HTML文档的标识里加入下面代码：Js代码 1. 2. varo= 3. showcheck:true, 4. /url:/ControlsSample/GetChildData; 5. animate:true, 6. cbiconpath:lib/jquery/plugins/treeview/images/icons/,/checkboxicon的目录位置 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. var o = showcheck: true, /url: /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); ); 插件配置参数 Js代码 1. vardfop= 2. 3. method:POST,/默认采用POST提交数据 4. datatype:json,/数据类型是json 5. url:false,/异步请求的url 6. cbiconpath:images/icons/,/checkboxicon的目录位置 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. ;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） Js代码 1. data: 2. id:1,/ID只能包含英文数字下划线中划线 3. text:node1, 4. value:1, 5. showcheck:false, 6. checkstate:0,/0,1,2 7. hasChildren:true, 8. isexpand:false, 9. complete:false,/是否已加载子节点 10. ChildNodes:/childnodes 11. , 12. . 13. data:id:1, /ID只能包含英文数字下划线中划线text:node 1,value:1,showcheck:false,checkstate:0, /0,1,2hasChildren:true,isexpand:false,complete:false, /是否已加载子节点ChildNodes: / child nodes,. 几个方法 Js代码 1. $(#tree).getTSVs()/获取所有选中的节点的Value数组 2. $(#tree).getTSNs()/获取所有选中的节点的Item数组 3. $(#tree).getTCT()/获取当前节点的Item数组 4. $(#tree).reflash()/刷新节点数据$(#tree).getTSVs() /获取所有选中的节点的Value数组$(#tree).getTSNs() /获取所有选中的节点的Item数组$(#tree).getTCT() / 获取当前节点的Item数组$(#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. .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下使用。Js代码 1. /添加标识的href属性 2. /=修改开始= 3. if(nd.href) 4. ht.push(); 5. else 6. ht.push(); 7. 8. /=修改结束=/ 添加标识的href属性/ = 修改开始 = if (nd.href) ht.push(); else ht.push();/ = 修改结束 = 这样，节点数据增加了一个hre