工作中经常用到树形菜单 今天闲暇之余总结如下 写的不好还请大神指教!本文需要的类库可以到 http://www.ztree.me/v3/main.php#_zTreeInfo 下载
闲话不多说先看看效果图
第一种是不带复选框的:看一下代码结构 这是需要引入的库文件
//必要的一些配置(有些也不是必须的 视情况而定)
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)
};
再来看一下html部分:
只需写一个ul标签然后把class设置成ztree
这是最简单的zTree树形菜单结构
其实总的也就分三步
1、setting:树形结构的配置
2、zNodes数据的加载(可以自定义也可以用ajax动态加载 两种方法本文都做了介绍)
3、初始化$.fn.zTree.init
其实工作中除了这种树形菜单比较常用外还有一种带复选框额树形菜单也非常常用:
它的用法和上述的简单树形菜单有两处不同
1、引入的库不同
2、setting 树形结构的配置不同
代码如下:
HTML部分和之前介绍的完全一样 这里就不多赘述了