<%@ 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:'north',collapsible:false" style='height:76px;' title='north面板'>

			<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 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'" title='center面板'>

		<div class="easyui-layout" dataoptions="fit:true" style='height:100%;'>
		
				 <div data-options="region:'west'"  style='width:300px'  title='west面板'>
     
					<div id="roleTree" ></div>
					
				</div>
				<div data-options="region:'center'" class="easyui-layout" title='center面板' >
						<table id='rightGrid'></table>
				</div>
		</div>

</div>



 
</body>
<script type="text/javascript">
$(function() {
	initGrid();									//加载列表
	initTree();
});
function initGrid(){
	var toolbar = [{							//操作栏
        text:'查询',								//按钮文字
        iconCls:'icon-search',					//按钮图标
        handler:function(){doSomething();}		//点击执行的方法
    },{	
        text:'增加',								//按钮文字
        iconCls:'icon-add',						//按钮图标
        handler:function(){doSomething();}		//点击执行的方法
    }];
	$('#rightGrid').datagrid({					
		toolbar: toolbar,						
		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)
		}
	})
}

function initTree(){
	roleTree = $('#roleTree').tree({
        lines:false,
		animate: false, 
    	multiple:false,
    	editable:false,
    	border:false,
    	parentField:"sjbmbh",  
    	textFiled:"bmmc",  
    	idFiled:"bmbh",
    	collapse :true,
    	data: [{
    		bmmc:'管理员列表',
	 		id  	:"adminuser",
	 		bmbh	:'adminuser'
		},{	
			bmmc: '普通用户列表',
			id  	:"alluser",
			bmbh	:'alluser'
		},{	
			bmmc: '组织结构' ,
			id  	:"-1",
			state	:'open',
			wholePath:'-1',
			bmbh	:'-1'
		}]
	});
	$.ajax({
		url:'tree.json',
		type:'get',
		dataType:'json',
		success:function(data){
			roleTree.tree("append",{
				parent : roleTree.tree('find', -1).target,
				data   : data
			});
	    	var node = roleTree.tree('find', "adminuser");
	    	roleTree.tree('select', node.target);
		}
	})
}
</script>
</html>