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

相關標籤/搜索