<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE html>
<html>
<head>
<title>左右布局</title>
<%@include file="../assets/header-all.jsp"%>
</head>
<body class="easyui-layout">
 <div data-options="region:'west'"  style='width:600px'  title='west面板'>
     
     <div class="easyui-layout" data-options="fit:true">
		            
		            <div data-options="region:'north',collapsible:false,border:false" style="height: 76px;">
		                				
						 	<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 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'" class="easyui-layout" title='center面板' >

     <div class="easyui-layout" data-options="fit:true">
     
		            <div data-options="region:'north',collapsible:false,border:false" style="height: 76px;">
		                				
						 	<div class="form-line clearfix">
										<div class="fl">
											<span class="text-content">开始时间：</span>
											<input name="startTime" id="startTime" type="text" class="easyui-datetimebox">
										</div>
										<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='rightGrid'></table>
					 </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,							//指定列的宽度
			formatter:function(value){
				return "<a class='ahref'>"+ value +"</a>"
			}
		}, {
			title: "类型名称",
			field: "csmc",
			width: 120,
			formatter:function(value,record,num){	//单元格的格式化函数,
/* 				var text = "";						//需要三个参数：value：字段的值，rowData：行的记录数据，rowIndex：行的索引。
				if(value == 1) text = '登录';
				if(value == 2) text = '查询列表';
				if(value == 3) text = '增加';
				if(value == 4) text = '修改';
				return text; */
				return value;
			}
		},{
			title: "设备状态",
			field: "sbztname",
			width:180,
			formatter:function(value,record,num){		//单元格的格式化函数
				return "<div title='" +  value + "'>" +value +"</div>"
			}
		}] ]
	});
	$("#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){
			$("#leftGrid").datagrid("loadData",data);
			$("#rightGrid").datagrid("loadData",data);
		}
	})
}
</script>
</html>