小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。
下面开始...
应用到技术：JavaScript/Css/HTML
IDA：VS
首先构造一下思路，需要哪些文件
1、js文件
2、Css文件
3、Html文件
4、图标
5、Juuery文件
6、后台查询数据文件
创建项目
在Html添加如下内容
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width"/>
<scriptsrc="Scripts/Jquery-3.1.1/jquery-3.1.1.min.js"type="text/javascript"></script>
<scriptsrc="Scripts/Jquery-3.1.1/jquery-3.1.1.js"type="text/javascript"></script>
<title>用户自定义树形菜单</title>
</head>
<body>
<!--树形菜单容器-->
<divclass="parentnode">
</div>
</body>
</html>
这里主要是给TreeView一个容器
给这个容器添加Css样式
bodt, html
{
padding: 0;
margin: 0;
border: 0;
font-family: 'Microsoft YaHei';
}
.parentnode
{
border: 1pxsolid#808080;
width: 280px;
height:240px;//暂时写在这后面会删除
position: relative;
text-align: left;
box-shadow: 01px3pxrgba(0,0,0,0.05),01px3pxrgba(0,0,0,0.09);
display: inline-block;
vertical-align: top;
}
效果图
下面我们开始写树形菜单内部结构
HTML代码：
<divclass="parentnode">
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="14"name="0">
系统管理</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="15"name="14">
用户管理</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="16"name="14">
角色功能管理</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="17"name="14">
角色管理</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="18"name="14">
用户角色管理</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="24"name="18">
召回信息</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="29"name="24">
三级</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="30"name="24">
三级</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="31"name="24">
三级</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="32"name="31">
四级</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="33"name="31">
四级</div>
</div>
</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="25"name="18">
投诉处理</div>
</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="19"name="14">
部门管理</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="20"name="14">
功能管理</div>
</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="21"name="0">
公告管理</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="22"name="21">
发公告</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="23"name="21">
收公告</div>
</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="26"name="0">
种植企业</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="27"name="0">
存储企业</div>
</div>
</div>
<divclass=" parentnode_noe">
<divclass=" parentnode_title ">
<divclass="parentnode_title_fix parentnode_title_nochildnode_symbol">
<bstyle="display: none;">1</b></div>
<divclass="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<divclass="parentnode_title_picture parentnode_title_fix">
</div>
<divclass="parentnode_title_name"id="28"name="0">
加工企业</div>
</div>
</div>
</div>
效果图：
额~，好吧结构出来了，下一步添加样式，这样看着好别扭
Css文件：UserTreeView.min.css
body, html
{
padding: 0;
margin: 0;
border: 0;
font-family: 'Microsoft YaHei';
}
.parentnode
{
border: 1pxsolid#808080;
width: 280px;
position: relative;
text-align: left;
box-shadow: 01px3pxrgba(0,0,0,0.05),01px3pxrgba(0,0,0,0.09);
display: inline-block;
vertical-align: top;
}
.parentnode_noe
{
width: 100%;
padding-left: 20px;
}
.parentnode_title
{
width: 100%;
padding: 2px;
}
.parentnode_title_fix
{
height: 24px;
width: 18px;
float: left;
background-repeat: no-repeat;
background-position: center;
background-position-x: center;
background-position-y: center;
}
.parentnode_title_symbol
{
background-image: url("../../Images/TreeView/minus.gif");
}
.parentnode_title_symbol:hover
{
cursor: pointer;
}
.parentnode_title_symbolb
{
display: none;
}
.parentnode_title_check
{
background-image: url("../../Images/TreeView/iconUncheckAll.gif");
}
.parentnode_title_check:hover
{
cursor: pointer;
}
.parentnode_title_checkb
{
display: none;
}
.parentnode_title_picture
{
width: 24px;
height: 24px;
background-image: url("../../Images/TreeView/folderClosed.gif");
}
.parentnode_title_nochildnode_symbol
{
width: 18px;
}
.parentnode_title_nochildnode_picture
{
width: 24px;
height: 24px;
background-image: url("../../Images/TreeView/leaf.gif");
}
.parentnode_tow
{
padding-left: 20px;
}
.parentnode_three
{
padding-left: 20px;
}
这里面引用的图片全部是我之前准备好的
不要忘了在你的HTML页面中引用你的css文件
运行效果图：
到这里我们的排版基本上完成了，下一步就是点击效果了，一样的想整理一下思路：
1、菜单展开收缩
2、复选框勾选
3、数据绑定
菜单展开收缩
Html页面引用jquery文件、UserTreeView.min.js
Js文件：UserTreeView.min.js
$(function() {
//注册菜单展开收缩事件
$(".parentnode_title_symbol").click(function() {
shrinkage($(this));
})
});
//菜单节点展开关闭
functionshrinkage(dom) {
//改变图片背景
switch(parseInt($(dom).children("b").html())) {
case1: //关闭
$(dom).css('background-image', 'url("../../Images/TreeView/plus.gif")');
$(dom).children("b").html("2");
//$(dom).parent().siblings().css("display", "none");
$(dom).parent().siblings().hide(500);
break;
case2://展开
$(dom).css('background-image', 'url("../../Images/TreeView/minus.gif")');
$(dom).children("b").html("1");
$(dom).parent().siblings().show(500);
break;
default: break;
}
}
效果图：
复选框选中
Js文件：UserTreeView.min.js
$(function() {
//注册菜单展开收缩事件
$(".parentnode_title_symbol").click(function() {
shrinkage($(this));
})
//注痢册复选框勾选事件
$(".parentnode_title_check").click(function() {
check($(this));
})
});
//菜单节点展开关闭
functionshrinkage(dom) {
//改变图片背景
switch(parseInt($(dom).children("b").html())) {
case1: //关闭
$(dom).css('background-image', 'url("../../Images/TreeView/plus.gif")');
$(dom).children("b").html("2");
//$(dom).parent().siblings().css("display", "none");
$(dom).parent().siblings().hide(500);
break;
case2://展开
$(dom).css('background-image', 'url("../../Images/TreeView/minus.gif")');
$(dom).children("b").html("1");
$(dom).parent().siblings().show(500);
break;
default: break;
}
}
//复选框勾选方法
functioncheck(dom) {
//改变图片背景
switch(parseInt($(dom).children("b").html())) {
case1:
//1、修改所有节点选择状态
$(dom).parent().parent().find("b").html("2");
//2、更换所有节点复选框背景图片(全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconCheckAll.gif")');
break;
case2:
//1、修改所有节点选择状态
$(dom).parent().parent().find("b").html("1");
//2、更换所有节点复选框背景图片(取消全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconUncheckAll.gif")');
break;
case3:
//1、修改所有节点选择状态
$(dom).parent().parent().find("b").html("2");
//2、更换所有节点复选框背景图片(全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconCheckAll.gif")');
break;
default: break;
}
//判断父节点下所有子节点是否全部选中 父div->父div->兄弟divif(($(dom).parent().parent().attr('class')).split(" ")[0] != "parentnode_noe") {
varnum = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;
varchecktrue = 0;
varcheckfalse = 0;
//获取点击属性下b标签的内容
if($(dom).find("b").html() == "1") {
checkfalse++
}
elseif($(dom).find("b").html() == "2") {
checktrue++
}
//获取父节点下所有b标签的内容
for(vari = 0; i < num; i++) {
if(!($(dom).parent().parent().siblings().eq(i).attr('class') == "parentnode_title")) {
if($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() == "1") {
checkfalse++
}
elseif($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() == "2") {
checktrue++
}
}
}
//全都没有选中
if(checktrue == 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("1");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconUncheckAll.gif")')
} //全都选中
elseif(checkfalse == 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("2");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconCheckAll.gif")')
} //选中一部分
elseif(checktrue != 0 && checkfalse !== 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("3");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Images/TreeView/iconCheckGray.gif")')
}
}
}
效果图：
数据绑定
这个地方我使用Json做了一个模拟数据
Js文件：UserTreeView.min.js
$(function() {
//初始化动态加载控件
initialize();
//注册菜单展开收缩事件
$(".parentnode_title_symbol").click(function() {
shrinkage($(this));
})
//注册复选框勾选事件
$(".parentnode_title_check").click(function() {
check($(this));
})
});
//初始化控件，调用定义的js
functioninitialize() {
$.ajax({
type: 'POST',
url: "/UserTreeView.ashx", //访问地址,获取数据
data: {},
//dataType: "Json",
async: false, //默认是true，false为同步
success: function(data) {
//模拟数据
data = {
"tbFuncDic":
[
{ "FunID": 14, "ParentID": 0, "FunName": "系统管理"},
{ "FunID": 15, "ParentID": 14, "FunName": "用户管理"},
{ "FunID": 16, "ParentID": 14, "FunName": "角色功能管理"},
{ "FunID": 17, "ParentID": 14, "FunName": "角色管理"},
{ "FunID": 18, "ParentID": 14, "FunName": "用户角色管理"},
{ "FunID": 19, "ParentID": 14, "FunName": "部门管理"},
{ "FunID": 20, "ParentID": 14, "FunName": "功能管理"},
{ "FunID": 21, "ParentID": 0, "FunName": "公告管理"},
{ "FunID": 22, "ParentID": 21, "FunName": "发公告"},
{ "FunID": 23, "ParentID": 21, "FunName": "收公告"},
{ "FunID": 24, "ParentID": 18, "FunName": "召回信息"},
{ "FunID": 25, "ParentID": 18, "FunName": "投诉处理"},
{ "FunID": 26, "ParentID": 0, "FunName": "种植企业"},
{ "FunID": 27, "ParentID": 0, "FunName": "存储企业"},
{ "FunID": 28, "ParentID": 0, "FunName": "加工企业"},
{ "FunID": 29, "ParentID": 24, "FunName": "三级"},
{ "FunID": 30, "ParentID": 24, "FunName": "三级"},
{ "FunID": 31, "ParentID": 24, "FunName": "三级"},
{ "FunID": 32, "ParentID": 31, "FunName": "四级"},
{ "FunID": 33, "ParentID": 31, "FunName": "四级"},
]
}
databinding(data); //绑定数据
}
});
}
//循环绑定数据
functiondatabinding(data) {
//动态创建树形菜单
varparentnodediv = $(".parentnode");
for(vari = 0; i < data.tbFuncDic.length; i++) {
//最上层父节点
if(data.tbFuncDic[i].ParentID == 0) {
Cycledata(parentnodediv, data.tbFuncDic[i]);
}
}
//创建子节点
if(data.tbFuncDic.length > 0) {
childnodes(data);
}
}
//创建子节点
functionchildnodes(data) {
for(varj = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {
for(vari = 0; i < data.tbFuncDic.length ; i++) {
if(data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {
varparentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();
Cycledata(parentnodediv, data.tbFuncDic[i]);
}
}
}
}
//绑定数据方法
functionCycledata(parentnodediv, data) {
varparentnode_noe = document.createElement("div");//创建一个div
parentnode_noe.className = " parentnode_noe";//为div添加class
parentnodediv.append(parentnode_noe);//将其添加到div末尾
varparentnode_title = document.createElement("div");//创建一个div
parentnode_title.className = " parentnode_title ";//为div添加class
parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾
varparentnode_title_symbol = document.createElement("div");//创建一个div
parentnode_title_symbol.className = "parentnode_title_symbol parentnode_title_fix ";//为div添加class
parentnode_title.appendChild(parentnode_title_symbol);//将其添加到div末尾
varb = document.createElement("b");//创建一个b标签
b.innerHTML = 1;//为b添加内容
parentnode_title_symbol.appendChild(b);//将其添加到div末尾
varparentnode_title_check = document.createElement("div");//创建一个div
parentnode_title_check.className = "parentnode_title_check parentnode_title_fix";//为div添加class
parentnode_title.appendChild(parentnode_title_check);//将其添加到div末尾
varb = document.createElement("b");//创建一个b标签
b.innerHTML = 1;//为b添加内容
parentnode_title_check.appendChild(b);//将其添加到div末尾
varparentnode_title_picture = document.createElement("div");//创建一个div
parentnode_title_picture.className = "parentnode_title_picture parentnode_title_fix";//为div添加class
parentnode_title.appendChild(parentnode_title_picture);//将其添加到div末尾
varparentnode_title_name = document.createElement("div");//创建一个div
parentnode_title_name.className = "parentnode_title_name";//为div添加class
parentnode_title_name.innerHTML = data.FunName;//为div添加class
parentnode_title_name.id = data.FunID;//为div添加ID
parentnode_title_name.setAttribute("name", data.ParentID);
parentnode_title.appendChild(parentnode_title_name);//将其添加到div末尾
}
效果图：
与模拟数据不匹配，删除HTML页面填充的静态数据
效果图：
静态页面图
我们发现结构完全一样，但是收缩展开图标全部都有，怎么办呢
Js文件：UserTreeView.min.js
$(function() {
//初始化动态加载控件
initialize();
//注册菜单展开收缩事件
$(".parentnode_title_symbol").click(function() {
shrinkage($(this));
})
//注册复选框勾选事件
$(".parentnode_title_check").click(function() {
check($(this));
})
//当没有子节点的div去除样式
upclass();
});
//当没有子节点的div去除样式
functionupclass() {
$(".parentnode_title").each(function() {
varme = $(this);
if(me.siblings().length == 0) {
me.find(".parentnode_title_symbol b").css("display", "none");
me.find(".parentnode_title_symbol").addClass("parentnode_title_nochildnode_symbol").removeClass("parentnode_title_symbol");
}
})
}
运行效果：
搞定
下面我把完整代码粘贴在下面
HTML页面：UserTreeView.htm
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width"/>
<scriptsrc="~/Scripts/Jquery-3.1.1/jquery-3.1.1.js"></script>
<scriptsrc="~/Scripts/Jquery-3.1.1/jquery-3.1.1.min.js"></script>
@*<script src="~/Scripts/jquery-1.8.0.min.js"></script>*@
<scriptsrc="~/Scripts/UserTreeView/UserTreeView.min.js"></script>
<linkhref="~/Scripts/UserTreeView/UserTreeView.min.css"rel="stylesheet"/>
<title>用户自定义树形菜单</title>
<scripttype="text/javascript">
//初始化控件，调用定义的js
functioninitialize() {
$.ajax({
type: 'POST',
url: "/UserTreeView/Initialize",
data: {},
dataType: "Json",
async: false,//默认是true，false为同步
success: function(data) {
//模拟数据
data = {
"tbFuncDic":
[
{ "FunID": 14, "ParentID": 0, "FunName": "系统管理"},
{ "FunID": 15, "ParentID": 14, "FunName": "用户管理"},
{ "FunID": 16, "ParentID": 14, "FunName": "角色功能管理"},
{ "FunID": 17, "ParentID": 14, "FunName": "角色管理"},
{ "FunID": 18, "ParentID": 14, "FunName": "用户角色管理"},
{ "FunID": 19, "ParentID": 14, "FunName": "部门管理"},
{ "FunID": 20, "ParentID": 14, "FunName": "功能管理"},
{ "FunID": 21, "ParentID": 0, "FunName": "公告管理"},
{ "FunID": 22, "ParentID": 21, "FunName": "发公告"},
{ "FunID": 23, "ParentID": 21, "FunName": "收公告"},
{ "FunID": 24, "ParentID": 18, "FunName": "召回信息"},
{ "FunID": 25, "ParentID": 18, "FunName": "投诉处理"},
{ "FunID": 26, "ParentID": 0, "FunName": "种植企业"},
{ "FunID": 27, "ParentID": 0, "FunName": "存储企业"},
{ "FunID": 28, "ParentID": 0, "FunName": "加工企业"},
{ "FunID": 29, "ParentID": 24, "FunName": "三级"},
{ "FunID": 30, "ParentID": 24, "FunName": "三级"},
{ "FunID": 31, "ParentID": 24, "FunName": "三级"},
{ "FunID": 32, "ParentID": 31, "FunName": "四级"},
{ "FunID": 33, "ParentID": 31, "FunName": "四级"},
]
}
databinding(data);//绑定数据
}
});
}
</script>
</head>
<body>
@*树形菜单容器*@
<divclass="parentnode">
</div>
</body>
</html>
CSS页面：UserTreeView.min.css
bodt, html
{
padding: 0;
margin: 0;
border: 0;
font-family: 'Microsoft YaHei';
}
.parentnode
{
border: 1pxsolid#808080;
width: 280px;
position: relative;
text-align: left;
box-shadow: 01px3pxrgba(0,0,0,0.05), 01px3pxrgba(0,0,0,0.09);
display: inline-block;
vertical-align: top;
}
.parentnode_noe
{
width: 100%;
padding-left: 20px;
}
.parentnode_title
{
width: 100%;
padding: 2px;
}
.parentnode_title_fix
{
height: 24px;
width: 18px;
float: left;
background-repeat: no-repeat;
background-position: center;
background-position-x: center;
background-position-y: center;
}
.parentnode_title_symbol
{
background-image: url("../../Image/minus.gif");
}
.parentnode_title_symbol:hover
{
cursor: pointer;
}
.parentnode_title_symbolb
{
display: none;
}
.parentnode_title_check
{
background-image: url("../../Image/iconUncheckAll.gif");
}
.parentnode_title_check:hover
{
cursor: pointer;
}
.parentnode_title_checkb
{
display: none;
}
.parentnode_title_picture
{
width: 24px;
height: 24px;
background-image: url("../../Image/folderClosed.gif");
}
.parentnode_title_nochildnode_symbol
{
width: 18px;
}
.parentnode_title_nochildnode_picture
{
width: 24px;
height: 24px;
background-image: url("../../Image/leaf.gif");
}
.parentnode_tow
{
padding-left: 20px;
}
.parentnode_three
{
padding-left: 20px;
}
JS页面：UserTreeView.min.js
$(function() {
//初始化动态加载控件
initialize();
//注册菜单展开收缩事件
$(".parentnode_title_symbol").click(function() {
shrinkage($(this));
})
//注册复选框勾选事件
$(".parentnode_title_check").click(function() {
check($(this));
})
//当没有子节点的div去除样式
upclass();
});
//复选框勾选方法
functioncheck(dom) {
//改变图片背景
switch(parseInt($(dom).children("b").html())) {
case1:
//1、修改所有子节点选择状态
$(dom).parent().parent().find("b").html("2");
//2、更换所有子节点复选框背景图片(全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Image/iconCheckAll.gif")');
break;
case2:
//1、修改所有子节点选择状态
$(dom).parent().parent().find("b").html("1");
//2、更换所有子节点复选框背景图片(取消全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Image/iconUncheckAll.gif")');
break;
case3:
//1、修改所有子节点选择状态
$(dom).parent().parent().find("b").html("2");
//2、更换所有子节点复选框背景图片(全选)
$(dom).parent().parent().find(".parentnode_title_check").css('background-image', 'url("../../Image/iconCheckAll.gif")');
break;
default: break;
}
//判断父节点下所有子节点是否全部选中 父div->父div->兄弟div
if(($(dom).parent().parent().attr('class')).split(" ")[0] != "parentnode_noe") {
varnum = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;
varchecktrue = 0;
varcheckfalse = 0;
//alert($(this).find("b").html());//获取点击属性下b标签的内容
if($(dom).find("b").html() == "1") {
checkfalse++
}
elseif($(dom).find("b").html() == "2") {
checktrue++
}
//获取父节点下所有b标签的内容
for(vari = 0; i < num; i++) {
if(!($(dom).parent().parent().siblings().eq(i).attr('class') == "parentnode_title")) {
if($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() == "1") {
checkfalse++
}
elseif($(dom).parent().parent().siblings().find(".parentnode_title_check b").eq(i).html() == "2") {
checktrue++
}
}
}
//全都没有选中
if(checktrue == 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("1");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Image/iconUncheckAll.gif")')
}//全都选中
elseif(checkfalse == 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("2");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Image/iconCheckAll.gif")')
}//选中一部分
elseif(checktrue != 0 && checkfalse !== 0) {
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check b").html("3");
$(dom).parent().parent().siblings(".parentnode_title").find(".parentnode_title_check").css('background-image', 'url("../../Image/iconCheckGray.gif")')
}
}
}
//菜单子节点展开关闭
functionshrinkage(dom) {
//改变图片背景
switch(parseInt($(dom).children("b").html())) {
case1://关闭
$(dom).css('background-image', 'url("../../Image/plus.gif")');
$(dom).children("b").html("2");
//$(dom).parent().siblings().css("display", "none");
$(dom).parent().siblings().hide(500);
break;
case2://展开
$(dom).css('background-image', 'url("../../Image/minus.gif")');
$(dom).children("b").html("1");
$(dom).parent().siblings().show(500);
break;
default: break;
}
}
//循环绑定数据
functiondatabinding(data) {
//动态创建树形菜单
varparentnodediv = $(".parentnode");
for(vari = 0; i < data.tbFuncDic.length; i++) {
//最上层父节点
if(data.tbFuncDic[i].ParentID == 0) {
Cycledata(parentnodediv, data.tbFuncDic[i]);
}
}
//创建子节点
if(data.tbFuncDic.length > 0) {
childnodes(data);
}
}
//创建子节点
functionchildnodes(data) {
for(varj = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {
for(vari = 0; i < data.tbFuncDic.length ; i++) {
if(data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {
varparentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();
Cycledata(parentnodediv, data.tbFuncDic[i]);
}
}
}
}
//绑定数据方法
functionCycledata(parentnodediv, data) {
varparentnode_noe = document.createElement("div");//创建一个div
parentnode_noe.className = " parentnode_noe";//为div添加class
parentnodediv.append(parentnode_noe);//将其添加到div末尾
varparentnode_title = document.createElement("div");//创建一个div
parentnode_title.className = " parentnode_title ";//为div添加class
parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾
varparentnode_title_symbol = document.createElement("div");//创建一个div
parentnode_title_symbol.className = "parentnode_title_symbol parentnode_title_fix ";//为div添加class
parentnode_title.appendChild(parentnode_title_symbol);//将其添加到div末尾
varb = document.createElement("b");//创建一个b标签
b.innerHTML = 1;//为b添加内容
parentnode_title_symbol.appendChild(b);//将其添加到div末尾
varparentnode_title_check = document.createElement("div");//创建一个div
parentnode_title_check.className = "parentnode_title_check parentnode_title_fix";//为div添加class
parentnode_title.appendChild(parentnode_title_check);//将其添加到div末尾
varb = document.createElement("b");//创建一个b标签
b.innerHTML = 1;//为b添加内容
parentnode_title_check.appendChild(b);//将其添加到div末尾
varparentnode_title_picture = document.createElement("div");//创建一个div
parentnode_title_picture.className = "parentnode_title_picture parentnode_title_fix";//为div添加class
parentnode_title.appendChild(parentnode_title_picture);//将其添加到div末尾
varparentnode_title_name = document.createElement("div");//创建一个div
parentnode_title_name.className = "parentnode_title_name";//为div添加class
parentnode_title_name.innerHTML = data.FunName;//为div添加class
parentnode_title_name.id = data.FunID;//为div添加ID
parentnode_title_name.setAttribute("name", data.ParentID);
parentnode_title.appendChild(parentnode_title_name);//将其添加到div末尾
}
//当没有子节点的div去除样式
functionupclass() {
$(".parentnode_title").each(function() {
varme = $(this);
if(me.siblings().length == 0) {
me.find(".parentnode_title_symbol b").css("display", "none");
me.find(".parentnode_title_symbol").addClass("parentnode_title_nochildnode_symbol").removeClass("parentnode_title_symbol");
}
})
}
如果您觉得对您有帮助分享给你的朋友。
