- 浏览: 436313 次
- 性别:
- 来自: 茂名
文章分类
最新评论
-
zenmshuo:
不错不错,总结的很详细,不知道这个控件和FlexGrid比起来 ...
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
文章里太多错误了,容易误导新手
jQuery EasyUI教程之datagrid应用(三) -
我是你们的爹:
...
jQuery EasyUI教程之datagrid应用(一) -
zhehen123:
你傻啊,json_decode后面跟一个参数就可以转成普通数组 ...
如何将PHP对象数组转换成普通数组? -
lai3221:
hegz,为什么做了没有任何效果呢?
jQuery EasyUI教程之datagrid应用(二)
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 }]
评论
15 楼
面向对象的猪
2011-10-31
我用了以后 发现你这个方案只适合固定的 一次性的 就比如说读取城市信息
如果是4、5层深度的 那构造json 是会非常麻烦的
treeview 在这方面不太行 推荐梅花树
如果是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}]}]}]"}
请问这个格式有错误吗,为什么树形目录一直不会显示? 谢谢
{"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就好。以下是傻办法代码
目前我用到的方法是在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!"
但通过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!"
但通过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 EasyUI教程之datagrid应用(三)
2014-03-18 09:29 96641jQuery EasyUI教程之datagrid应用(三) ... -
jQuery EasyUI教程之datagrid应用(二)
2014-03-06 16:02 10612jQuery EasyUI教程之datagrid应用(二) ... -
jQuery EasyUI教程之datagrid应用(一)
2014-03-06 15:38 11685jQuery EasyUI教程之datagrid应用(一) ... -
用jQuery屏蔽掉按回车键时提交表单
2011-04-02 15:51 5333默认情况下,在表单输入框里按回车将会提交表单,但有时需要屏蔽掉 ... -
zxxbox jQuery弹出框插件
2010-10-22 23:22 1794新版无图片版zxxbox jQuery弹出框插件 by zh ... -
Ajax Upload多文件上传插件翻译及中文演示
2010-05-31 20:41 1131链接地址:http://www.zhangxinxu.com/ ... -
JQuery UI之Dialog对话框应用
2010-05-31 19:48 7554文章来源:http://lwlfree.cn/?p=208 ... -
Jquery UI dialog 详解
2010-05-31 19:27 2713文章来源:http://xufish.blogbus.com/ ... -
jQuery UI 1.7 中文文档
2010-05-31 19:15 2702UI 1.7.x 中文文档:http://jqueryui.n ... -
Colorize - jQuery表格插件
2010-05-07 15:13 2108Colorize是一个用来增加HT ... -
jQuery实现布局高宽自适应
2010-04-21 11:26 4652在页面布局(layout)时经常是上左右的框架布局并且需要宽、 ... -
jQuery.Form插件介绍
2010-04-07 23:19 5685一、前言 jQuery From插件是一个优秀的A ... -
jQuery源码查看器
2010-04-02 00:50 1038可以查看 jquery 1.2.6/1.3.2/1.4版本的每 ... -
jQuery png背景透明插件
2010-04-01 23:46 4253该插件不仅支持IE5/IE6/IE7下img标签的png背景透 ... -
jQuery 1.4 小阅兵
2010-04-01 08:25 1146该文简单整理了jQuery1.4改版后的变化,并指出了在开发过 ... -
jQuery 1.4 发布:15个新特性实例精讲
2010-03-31 23:45 1006jQuery 1.4 最近发布了 。 超乎大家的预期,这次并 ... -
jQuery.FlexiGrid使用总结
2010-03-30 10:06 18976经过对FlexiGrid的大量使用,及时不时琢磨下其代码,对她 ... -
数据表格Flexigrid在FleaPHP下的使用方法介绍
2010-03-29 23:33 2874目前,网络上能够找得到的、基于jQuery 框架 的、功能 ... -
jQuery插件开发
2010-03-29 20:38 727jQuery插件开发。 -
jQuery 1.2.6源码分析(pdf)
2010-03-29 20:35 2204jQuery源代码分析。
相关推荐
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
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,做一个资源备份
jquery.treeview.js树控件的应用
jquery.treeview.zipjquery.treeview.zip
jquery.treeview .js demo(转)
jquery-treeview.js 是一个免费开源的jQuery目录树插件,它可用于MVC开发,关于asp.net mvc 的使用,请参照《MVC引用教程》,docx格式的图文教程
欢迎大家下载使用 并提出宝贵意见............
NULL 博文链接:https://firezhfox.iteye.com/blog/1735456
jquery treeview demo
jquery.treeview用到的包,包括CSS文件及JS文件,可以做成相当漂亮的树。
Jquery.Treeview+Jquery UI制作Web文件预览 http://blog.csdn.net/a497785609/article/details/19284137
先上图: jquery.treeview 数据通过JSON...(jquery.treeview.min.js 树插件 和 jquery.contextmenu.r2.js 右键菜单插件) 在线演示 http://demo.jb51.net/js/jQuery.Treeview/demo.html打包下载 jQuery_Treeview.rar
我建议在使用 jquery.treeview 之前阅读 jquery.observable 的手册。入门让我们用 2 个根节点创建一个简单的树视图,没有别的: [removed]// we create on observable data structurevar model = $.observable({...
使用时只要在页面中引入jquery.js、jquery.cookie.js、jquery.treeview.js(树形菜单的方法)、 jquery.treeview.css即可。同时保证jquery.treeview.css文件和images文件夹的相对位置,在同一目录下即可
jQuery treeview树形结构应用 ... jquery.treeview.css 引入必备js jquery-3.0.0.js jquery.treeview.js 编写页面treeview_jQuery.html <!DOCTYPE html> <html lang="en"> <head>
使用java + servlet实现jquery treeview async动态加载树菜单