先亮张图吸引一下看官老爷们
那么是怎么实现的呢？
一：组件入门
1.layout
easyUI的布局按东西南北中分
考一个官方的例子放在这里
<h2>Complex Layout</h2>
<p>This sample shows how to create a complex layout.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:180px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<div data-options="region:'west',split:true" title="West" style="width:100px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="selected:true" style="padding:10px;">
content2
</div>
<div title="Title3" style="padding:10px">
content3
</div>
</div>
</div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="About" data-options="href:'_content.html'" style="padding:10px"></div>
<div title="DataGrid" style="padding:5px">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">Item ID</th>
<th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="50">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
2.选项卡：
<h2>Tabs Tools</h2>
<p>Click the buttons on the top right of tabs header to add or remove tab panel.</p>
<div style="margin:20px 0;"></div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" οnclick="addPanel()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" οnclick="removePanel()"></a>
</div>
<script type="text/javascript">
var index = 0;
function addPanel(){
index++;
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '<div style="padding:10px">Content'+index+'</div>',
closable: true
});
}
function removePanel(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>视图：
3.树
<h2>Basic Tree</h2>
<p>Click the arrow on the left to expand or collapse nodes.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
二：整合
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'layout.jsp' starting page</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/js/table.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/function.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/icon.css" type="text/css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui-1.4.1/themes/icon.css" type="text/css"/>
<script>
$(function(){
$('#tt').tree(
{
onClick:function(node){
var title = node.text ;
if(title=="教师管理"){
var url = "${pageContext.request.contextPath}/easyUi.jsp" ;
addTab(title, url) ;
}else if(title=="文件管理"){
var url = "${pageContext.request.contextPath}/upload.jsp" ;
addTab(title, url) ;
}
else if(title=="基于jsp的文件上传下载"){
var url = "${pageContext.request.contextPath}/easyUIFileM.jsp" ;
addTab(title, url) ;
}
else{
alert("功能模块未开发");
}
}
});
//添加选项卡
function addTab(title, url){
content = '<iframe scrolling="auto" frameborder="0" src="' + url+ '" style="width:100%;height:100%;"></iframe>';
if(!$("#tabs").tabs('exists', title)){
$("#tabs").tabs("add", {
title : title,
closable : true,
content : content,
width: $('#mainPanle').width() ,
height: $('#mainPanle').height(),
} );
}else{
$('#tabs').tabs('select', title);
}
}
function tabClose() {
/*双击关闭TAB选项卡*/
$(".tabs-inner").dblclick(function () {
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close', subtitle);
})
$(".tabs-inner").bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle = $(this).children("span").text();
$('#mm').data("currtab", subtitle);
return false;
});
}
//绑定右键菜单事件
function tabCloseEven() {
//关闭当前
$('#mm-tabclose').click(function () {
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close', currtab_title);
})
//全部关闭
$('#mm-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
$('#tabs').tabs('close', t);
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function () {
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
if (t != currtab_title)
$('#tabs').tabs('close', t);
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
//msgShow('系统提示','后边没有啦~~','error');
alert('后边没有啦~~');
return false;
}
nextall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 0) {
alert('到头了，前边没有啦~~');
return false;
}
prevall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
}
}
) ;
</script>
</head>
<body class="easyui-layout">
<!--1.1 egion="north"，指明高度，可以自适应-->
<div region="north" style="height:80px;">
<center> <h1>管理系统</h1></center></div>
<!--1.2 region="west",必须指明宽度-->
<div region="west" split="true" title="导航菜单" style="width: 200px;">
<div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">
<div title="系统管理" iconcls="icon-save" style="overflow: auto; padding: 10px;">
<ul class="easyui-tree" id="tt">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span>教师管理</span>
</li>
<li>
<span>文件管理</span>
</li>
<li>
<span>基于jsp的文件上传下载</span>
</li>
</ul>
</li>
<li >
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
</div>
<div title="权限管理" iconcls="icon-reload" selected="true" style="padding: 10px;">
<ul class="easyui-tree" id="tx">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span>管理员</span>
</li>
<li>
<span>老师</span>
</li>
<li>
<span>角色管理</span>
</li>
</ul>
</li>
<li >
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
</div>
<div title="其他管理">
content3
</div>
</div>
</div>
<!--1.3region="center",这里的宽度和高度都是由周边决定，不用设置-->
<div region="center" title="管理系统" style="padding:5px;background:#eee;" id="cen" >
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>Welcome to jQuery UI!</h1>
</div>
</div>
</div>
<!--x选项卡 -->
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<!-- <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
<h1>Welcome to jQuery UI!</h1>
</div> -->
<div id="dg" fit="true"/>
</div>
<!--1.5 region="south"，指明高度，可以自适应-->
<div region="south" style="height:50px;"><center> <h3>页面底部</h3></center></div>
</body>
</html>
添加选项卡的方法：
$(function(){
$('#tt').tree(
{
onClick:function(node){
var title = node.text ;
if(title=="教师管理"){
var url = "${pageContext.request.contextPath}/easyUi.jsp" ;
addTab(title, url) ;
}else if(title=="文件管理"){
var url = "${pageContext.request.contextPath}/upload.jsp" ;
addTab(title, url) ;
}
else if(title=="基于jsp的文件上传下载"){
var url = "${pageContext.request.contextPath}/easyUIFileM.jsp" ;
addTab(title, url) ;
}
else{
alert("功能模块未开发");
}
}
});
//添加选项卡
function addTab(title, url){
content = '<iframe scrolling="auto" frameborder="0" src="' + url+ '" style="width:100%;height:100%;"></iframe>';
if(!$("#tabs").tabs('exists', title)){
$("#tabs").tabs("add", {
title : title,
closable : true,
content : content,
width: $('#mainPanle').width() ,
height: $('#mainPanle').height(),
} );
}else{
$('#tabs').tabs('select', title);
}
}
function addTab(title, url) content = '<iframe scrolling="auto" frameborder="0" src="' + url+ '" style="width:100%;height:100%;"></iframe>';
得到content，即选项卡里面的内容。因此关键及时url了，因为要添加datagrid在选项卡里，所以就把datagrid所在的那个jsp页面的路径传进来就可以了。这样就完成了
三：总结
easyUI的官网给出的demo很全面，但是里面的事件绑定和与后台交互的方法对于我们这些初学者来说比较麻烦。
扫一扫
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
