JQuery EasyUI 案例加使用

时间 2019-12-17

原文原文链接

<%@ 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.jsonjavascript

[{
	"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.jsoncss

{
	"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>"},
		{},
		{},
		{},
		{},
		{}
	]
}