<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="css/treeMenu.css" />
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<style>
/*1级*/
.easyui-tree > li > div {
width: 100%;
height: 36px;
background-color: rgba(14,156,245,0.4);
border-bottom: 1px #1D3442 solid;
font-size:0.875em ;
color:#fff;
font-family:"Microsoft YaHei";
}
@media \0screen\,\screen\9 {
.easyui-tree > li > div {
position: static;
background-color: #0E9CF5;
*zoom: 1;
filter: alpha(opacity=40);
}
}
/*2*/
.easyui-tree > li ul li .tree-node {
width: 100%;
height: 36px;
background-color: rgba(14,156,245,0.2);
border-bottom: 1px #1D3442 solid;
font-size:0.875em ;
color:#fff;
font-family:"Microsoft YaHei";
}
@media \0screen\,\screen\9 {
.easyui-tree > li ul li .tree-node {
position: static;
background-color: #0E9CF5;
*zoom: 1;
filter: alpha(opacity=20);
}
}
/*3*/
.easyui-tree > li ul li > ul li .tree-node {
width: 100%;
height: 36px;
background:url('') ;
background-color: rgba(14,156,245,0.1);
border-bottom: 1px #1D3442 solid;
font-size:0.875em ;
color:#fff;
font-family:"Microsoft YaHei";
}
@media \0screen\,\screen\9 {
.easyui-tree > li ul li > ul li .tree-node {
position: static;
background-color: #0E9CF5;
*zoom: 1;
filter: alpha(opacity=20);
}
}
/*1级的下拉按钮*/
.easyui-tree > li > div span:first-child{
background:url('img/seldown.png') no-repeat 90% 50%;
float:right;
margin-right:20px;
margin-top:11px;
}
/*2级的下拉按钮*/
.easyui-tree > li ul li .tree-node span:nth-child(2){
background:url('img/seldown.png') no-repeat 90% 50%;
float:right;
margin-right:20px;
margin-top:11px;
}
.zhankai{
background:url('img/zhankai.png') no-repeat 90% 50%;
float:right;
margin-right:20px;
margin-top:11px;
}
/*移动变色*/
.tree-node-hover{
background-color:rgba(254,138,35,0.4) !important ;
}
@media \0screen\,\screen\9 {
.tree-node-hover {
position: static;
background-color: #fe8a23 !important;
*zoom: 1;
filter: alpha(opacity=40);
}
}
</style>
index.html
<!--设置-->
<div id="monitoring">
<div id="leftArea">
<div id="btn">
<button class="btnitem" id="add">新建</button>
<button class="btnitem" id="edit">修改</button>
<button class="btnitem" id="remove">删除</button>
</div>
<div class="affixbox ">
<div class="easyui-tree" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data.json',
method: 'get',
animate: true,
onClick: function(node){
$(this).tree('beginEdit',node.target);
}
"></ul>
</div>
</div>
</div>
<iframe id="rightArea" src="permission.html"></iframe>
</div>
<script src="js/treeMenu.js"></script>
<script>
$('#tt').tree({
url: 'tree_data.json'
});
$('#tt').tree({
url: 'tree_data.json',
loadFilter: function (data) {
if (data.d) {
return data.d;
} else {
return data;
}
}
});
$(' .easyui-tree > li > div span:first-child').click(function () {
$(this).attr('style','background:url("img/zhankai.png") no-repeat 90% 50%');
})
</script>
tree_data.json
[{
"id":1,
"text": "guangxun",
"children":[{
"text":"yanfa",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"lingdao",
"checked":true
}]
},{
"text":"xiaoshou",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"lingdao",
"checked":true
}]
}]
},{
"text":"yunke",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
easyUI文档有详细案例