基本上用来做后台管理界面
第一步:导入easyui的包
第二步:在项目中引入几个文件
<link rel="stylesheet" type="text/css" href="/easyui_01/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui_01/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
第三步:去根据easyui dome去实现效果
:比如 一个布局
<body class="easyui-layout">
<!-- -->
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
我们需要写一个树形菜单
1.普通方法
<!-- 导入我们自己写的js -->
<script type="text/javascript" src="jquery-easyui-1.5.1/div/tree.js"></script>
<ul id="tt"></ul> //在页面加入这么一串代码就好
$(function(){
//去掉用那个json文件
$('#tt').tree({
url:'tree.json'
});
})
json文件 :是一个混合对象 类型与map的键值对
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"state":"closed",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java"
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games"
}]
},{
"id":16,
"text":"Actions",
"children":[{
"text":"Add",
"iconCls":"icon-add"
},{
"text":"Remove",
"iconCls":"icon-remove"
},{
"text":"Save",
"iconCls":"icon-save"
},{
"text":"Search",
"iconCls":"icon-search"
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
2.实现树形菜单的下拉列表链接数据库
这个不同的是json文件的列必须不能改变 就比如说id 就必须是id
但是我们数据库的列是不一致的
所以我们在拿到值之后需要进行转换
最后在servlet中调用这个方法就好了