小编最近做项目的时候时常用到树形菜单(Treeview),一直用的是别人的插件,但有时候不符合自己的页面风格,修改样式、图标什么的都不方便,所以在这里我急写个方便修改样式什么的。
下面开始...
应用到技术:JavaScript/Css/HTML
IDA:VS 2010
首先构造一下思路,需要哪些文件
1、js文件
2、Css文件
3、Html文件
4、图标
5、Juuery文件
6、后台查询数据文件
创建项目
在Html添加如下内容
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script src="Scripts/Jquery-3.1.1/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/Jquery-3.1.1/jquery-3.1.1.js" type="text/javascript"></script>
<title>用户自定义树形菜单</title>
</head>
<body>
<!--树形菜单容器-->
<div class="parentnode">
</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 class="parentnode">
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="14" name="0">
系统管理</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_fix parentnode_title_nochildnode_symbol">
<b style="display: none;">1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="15" name="14">
用户管理</div>
</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_fix parentnode_title_nochildnode_symbol">
<b style="display: none;">1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="16" name="14">
角色功能管理</div>
</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_fix parentnode_title_nochildnode_symbol">
<b style="display: none;">1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="17" name="14">
角色管理</div>
</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="18" name="14">
用户角色管理</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_symbol parentnode_title_fix ">
<b>1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="24" name="18">
召回信息</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_fix parentnode_title_nochildnode_symbol">
<b style="display: none;">1</b></div>
<div class="parentnode_title_check parentnode_title_fix">
<b>1</b></div>
<div class="parentnode_title_picture parentnode_title_fix">
</div>
<div class="parentnode_title_name" id="29" name="24">
三级</div>
</div>
</div>
<div class=" parentnode_noe">
<div class=" parentnode_title ">
<div class="parentnode_title_f