easyUI 的datagrid的自适应布局(一)

    昨天调试datagrid的页面自适应，有些东西想要和大家分享一下。

    自适应（ResponsiveWeb Design），我的简单理解：是自动识别屏幕的宽度，然后自动调节。相了解更深，可以网上百度。

先来说datagrid的两种布局方式：

第一种：简单的布局

	
	

		

			课程： 
							 
				
			          题型： 
					
			
			          
			
			 
			查询
			
		
	
	
	
	

		
		

			添加 
			修改
			删除
		
		
		
		

			

				

					

						
 
						
题干
 
						
难度等级
 
						
分值
 
					
				
			
	    
	
	
	
	

		
		
查看详情
	

第二种布局

代码实现：

	
	

	     
		

			
查询结果
			

		
		
		
		
	
			
				
			

				

					添加 删除
					复用
				
			

			
			

				

					

						
						
									
							
				
								

									

									
									
模板名称
									
期望分值
									
难度系数
									
总分
									
操作人
								
							
						
					
				
			
		
	

说一下在解决这个问题中：

①如果使用自适应，所有的宽度，必须都是百分比。在设置自适应的表格的时候，不仅仅是将表格进行百分比设置，同时还需要将表格的外面包括的div，进行设置。

②如果你发现了，你设置的宽度没有起作用，可能在某个地方见样式抽出来了，设置了固定的宽度。

三、自适应布局：

引用：http://blog.163.com/jin_wangjia/blog/static/2904321620145198414922/

1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他div的话，datagrid就不能很好的自动适应窗体。如查datagrid有分页控件，分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好的解决自适应问题。

代码如下：

data-options="fit:true">
	

		
	
	

		
	

2：基于body标签的easyui-layout当浏览器窗口大小改变时,easyui-layout可以根据窗口的大小来调整自己的大小.基于div标签的easyui-layout如果想拥有上述功能必须设置easyui-layout的属性fit等于true.

情形1：

情形2：

3：在html中定义easyui时，下面两种写法是一样的。即easyui控件的属性可以写在dataoptions属性里，也可以把这些属性写到标签上。

写法1

 
data-options="fit:true">
	
data-options="region:'north'" style="height:100px">
		
	
data-options="region:'center'">

写法2：

fit="true">
	
region="north"style="height:100px;">
		
	
	
region="center">
           	
	
			
 

这只是自己做的时候的，一些小感受，写篇博客记录下来。希望对大家有用。