常用的树形菜单
2016-01-07 16:35
453 查看
工作中经常用到树形菜单 今天闲暇之余总结如下 写的不好还请大神指教！本文需要的类库可以到 http://www.ztree.me/v3/main.php#_zTreeInfo 下载
闲话不多说先看看效果图
第一种是不带复选框的：看一下代码结构 这是需要引入的库文件
<script>
//必要的一些配置(有些也不是必须的 视情况而定)
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick:zTreeOnClick //在callback中调用自定义的函数
}
};
// 自定义的模拟数据 这里的数据也可以用ajax动态加载
var zNodes = [
{ id: 1, pId: 0, name: "国家" },
{ id: 11, pId: 1, name: "中国" },
{ id: 111, pId: 11, name: "北京" },
{ id: 112, pId: 11, name: "香港" },
{ id: 12, pId: 1, name: "美国" },
{ id: 121, pId: 12, name: "洛杉矶" },
{ id: 122, pId: 12, name: "芝加哥" },
{ id: 2, pId: 0, name: "体育" },
{ id: 21, pId: 2, name: "足球" },
{ id: 22, pId: 2, name: "篮球" },
{ id: 221, pId: 22, name: "NBA" },
{ id: 222, pId: 22, name: "CBA" },
{ id: 23, pId: 2, name: "网球" }
];
// //ajax动态加载数据
// $.ajax({
// url:"",
// type:"json",
// success:function (data){
// zNodes = eval(data);
//初始化树形结构 使用ajax动态加载数据时要把初始化这一步放在这里
// $.fn.zTree.init($("#tree"), setting, zNodes);
// }
// })
// 初始化树形结构
$(document).ready(function () {
$.fn.zTree.init($("#tree"), setting, zNodes);
});
//自定义的回调函数
function zTreeOnClick() {
var treeObject = $.fn.zTree.getZTreeObj("tree"); //这里的参数为ul的id
var nodes = treeObject.getSelectedNodes();
console.log(nodes)
};
</script>
再来看一下html部分：
只需写一个ul标签然后把class设置成ztree
<body>
<div>
<input type="text" id="inp" class="inp" style="width: 300px;"/>
<ul class="ztree" id="tree" style="overflow: auto"></ul>
</div>
</body>
这是最简单的zTree树形菜单结构
其实总的也就分三步
1、setting：树形结构的配置
2、zNodes数据的加载（可以自定义也可以用ajax动态加载 两种方法本文都做了介绍）
3、初始化$.fn.zTree.init
其实工作中除了这种树形菜单比较常用外还有一种带复选框额树形菜单也非常常用：
它的用法和上述的简单树形菜单有两处不同
1、引入的库不同
2、setting 树形结构的配置不同
代码如下：
<script>
//一些必要的设置
var setting = {
check: {
enable: true, //设置为true为带复选框 设置为false为不带复选框
chkStyle:"checkbox",
chkboxType:{"Y":"","N":""}
},
data: {
simpleData: {
enable: true
}
},
callback:{
onCheck:onCheck //引用自定义的回调函数
}
};
// 模拟的数据
var zNodes = [
{ id: 1, pId: 0, name: "国家" },
{ id: 11, pId: 1, name: "中国" },
{ id: 111, pId: 11, name: "北京" },
{ id: 112, pId: 11, name: "香港" },
{ id: 12, pId: 1, name: "美国" },
{ id: 121, pId: 12, name: "洛杉矶" },
{ id: 122, pId: 12, name: "芝加哥" },
{ id: 2, pId: 0, name: "体育" },
{ id: 21, pId: 2, name: "足球" },
{ id: 22, pId: 2, name: "篮球" },
{ id: 221, pId: 22, name: "NBA" },
{ id: 222, pId: 22, name: "CBA" },
{ id: 23, pId: 2, name: "网球" }
];
//初始化
$(function (){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
})
function onCheck() {
//获取当前被勾选的节点集合
var treeObject = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObject.getCheckedNodes(true);
console.log(nodes);
};
</script>
HTML部分和之前介绍的完全一样 这里就不多赘述了
闲话不多说先看看效果图
第一种是不带复选框的：看一下代码结构 这是需要引入的库文件
<script>
//必要的一些配置(有些也不是必须的 视情况而定)
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick:zTreeOnClick //在callback中调用自定义的函数
}
};
// 自定义的模拟数据 这里的数据也可以用ajax动态加载
var zNodes = [
{ id: 1, pId: 0, name: "国家" },
{ id: 11, pId: 1, name: "中国" },
{ id: 111, pId: 11, name: "北京" },
{ id: 112, pId: 11, name: "香港" },
{ id: 12, pId: 1, name: "美国" },
{ id: 121, pId: 12, name: "洛杉矶" },
{ id: 122, pId: 12, name: "芝加哥" },
{ id: 2, pId: 0, name: "体育" },
{ id: 21, pId: 2, name: "足球" },
{ id: 22, pId: 2, name: "篮球" },
{ id: 221, pId: 22, name: "NBA" },
{ id: 222, pId: 22, name: "CBA" },
{ id: 23, pId: 2, name: "网球" }
];
// //ajax动态加载数据
// $.ajax({
// url:"",
// type:"json",
// success:function (data){
// zNodes = eval(data);
//初始化树形结构 使用ajax动态加载数据时要把初始化这一步放在这里
// $.fn.zTree.init($("#tree"), setting, zNodes);
// }
// })
// 初始化树形结构
$(document).ready(function () {
$.fn.zTree.init($("#tree"), setting, zNodes);
});
//自定义的回调函数
function zTreeOnClick() {
var treeObject = $.fn.zTree.getZTreeObj("tree"); //这里的参数为ul的id
var nodes = treeObject.getSelectedNodes();
console.log(nodes)
};
</script>
再来看一下html部分：
只需写一个ul标签然后把class设置成ztree
<body>
<div>
<input type="text" id="inp" class="inp" style="width: 300px;"/>
<ul class="ztree" id="tree" style="overflow: auto"></ul>
</div>
</body>
这是最简单的zTree树形菜单结构
其实总的也就分三步
1、setting：树形结构的配置
2、zNodes数据的加载（可以自定义也可以用ajax动态加载 两种方法本文都做了介绍）
3、初始化$.fn.zTree.init
其实工作中除了这种树形菜单比较常用外还有一种带复选框额树形菜单也非常常用：
它的用法和上述的简单树形菜单有两处不同
1、引入的库不同
2、setting 树形结构的配置不同
代码如下：
<script>
//一些必要的设置
var setting = {
check: {
enable: true, //设置为true为带复选框 设置为false为不带复选框
chkStyle:"checkbox",
chkboxType:{"Y":"","N":""}
},
data: {
simpleData: {
enable: true
}
},
callback:{
onCheck:onCheck //引用自定义的回调函数
}
};
// 模拟的数据
var zNodes = [
{ id: 1, pId: 0, name: "国家" },
{ id: 11, pId: 1, name: "中国" },
{ id: 111, pId: 11, name: "北京" },
{ id: 112, pId: 11, name: "香港" },
{ id: 12, pId: 1, name: "美国" },
{ id: 121, pId: 12, name: "洛杉矶" },
{ id: 122, pId: 12, name: "芝加哥" },
{ id: 2, pId: 0, name: "体育" },
{ id: 21, pId: 2, name: "足球" },
{ id: 22, pId: 2, name: "篮球" },
{ id: 221, pId: 22, name: "NBA" },
{ id: 222, pId: 22, name: "CBA" },
{ id: 23, pId: 2, name: "网球" }
];
//初始化
$(function (){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
})
function onCheck() {
//获取当前被勾选的节点集合
var treeObject = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObject.getCheckedNodes(true);
console.log(nodes);
};
</script>
HTML部分和之前介绍的完全一样 这里就不多赘述了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MySQL 系统架构 说明
- Drupal 使用Nginx进行反向代理的配置
- JavaScript截取、切割字符串的技巧
- MariaDB中1045权限错误导致拒绝用户访问的错误解决方法
- 网络编程 java
- 技术分享-在安卓APP上完成手机号码确认的新技术，对短信资费敏感的同学请重点关注
- 数据类型的位数
- MySQL数据库行去重复
- linux 下批量kill 同名进程的方法
- php
- vmware下安装Archlinux遇到的问题记录
- blueimp/jquery-File-Upload中文文档
- 常见汇编代码
- 手把手带你画一个动态错误提示 Android自定义view
- 手把手带你画一个动态错误提示 Android自定义view
- [html][javascript] Cookie
- DataGrid 后台多选数据性能问题
- jmeter解决不同线程组之间传递参数问题
- redis集群安装
- Oracle 中去除重复数据