<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout布局 全局</title>
<!-- 1 先引入jquery的库 (注意库 千万别引错了) -->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!-- 2 在引入EasyUI的库 -->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!-- 3 在引入EasyUI 的主样式文件 -->
<link rel="stylesheet" href="/jQueryEasyUI_1/js/themes/default/easyui.css"></link>
<!-- 4 在引入EasyUI 的主样式文件 -->
<link rel="stylesheet" href="/jQueryEasyUI_1/js/themes/icon.css"></link>
<!-- 5加入国际话的文件 -->
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
//使用面向对象的方法初始化页面左边的树
xiaoshi.pageUI.init();
// 自动推送消息 消息将显示在右下部
$.messager.show({
title:'您有新的消息',
msg:'<a href="#">消息将在5秒后关闭。</a>',
height:200,
timeout:5000,
showType:'slide'
});
});
var xiaoshi={
pageUI:{
init:function(){
$("#jtree").tree({
url:"tree-date.json",
animate:true,
//点击树形菜单按钮出现新的tab
onClick:function(node){
//alert($("#center_tables").tabs("getTab",node.text));//null
//判断是否已经打开过了 如果是空的就打开一个新的
if($("#center_tables").tabs("getTab",node.text)==null){
$("#center_tables").tabs('add',{
title:node.text,
//content:'Tab Body',
//如果内容太多要使用href远程引入一个文件
href:"table.jsp",
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}],
//-------------页面加载完毕之后触发 火车表格事件---------------------
onLoad:function(){
//$.getScript("huoche_.js");可以把下面的代码封装起来，远程加载一段js代码过来
$("#table_grid").datagrid({
url:"data_grid.json",//ajax访问url地址 反悔json数据
columns:[[
{field:'code_number',title:'车次',width:100,align:'center',checkbox:true},
{field:'startstate',title:'出发站<br>到达站',width:100,align:'center'},
{field:'time',title:'出发时间<br>到达时间',width:100,align:'center'},
{field:'totalTime',title:'历时',width:100,align:'center'},
{field:'swz',title:'商务座',width:100,align:'center'},
{field:'tdz',title:'特等座',width:100,align:'center'},
{field:'wz',title:'无座',width:100,align:'center'},
{field:'bz',title:'备注',width:100,align:'center'}
]],
fit:true,
pagination:true,//在底部显示分页数据
//数据加载完毕之后触发事件,让其加载数据中easyUi的样式
onLoadSuccess:function(){
$("#btn1,#btn2,#btn3,#btn4,#btn5").linkbutton({
iconCls:'icon-add'
});
},
//编辑按钮
toolbar: [{
iconCls: 'icon-edit',
text:"编辑",
handler: function(){alert('编辑按钮')}
},{
iconCls: 'icon-add',
text:"添加",
handler: function(){alert('添加按钮')}
},{
iconCls:'icon-search',
text:"搜索",
handler:function(){
$("#win").show();
$("#win").window({
height:200,
width:300,
title:"员工搜索",
modal:true
})
}
}],
loadMsg:"亲，正在加载中...请耐心等待!",
fitColumns:true,//让其自适应
rownumbers:true,//显示行号
singleSelect:true,//只允许选择一行
onDblClickRow:function(rowIndex, rowData){//当用户双击一行的时候触发
//alert(rowIndex);
alert(rowData.code_number);//双击出现车次号
}
});
}
//---------------------------------------------------------------
});
}else{
$("#center_tables").tabs("select",node.text);
}
//alert($("#center_tables").tabs("getTab",node.text));//object
}
})
}
}
}
</script>
</head>
<body class="easyui-layout">
<!-- 北部 -->
<div data-options="region:'north',title:'',split:true" style="height:100px;">
<h2 style="align:center">欢迎使用小施制作面板布局控制</h2>
</div>
<!-- 南部 -->
<div data-options="region:'south',title:'',split:true" style="height:30px;">
南部面板小施制作
</div>
<!-- 东部 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 西部 -->
<div data-options="region:'west',title:'西部面板',split:true" style="width:230px;">
<div id="aa" class="easyui-accordion" style="width:300px;height:200px" data-options="fit:true">
<div title="协同办公平台" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
<ul id="jtree" ></ul>
</div>
<div title="物流管理平台" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<div title="客户管理平台">
content3
</div>
</div>
</div>
<!-- 中部 -->
<div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
<div id="center_tables" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">
<div title="Tab1" style="padding:20px;background:white">
tab1
</div>
</div>
</div>
</body>
</html>tree-data.json
代码语言：javascript复制[{
"id":1,
"text":"蚌埠学院",
"children":[{
"id":11,
"text":"计算机工程学院",
"state":"closed",
"children":[{
"id":111,
"iconCls":"icon-no",
"text":"14软件工程",
"attributes":{
"url":"www.baidu.com"
}
},{
"id":112,
"iconCls":"icon-add",
"text":"14计算机科学"
},{
"id":113,
"text":"14网络工程"
}]
},{
"id":12,
"text":"数理系",
"children":[{
"id":121,
"text":"14工程数学"
},{
"id":122,
"text":"14理论数学",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"14工程物理学"
},{
"id":124,
"text":"14理论物理学",
"checked":true
}],
"attributes":{
"url":"www.baidu.com"
}
},{
"id":13,
"text":"化学系"
},{
"id":14,
"text":"机电系"
},{
"id":15,
"text":"外语系"
}]
}]data-grid.json
代码语言：javascript复制{
"totals":330,
"rows":[
{"code_number":"G110","startstate":"北京<br>上海","time":"12:56<br>13:29","totalTime":"02:00:00","swz":"有","tdz":"有","wz":"有","bz":"<a id='btn1' href='#' class='easyui-linkbutton' data-options='iconCls:"icon-search"'>预定</a> "},
{"code_number":"G110","startstate":"北京<br>上海","time":"12:56<br>13:29","totalTime":"02:00:00","swz":"有","tdz":"有","wz":"有","bz":"<a id='btn2' href='#' class='easyui-linkbutton' data-options='iconCls:"icon-search"'>预定</a>"},
{"code_number":"G110","startstate":"北京<br>上海","time":"12:56<br>13:29","totalTime":"02:00:00","swz":"有","tdz":"有","wz":"有","bz":"<a id='btn3' href='#' class='easyui-linkbutton' data-options='iconCls:"icon-search"'>预定</a>"},
{"code_number":"G110","startstate":"北京<br>上海","time":"12:56<br>13:29","totalTime":"02:00:00","swz":"有","tdz":"有","wz":"有","bz":"<a id='btn4' href='#' class='easyui-linkbutton' data-options='iconCls:"icon-search"'>预定</a>"},
{"code_number":"G110","startstate":"北京<br>上海","time":"12:56<br>13:29","totalTime":"02:00:00","swz":"有","tdz":"有","wz":"有","bz":"<a id='btn5' href='#' class='easyui-linkbutton' data-options='iconCls:"icon-search"'>预定</a>"},
{},
{},
{},
{},
{}
]
}
