<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
<head>
<title>左右布局-tabs</title>
<%@include file="../assets/header-all.jsp"%>
</head>
<body class="easyui-layout">
<div data-options="region:'west',collapsible:false" style='width:300px;' title='west面板'>
	<div class="easyui-layout" data-options="fit:true">		            
    	<div data-options="region:'north',collapsible:false,border:false" style="height: 120px;">		                				
 			<div class="form-line clearfix">
				<div class="fl">
					<span class="text-content">开始时间：</span>
					<input id="startTime" class="easyui-datetimebox">
				</div>
			</div>							
			<div class="form-line clearfix">
				<div class="fl">
					<span class="text-content">登录账号：</span> 
					<input id=loginName  class="easyui-textbox">
				</div>
			</div>							
			<div class="form-line clearfix">
				<div class="fl">
					<span class="text-content">用户状态：</span>
					<select class="easyui-combobox" id="userStatus">
			        	<option value="">全部</option>
			        	<option value="0">正常</option>
		            	<option value="1">停用</option>
					</select>
				</div>
			</div>										 
		</div>			           
       	<div data-options="region:'center',split:false,border:false">
			<table id='leftGrid'></table>
		 </div>
 	</div>								
</div>

<div data-options="region:'center'" title='center面板'>

		<div id="tt" class="easyui-tabs" data-options="fit:true,border:false">
			    <div title="Tab1" >
			    	<div class="easyui-layout" data-options="fit:true">
			    	
			    		<div data-options="region:'north',collapsible:false,border:false" style="height:38px;">
			    			<div class="form-line clearfix">
									<div class="fl">
										<span class="text-content">开始时间：</span>
										<input id="startTime" class="easyui-datetimebox">
									</div>
									<div class="fl">
										<span class="text-content">登录账号：</span> 
										<input id=loginName  class="easyui-textbox">
									</div>
							</div>
						</div>
						
						<div data-options="region:'center',split:false,border:false">
								<table id='rightGrid'></table>
					 	</div>
					 	
			    	</div>
					
			    </div>
			    <div title="Tab2" style="overflow:auto;">
					tab2
			    </div>
			    <div title="Tab3" data-options="iconCls:'icon-reload'">
					tab3
			    </div>
		</div>

</div>
 
</body>
<script type="text/javascript">
$(function() {
	initGrid();									//加载列表
});
function initGrid(){
	var toolbar = [{							//操作栏
        text:'查询',								//按钮文字
        iconCls:'icon-search',					//按钮图标
        handler:function(){doSomething();}		//点击执行的方法
    },{	
        text:'增加',								//按钮文字
        iconCls:'icon-add',						//按钮图标
        handler:function(){doSomething();}		//点击执行的方法
    }];
	$('#leftGrid').datagrid({					//指定需要初始化的表格
		toolbar: toolbar,						//工具栏设置
		rownumbers : true,					    //是否显示行号，默认为 false
		singleSelect:false,						//是否只能勾选一行
		queryParams: {},  
		url : "",								//请求数据的 URL
		columns : [ [ 							//列的初始化定义
		{
			title: "设备厂商",					//列的标题
			field: "cjmc",					//列的字段名    ->  一般对应返回的数据的字段名
			width: 120 							//指定列的宽度
		}, {
			title: "类型名称",
			field: "csmc",
			width: 120,
			formatter:function(value,row,num){
				return "<a href='javascript:editUserInfo("+ num +");' class='ahref'>"+(value||'')+"</a>";
			}
		}] ]
	});
	
	$('#rightGrid').datagrid({					
		toolbar: toolbar,						
		//rownumbers : true,					//是否显示行号，默认为 false
		singleSelect:false,						
		queryParams: {},  
		url : "",								//请求数据的 URL
		columns : [[							//列的初始化定义
			{ 
				field: 'A',							//单选框
				checkbox:'true',
				width:30
			},{
				title: "设备厂商 ",					
				field: "cjmc",					
				width: 120,
				formatter:function(value){
					return "<a class='ahref'>"+ value +"</a>"
				}
			}, {
				title: "设备编号",
				field: "sbmc",
				width: 120
			}, {
				title: "类型名称",
				field: "csmc",
				width: 120
			},{
				title: "设备状态",
				field: "sbztname",
				width:180
			}
		] ]
	});
	$.ajax({
		url:'test.json',
		type:'get',
		dataType:'json',
		success:function(data){
			$("#rightGrid").datagrid("loadData",data);
			$("#leftGrid").datagrid("loadData",data);
		}
	})
}
function editUserInfo(num){
	console.log(num)
}
</script>
</html>