使用jQuery开发tree插件
2024-10-20 03:50:35
1、插件截图
2、插件使用
首先引入jquery库，然后引入tree.js、tree.css文件，如下：
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/tree.js"></script>
<link rel="stylesheet" href="css/blue/tree.css"/>
3、DOM树
这种方式以HTML代码为基础，不能像JSON或AJAX_JSON方式那样动态加载数据，而且对函数的支持也不是很好，只适合做简单的树状菜单显示，如果是复杂的需求不建议使用这种方式
HTML代码
<div id="tree-demo1" style="margin-bottom: 10px;">
<div id="tree1">
<ul>
<li><a href="#">菜单</a></li>
<li open><a href="#">用户管理</a>
<ul>
<li><a href="#">用户查看</a></li>
<li><a href="#">用户添加</a></li>
<li open><a href="#">权限管理</a>
<ul>
<li><a href="#">权限查看</a></li>
<li><a href="#">权限添加</a></li>
<li><a href="#">分配权限</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">系统管理</a>
<ul>
<li><a href="#">管理员管理</a>
<ul>
<li><a href="#">管理员查看</a></li>
<li><a href="#">管理员添加</a></li>
</ul>
</li>
<li><a href="#">黑名单管理</a></li>
<li><a href="#">日志管理</a></li>
</ul>
</li>
</ul>
</div>
</div>
JS脚本
// 初始化面板
$("#tree-demo1").panel({
title: "DOM树插件",
width: "600",
height: "45%"
});
// 初始化树插件
$("#tree1").tree();
4、JSON树
这种方式需要在初始化插件时传入一个JSON格式的data参数，插件会解析data数据，生成DOM结构，并且可以为节点绑定点击函数，另外对于函数的支持也比DOM方式好很多
HTML代码
<div id="tree-demo2" style="margin-bottom: 10px;">
<div id="tree2"></div>
</div>
JS脚本
以下代码使用data作为数据，为节点绑定点击函数
// 初始化面板
$("#tree-demo2").panel({
title: "JSON树插件",
width: "600",
height: "45%"
});
// 初始化树插件
$("#tree2").tree({
onClick: function(node) {
console.log(node);
alert(node.text);
},
data: [
{
"id": 1,
"text": "菜单"
},
{
"children": [
{
"id": 3,
"text": "用户查看"
},
{
"id": 4,
"text": "用户添加"
},
{
"children": [
{
"id": 6,
"text": "权限查看"
},
{
"id": 7,
"text": "权限添加"
},
{
"id": 8,
"text": "分配权限"
}
],
"id": 5,
"open": false,
"parentId": 2,
"text": "权限管理",
"type": "folder",
"url": ""
}
],
"id": 2,
"open": false,
"parentId": 0,
"text": "用户管理",
"type": "folder",
"url": ""
},
{
"children": [
{
"children": [
{
"id": 11,
"text": "管理员查看"
},
{
"id": 12,
"text": "管理员添加"
}
],
"id": 10,
"open": false,
"parentId": 9,
"text": "管理员管理",
"type": "folder",
"url": ""
},
{
"id": 13,
"text": "黑名单管理"
},
{
"id": 14,
"text": "日志管理"
}
],
"id": 9,
"parentId": 0,
"text": "系统管理",
"type": "folder"
}
]
});
5、AJAX_JSON树
这种方式需要在初始化插件时传入一个url参数，插件会访问这个url获取json数据（和JSON树方式中的data参数一样的格式），然后生成DOM结构，为节点绑定点击函数，而且在点击父级菜单时会访问url（把这个菜单的id作为参数）获取下级菜单后再展开
HTML代码
<div id="tree-demo3"><!-- float: left; margin-left: 10px; -->
<div id="tree3"></div>
</div>
JS脚本
// 初始化面板
$("#tree-demo3").panel({
title: "AJAX_JSON树插件",
width: "600",
height: "45%"
});
// 初始化树插件
$("#tree3").tree({
url: "ajax/ajax_tree.jsp",
onClick: function(node) {
console.log(node);
alert(node.text);
}
});
后台脚本，需要使用json库支持
<%
List<TreeNode> nodes = new ArrayList<TreeNode>(); nodes.add(new TreeNode(1, "菜单", "", "", false, 0));
nodes.add(new TreeNode(2, "用户管理", "", "folder", false, 0));
nodes.add(new TreeNode(3, "用户查看", "", "", false, 2));
nodes.add(new TreeNode(4, "用户添加", "", "", false, 2));
nodes.add(new TreeNode(5, "权限管理", "", "folder", false, 2));
nodes.add(new TreeNode(6, "权限查看", "", "", false, 5));
nodes.add(new TreeNode(7, "权限添加", "", "", false, 5));
nodes.add(new TreeNode(8, "分配权限", "", "", false, 5));
nodes.add(new TreeNode(9, "系统管理", "", "folder", true, 0));
nodes.add(new TreeNode(10, "管理员管理", "", "folder", true, 9));
nodes.add(new TreeNode(11, "管理员查看", "", "", false, 10));
nodes.add(new TreeNode(12, "管理员添加", "", "", false, 10));
nodes.add(new TreeNode(13, "黑名单管理", "", "", false, 9));
nodes.add(new TreeNode(14, "日志管理", "", "", false, 9)); String reqId = request.getParameter("id");
int id = reqId == null || reqId.length() == 0 ? 0 : Integer.parseInt(reqId); List<TreeNode> nodes2 = new ArrayList<TreeNode>();
for(TreeNode n : nodes) {
if(n.getParentId() == id) {
nodes2.add(n);
}
} JSONArray jsonObject = JSONArray.fromObject(nodes2);
out.print(jsonObject.toString());
%>
6、tree插件初始化选项
| 选项 | 类型 | 作用 |
|---|---|---|
| data | Object | JSON格式数据，形如： [ { id: 1, text: "", open: true|false, type: "folder", children: [ { id: 3, text: "", url: "" } ], url: "" }, { id: 2, text: "", url: "" } ] |
| url | string | 获取节点数据的远程地址 |
| onClick | function | 节点点击函数，插件会把被点击的节点对象传给这个函数 |
7、tree插件函数
| 函数名 | 参数 | 功能 | 返回值 | 示例 |
|---|---|---|---|---|
| open | folderNodeId | 打开指定节点，前提是该节点已经存在且是一个folder |
$("#btn1").click(function() {
|
|
| close | folderNodeId | 关闭指定节点，前提是该节点已经存在且是一个folder |
$("#btn3").click(function() {
|
|
| openAll | 打开全部folder节点 |
$("#btn5").click(function() {
|
||
| closeAll | 关闭全部folder节点 |
$("#btn7").click(function() {
|
||
| reload | folderNodeId | 重新加载指定folder节点 |
$("#btn9").click(function() {
|
8、演示和代码
tree.js http://5ijy01.duapp.com/jq-ui/js/tree.js
tree.css http://5ijy01.duapp.com/jq-ui/css/blue/tree.css
Github https://github.com/xuguofeng/jq-ui
演示项目 http://5ijy01.duapp.com/jq-ui/index.html?tab=tree_demo
最新文章
- Java工程师成神之路
- What does "size" in int(size) of MySQL mean?
- 魅族MX3\MX2 在MTP模式下恢复手机误删数据教程
- memcachedd基础
- python中yield用法
- uva216 c++回溯法
- rpmbuild构建包时的宏定义的赋值
- 【数学水题】【TOJ4113】【 Determine X】
- Delete website with command.
- word 一些有用的技巧
- java里程碑之泛型--泛型注意的几点
- js获取url 中的值，并跳转相应页面
- Yii2 使用 QQ 和 Weibo 第三方登录源码
- mysql免解压版安装教程步骤
- django-会话 cookie 中缺少HttpOnly 属性-安全加强
- 20135316Linux内核学习笔记第六周
- PAT 甲级 1135 Is It A Red-Black Tree
- [luogu3978][bzoj4001][TJOI2005]概率论【基尔霍夫矩阵+卡特兰数】
- CF558E A Simple Task
- storm并发度理解