HTML+JS+CSS自定义树形菜单

小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。

下面开始...

应用到技术：JavaScript/Css/HTML

IDA：VS 2010

首先构造一下思路，需要哪些文件

1、js文件

2、Css文件

3、Html文件

4、图标

5、Juuery文件

6、后台查询数据文件

创建项目

在Html添加如下内容

<html>

<head>

<title>用户自定义树形菜单</title>

</head>

<body>

</div>

</body>

</html>

这里主要是给TreeView一个容器

给这个容器添加Css样式

bodt, html

{

padding: 0;

margin: 0;

border: 0;

font-family: 'Microsoft YaHei';

}

.parentnode

{

border: 1px solid #808080;

width: 280px;

height: 240px;//暂时写在这后面会删除

position: relative;

text-align: left;

box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);

display: inline-block;

vertical-align: top;

}

效果图

下面我们开始写树形菜单内部结构

HTML代码：

</div>

系统管理</div>

</div>

</div>

用户管理</div>

</div>

</div>

角色功能管理</div>

</div>

</div>

角色管理</div>

</div>

</div>

用户角色管理</div>

</div>

</div>

召回信息</div>

</div>

</div>

三级</div>

</div>

</div>

三级</div>

</div>

</div>

三级</div>

</div>

</div>

四级</div>

</div>

</div>

四级</div>

</div>

</div>

投诉处理</div>

</div>

</div>

部门管理</div>

</div>

</div>

功能管理</div>

</div>

</div>

公告管理</div>

</div>

</div>

发公告</div>

</div>

</div>

收公告</div>

</div>

</div>

种植企业</div>

</div>

</div>

存储企业</div>

</div>

</div>

加工企业</div>

</div>

效果图：

额~，好吧结构出来了，下一步添加样式，这样看着好别扭

Css文件：UserTreeView.min.css

body,html

{

padding: 0;

margin: 0;

border: 0;

font-family: 'Microsoft YaHei';

}

.parentnode

{

border: 1px solid #808080;

width: 280px;

position: relative;

text-align: left;

box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(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

{

}

.parentnode_title_symbol:hover

{

cursor: pointer;

}

.parentnode_title_symbol b

{

display: none;

}

.parentnode_title_check

{

}

.parentnode_title_check:hover

{

cursor: pointer;

}

.parentnode_title_check b

{

display: none;

}

.parentnode_title_picture

{

width: 24px;

height: 24px;

}

.parentnode_title_nochildnode_symbol

{

width: 18px;

}

.parentnode_title_nochildnode_picture

{

width: 24px;

height: 24px;

}

.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));

})

});

//菜单节点展开关闭

function shrinkage(dom) {

//改变图片背景

switch (parseInt($(dom).children("b").html())) {

case 1: //关闭

$(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;

case 2://展开

$(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));

})

});

//菜单节点展开关闭

function shrinkage(dom) {

//改变图片背景

switch (parseInt($(dom).children("b").html())) {

case 1: //关闭

$(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;

case 2://展开

$(dom).css('background-image','url("../../Images/TreeView/minus.gif")');

$(dom).children("b").html("1");

$(dom).parent().siblings().show(500);

break;

default: break;

}

//复选框勾选方法

function check(dom) {

//改变图片背景

switch (parseInt($(dom).children("b").html())) {

case 1:

//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;

case 2:

//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;

case 3:

//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->兄弟div if (($(dom).parent().parent().attr('class')).split(" ")[0] != "parentnode_noe") {

var num = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;

var checktrue = 0;

var checkfalse = 0;

//获取点击属性下b标签的内容

if ($(dom).find("b").html() =="1") {

checkfalse++

}

else if ($(dom).find("b").html() =="2") {

checktrue++

}

//获取父节点下所有b标签的内容

for (var i = 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++

}

else if ($(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")')

} //全都选中

else if (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")')

} //选中一部分

else if (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

function initialize() {

$.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); //绑定数据

}

});

}

//循环绑定数据

function databinding(data) {

//动态创建树形菜单

var parentnodediv = $(".parentnode");

for (var i = 0; i < data.tbFuncDic.length; i++) {

//最上层父节点

if (data.tbFuncDic[i].ParentID == 0) {

Cycledata(parentnodediv, data.tbFuncDic[i]);

}

//创建子节点

if (data.tbFuncDic.length > 0) {

childnodes(data);

}

//创建子节点

function childnodes(data) {

for (var j = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {

for (var i = 0; i < data.tbFuncDic.length ; i++) {

if (data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {

var parentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();

Cycledata(parentnodediv, data.tbFuncDic[i]);

}

//绑定数据方法

function Cycledata(parentnodediv, data) {

var parentnode_noe = document.createElement("div");//创建一个div

parentnode_noe.className = " parentnode_noe";//为div添加class

parentnodediv.append(parentnode_noe);//将其添加到div末尾

var parentnode_title = document.createElement("div");//创建一个div

parentnode_title.className = " parentnode_title ";//为div添加class

parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾

var parentnode_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末尾

var b = document.createElement("b");//创建一个b标签

b.innerHTML = 1;//为b添加内容

parentnode_title_symbol.appendChild(b);//将其添加到div末尾

var parentnode_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末尾

var b = document.createElement("b");//创建一个b标签

b.innerHTML = 1;//为b添加内容

parentnode_title_check.appendChild(b);//将其添加到div末尾

var parentnode_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末尾

var parentnode_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去除样式

function upclass() {

$(".parentnode_title").each(function () {

var me = $(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

<!DOCTYPE html>

<html>

<head>

@* <script src="~/Scripts/jquery-1.8.0.min.js"></script>*@

<title>用户自定义树形菜单</title>

//初始化控件，调用定义的js

function initialize() {

$.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>

@*树形菜单容器*@

</div>

</body>

</html>

CSS页面：UserTreeView.min.css

bodt, html

{

padding: 0;

margin: 0;

border: 0;

font-family: 'Microsoft YaHei';

}

.parentnode

{

border: 1px solid #808080;

width: 280px;

position: relative;

text-align: left;

box-shadow: 0 1px 3px rgba(0,0,0,0.05),0 1px 3px rgba(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

{

}

.parentnode_title_symbol:hover

{

cursor: pointer;

}

.parentnode_title_symbol b

{

display: none;

}

.parentnode_title_check

{

}

.parentnode_title_check:hover

{

cursor: pointer;

}

.parentnode_title_check b

{

display: none;

}

.parentnode_title_picture

{

width: 24px;

height: 24px;

}

.parentnode_title_nochildnode_symbol

{

width: 18px;

}

.parentnode_title_nochildnode_picture

{

width: 24px;

height: 24px;

}

.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();

});

//复选框勾选方法

function check(dom) {

//改变图片背景

switch (parseInt($(dom).children("b").html())) {

case 1:

//1、修改所有子节点选择状态

$(dom).parent().parent().find("b").html("2");

//2、更换所有子节点复选框背景图片(全选)

$(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Image/iconCheckAll.gif")');

break;

case 2:

//1、修改所有子节点选择状态

$(dom).parent().parent().find("b").html("1");

//2、更换所有子节点复选框背景图片(取消全选)

$(dom).parent().parent().find(".parentnode_title_check").css('background-image','url("../../Image/iconUncheckAll.gif")');

break;

case 3:

//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") {

var num = $(dom).parent().parent().siblings().find(".parentnode_title_check b").length;

var checktrue = 0;

var checkfalse = 0;

//alert($(this).find("b").html());//获取点击属性下b标签的内容

if ($(dom).find("b").html() =="1") {

checkfalse++

}

else if ($(dom).find("b").html() =="2") {

checktrue++

}

//获取父节点下所有b标签的内容

for (var i = 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++

}

else if ($(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")')

}//全都选中

else if (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")')

}//选中一部分

else if (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")')

}

//菜单子节点展开关闭

function shrinkage(dom) {

//改变图片背景

switch (parseInt($(dom).children("b").html())) {

case 1://关闭

$(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;

case 2://展开

$(dom).css('background-image','url("../../Image/minus.gif")');

$(dom).children("b").html("1");

$(dom).parent().siblings().show(500);

break;

default: break;

}

//循环绑定数据

function databinding(data) {

//动态创建树形菜单

var parentnodediv = $(".parentnode");

for (var i = 0; i < data.tbFuncDic.length; i++) {

//最上层父节点

if (data.tbFuncDic[i].ParentID == 0) {

Cycledata(parentnodediv, data.tbFuncDic[i]);

}

//创建子节点

if (data.tbFuncDic.length > 0) {

childnodes(data);

}

//创建子节点

function childnodes(data) {

for (var j = 0; j < $(".parentnode").find(".parentnode_title_name").length; j++) {

for (var i = 0; i < data.tbFuncDic.length ; i++) {

if (data.tbFuncDic[i].ParentID == $(".parentnode").find(".parentnode_title_name")[j].id) {

var parentnodediv = $($(".parentnode").find(".parentnode_title_name")[j]).parent().parent();

Cycledata(parentnodediv, data.tbFuncDic[i]);

}

//绑定数据方法

function Cycledata(parentnodediv, data) {

var parentnode_noe = document.createElement("div");//创建一个div

parentnode_noe.className = " parentnode_noe";//为div添加class

parentnodediv.append(parentnode_noe);//将其添加到div末尾

var parentnode_title = document.createElement("div");//创建一个div

parentnode_title.className = " parentnode_title ";//为div添加class

parentnode_noe.appendChild(parentnode_title);//将其添加到div末尾

var parentnode_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末尾

var b = document.createElement("b");//创建一个b标签

b.innerHTML = 1;//为b添加内容

parentnode_title_symbol.appendChild(b);//将其添加到div末尾

var parentnode_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末尾

var b = document.createElement("b");//创建一个b标签

b.innerHTML = 1;//为b添加内容

parentnode_title_check.appendChild(b);//将其添加到div末尾

var parentnode_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末尾

var parentnode_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去除样式

function upclass() {

$(".parentnode_title").each(function () {

var me = $(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+JS+CSS自定义树形菜单

猜你喜欢