<%@ 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',split:false,collapsible:false" title='表格名称' id='north' style="height: 108px;padding:1px;border-bottom: none">
 	 
				 	<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" class="easyui-layout">
	<table id='tableGrid'></table>
 </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();}		//点击执行的方法
    }];
	$('#tableGrid').datagrid({					//指定需要初始化的表格
		toolbar: toolbar,						//工具栏设置
		//rownumbers : true,					//是否显示行号，默认为 false
		singleSelect:false,						//是否只能勾选一行
		queryParams: {          				//当请求远程数据时，发送的额外参数
			    
      },  
		url :"",								//请求数据的 URL
		columns : [ [ 							//列的初始化定义
		{ 
			field: 'A',							//勾选框checkbox
			checkbox:'true',
			width:30
		},{
			title: "设备厂商 ",						//列名称
			field: "cjmc",						//对应字段
			width: 120 							//列宽
		}, {
			title: "设备编号",
			field: "sbmc",
			width: 120
		}, {
			title: "类型名称",
			field: "csmc",
			width: 120
		},{
			title: "设备状态",
			field: "sbztname",
			sortable: false,
			width:280,
			formatter:function(value,record,num){		//单元格的格式化函数
				return "<div title='" +  value + "'>" +value +"</div>"
			}
		}] ]
	});
	$.ajax({
		url:'test.json',
		type:'get',
		dataType:'json',
		success:function(data){
			$('#tableGrid').datagrid("loadData",data)
		}
	})
}

</script>
</html>