求easyui大神,datagrid只占据高度的一半

plugin 发布于 2014/09/21 00:49
阅读 7K+
收藏 0

一开始只是测试<table class="easyui-datagrid"></table>.

这个指定多少宽高都显示正常

但是,这时候想把这个table放到布局的center里面,结果出现下面情况


好郁闷。不知道问题出在哪里。

代码比较乱,不过还是贴一下吧

<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../common.css"/>
	<link rel="stylesheet" type="text/css" href="../js/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="../js/themes/color.css" />
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/locale/easyui-lang-zh_CN.js"></script>


	<script type="text/javascript">
	
		$(function(){
		//	$(window).trigger('resize');
			$("#tt").datagrid({
				idField:'id',
				rownumbers:true,
				//singleSelect:true,
				url:'http://localhost:8080/Jquery/list',
				title: '用户列表',
			//	width: 850,
				//height:600,
				height:450 ,
			//	fit:true,
				fitColumns:false,
				striped:true,
				frozenColumns:[[				//冻结列特性 ,不要与fitColumns 特性一起使用 
									{
											field:'ck' ,
											width:50 ,
											checkbox: true
									}
							]],
				columns:[[
				         {field:'id',title:'ID',width:100,align:'center'},
				         {field:'name',title:'姓名',width:100},
				         {field:'age',title:'年龄',width:100,sortable:true},
				         {field:'sex',title:'性别',width:100,
				        	 formatter:function(value, record, index){
				        		 if(value == 1){
				        			 return '<span>男</span>'
				        		 }else{
				        			 return '<span>女</span>'
				        		 }
				        	 }},
				         {field:'address',title:'地址',width:100},
				         {field:'birthday',title:'生日',width:100},
				         {field:'rgTime',title:'注册时间',width:100},
				         ]],
				rowStyler:function(index,data){
					if(index == 10){
						return "background:red";
					}
				},
				pagination:true,
				pagelist:[10,15,30],
				pagesize:5,
				toolbar:[
				        {
							
				        	text:'新增用户',
				        	iconCls:'icon-add',
				        	handler:function(){
				        		$('#myDialog').dialog({
				        			title:'新增用户'
				        		});
				        		$('#myForm').get(0).reset();
				        		$('#myDialog').dialog('open');
				        		
				        	}
				        },{
				        	text:'修改用户',
				        	iconCls:'icon-edit',
				        	handler:function(){
				        		var attr = $('#tt').datagrid('getSelections');
				        		if(attr.length != 1){
				        			$.messager.show({
				        				title:'提示信息',
				        				msg:'只能选择一行操作'
				        			});
				        		}else{
					        		$('#myDialog').dialog({
					        			title:'修改用户'
					        		});
									$('#myDialog').dialog('open');
									$('#myForm').form('load',{
										username: attr[0].name,
										sex: attr[0].sex,
										age: attr[0].age,
										birthday: attr[0].birthday,
										address: attr[0].address,
										rgTime: attr[0].rgTime
									});
				        		}
				        		
				        	}
				        } ,{
				        	text:'删除用户',
				        	iconCls:'icon-remove',
				        	handler:function(){
				        		var arr =$('#tt').datagrid('getSelections');
				        		if( arr.length <= 0 ){
				        			$.messager.show({
				        				title:'提示信息',
				        				msg:'必须选中至少一行'
				        			});
				        		}else{
				        			$.messager.confirm('提示信息', '确认删除?',function(r){
				        				 if(r){
				        					 var ids = "";
				        					 for(var i = 0; i < ids.length; i++){
				        						 ids +=att[i].id + ',';
				        					 }	 
				        					 
				        					 ids = ids.substring(0, ids.length - 1);
				        					 $.post('',{ids:ids},function(result){
				        						 $('#tt').datagrid('reload');
				        						 $('#tt').datagrid('unselectAll');
				        						 $.messager.show({
				        							 title:'提示信息',
				        							 msg:'操作成功'
				        						 });
				        					 });
				        				 }
				        			});
				        		}
				        	},
				        },{
				        	text:'查询用户',
				        	iconCls:'icon-search',
				        	handler:function(){
				        		
				        	}
				        }
				        
				        ]
			});
			
			/*
				关闭窗口的方法
			*/
			
			$("#btn2").click(function(){
				$("#myDialog").dialog("close");
			});
			
			//提交按钮
			
			$("#btn1").click(function(){
				if($("myForm").form('validate')){
					$.ajax({
						type:'post',
						url:'../regist',
						dataType:'text',
						cache:false ,
						data: $('#myForm').serialize(),
						success:
							function(result){
								$("#myDialog").dialog("close");
								//先不刷新
								$('#tt').datagrid('reload');
								$.messager.show({
									title:'提示信息',
									msg: result
								});
							},
						error:function(result){
								alert(arguments[1]);
							}
					});
				}else{
					$.meesager.show({
						title:'提示', 
						msg:'一开始就出错了'
					});
				}
				
			});
			
		});
	</script>
</head>
<body>

	<div id="lay" class="easyui-layout" style="height:100%;width:100%">
		<div region="north" title="用户查询" collapsed=true style="height:100px;" >
		
		</div>
		<div region="center"style="height:100%;width:100%" >
				<table id="tt"></table>
		</div>
	</div>

	<div id="myDialog"class="easyui-dialog" closed=true title="新增用户"  style="width:360px;height:300px; padding: 20px 35px;">
		<form id="myForm" action="">
			<table>
				<tr>
					<td>用户名:</td>
					<td><input id="username" name="username" style="margin-bottom:5px;" type="text" /></td>
				</tr>			
				<tr>
					<td>密码:</td>
					<td><input  style="margin-bottom:5px;  id="password" name="password" type="password"/></td>
				</tr>			
				<tr>
					<td>生日:</td>
					<td><input id="birthday"  name="birthday" class="easyui-datebox" style="margin-bottom:5px; "/></td>
				</tr>			
				<tr>
					<td>年龄:</td>
					<td><input id="age" name="age" type="text"/></td>
				</tr>			
				<tr>
					<td>性别:</td>
					<td>男<input id="sex" name="sex" checked="checked" type="radio" value="1"/>
		女<input id="sex" name="sex" type="radio" value="0"/></td>
				</tr>
				<tr>
					<td>地址:</td>
					<td><input name="address" class="easyui-combobox"  url="../test" valueField="id" textField="name"/></td>
				</tr>
				<tr >
					<td  colspan="2">
						<span style="line-height: 70px; margin-left: 35px">
							<a id="btn1"  iconCls="icon-ok" style="margin-right:55px " class="easyui-linkbutton">确定</a>
							<a id="btn2"  iconCls="icon-cancel" class="easyui-linkbutton">关闭</a>
						</span>
					</td>		
				</tr>
			</table>
		</form>
	
	</div>
	
<!-- 	<div id="tt" class="easyui-datagrid" title="data"></div> -->
	<table id='tt'></table>
</body>
</html>



加载中
0
铂金小鸟
铂金小鸟
另外你这个页面结构,建议你去掉 id="lay"的div,直接把  class="easyui-layout" 加给 body。
0
铂金小鸟
铂金小鸟
第196行和242行, 两个  <table id='tt'></table>  是什么意思?
0
plugin
plugin

引用来自“铂金小鸟”的评论

第196行和242行, 两个  <table id='tt'></table>  是什么意思?
哦。不好意思。一开始的位置是242,后来想放到196,注释掉了之后还是老问题
0
plugin
plugin

引用来自“铂金小鸟”的评论

另外你这个页面结构,建议你去掉 id="lay"的div,直接把  class="easyui-layout" 加给 body。

这样做可以,非常感谢。不会有什么问题吧

 

0
T
Thomas_FYP
你可以这样写function loadDatagridSize(id){
$("#"+id).datagrid("resize",{
height:$(document.body).height(),
width:$(document.body).width()
});
} 然后调用函数把你的datagrid传进去就OK了
返回顶部
顶部