EasyUI入门(DataGrid)

时间:2024-03-19 18:54:12

            DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

一.创建DataGrid(数据网格)

1.通过table表来创建datagrid

            既然是数据网格,网格也就是tabel表,所以我们可以通过html页面中已存在的table表来创建数据网格。从现有的表格元素创建DataGrid,在HTML中定义列、行和数据。

<%@ 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>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body>   
    <table class="easyui-datagrid">   
	    <thead>   
	        <tr>   
	            <th data-options="field:'code'">编码</th>   
	            <th data-options="field:'name'">名称</th>   
	            <th data-options="field:'price'">价格</th>   
	        </tr>   
	    </thead>   
	    <tbody>   
	        <tr>   
	            <td>001</td><td>name1</td><td>2323</td>   
	        </tr>   
	        <tr>   
	            <td>002</td><td>name2</td><td>4612</td>   
	        </tr>   
	    </tbody> 
	      
</table>  
  
</body>  
</html>

                  Html页面中的table表有tfoot属性,我尝试着在datagrid中添加一个tfoot标签,但是在页面效果中并没有显示。

                  这里的<thead>标签中的<tr>中的<th>(注意是th而不是td)标签中的field字段用来接收从后台传来的值,只有这个field字段和后台的字段值一样,才能将数据填充到datagrid中。

                  页面效果图:

EasyUI入门(DataGrid)

                既然我们是通过html页面中已存在的table表来创建的datagrid的,所以我们可以通过这个table的style来指定这个表的宽和高,也就是指定这个datagrid的宽和高。如果我们没有指定,那么高度会自适应,而宽度为整个屏幕。如果我们在style属性中指定宽和高,那么一定要在height和width属性后面的长度后面加上 px ,如200px,150px,如果不加上px,那么不会显示出效果的。这个datagrid和input标签一样,只要初始化了宽和高,那么就不会发生改变,即使datagrid的面积不够数据显示的,那么数据会被hidden掉,而不是将宽和高的值变大从而显示所有数据。

                我们再来看一个Demo。

                通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<%@ 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>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
	
	});
</script>	
</head>
<body>   
   <table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
	    <thead>   
	        <tr>   
	            <th data-options="field:'code',width:50">编码</th>   
	            <th data-options="field:'name',width:50">名称</th>   
	            <th data-options="field:'price',width:50,align:'right'">价格</th> 
	            <th data-options="field:'price',width:50,align:'right'">品质</th>   
	        </tr>   
	    </thead>
	    <tbody>
	    	<tr>   
	            <td >111111111</td><td >1111111111111122222222222222222222222222</td> <td >1111111111</td> <td >11111111</td> <td >1111111111111111111</td>      
	        </tr> 
	        <tr>   
	            <td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>      
	        </tr> 
	        <tr>   
	            <td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>      
	        </tr> 
	    </tbody>   
   </table>
	      
</body>  
</html>

                  页面效果图:

EasyUI入门(DataGrid)

                    从这个小Demo中我们可以看到:我们是可以通过style来定义datagrid的大小的,通过data-options中的属性来定义单元格的大小,但是这有一个问题,在table表中的data-options中有一个属性fitColumns:true,当它为true时,是自适应datagrid的大小的,也就是说列的宽度会自适应datagrid大小,这样的话在 <th>标签中定义的单元格大小就没有意义了,只有将fitColumns:false设置为false,才会在页面显示自定义的单元格大小。   并且我们好像不能通过height属性来设置datagrid中单元格的高。

2.使用Javascript去创建DataGrid控件

<%@ 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>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
		//    url:'datagrid_data.json',    
		    columns:[[    
		        {field:'code',title:'Code',width:100},    
		        {field:'name',title:'Name',width:100},    
		        {field:'price',title:'Price',width:100,align:'right'}    
		    ]]    
		}); 
	}); 
	   
</script>	
</head>
<body>   
  <table id="dg">
  		<!-- 如果这块不写的话,只会显示标题 ,并且由于在上方script中定义了thead,所以在table里在定义一个thead是没有意义的,
  			 当然在页面中也是没有效果的。
  		-->
  		<tbody>
  			<tr><td>1</td><td>2</td><td>3</td></tr>
  		</tbody>
  </table>
</body>  
</html>

                页面效果图:

EasyUI入门(DataGrid)

                由于没有连接后台,所以对于datagrid来说非常重要的3个方法load()方法,reload()方法,loadData() 是没有办法测试的。

                并且,当我们在定义表的thead的时候,tr里面的标签用的是th标签,这样是能正确显示table中每列的标题的,但是如果把th换成td标签,那么将不会显示效果,也就是说,必须要用th标签,而不可以用td标签。

3.列属性

                DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。       

                 我们看一下最简单的列数组:

<%@ 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>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
		    url:'datagrid_data.json',    
		    columns:[[    
		        {field:'itemid',title:'Item ID',width:80,sortable:true},    
		        {field:'productid',title:'Product ID',width:80,sortable:true},    
		        {title:'Item Details'}    
		    ],[    
		        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},    
		        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},    
		        {field:'attr1',title:'Attribute',width:100},    
		        {field:'status',title:'Status',width:60}    
		    ]]      
		});  
	});
	   
</script>	
</head>
<body>   
 <table id="dg"></table>  
</body>  
</html>

                   效果演示图:

EasyUI入门(DataGrid)

                   我们可以看到第一个列数组显示在第一行,第二个列数组显示在第一行的下面,并且拥有sortable:true的属性的列在列名右面有一个上下的小箭头用于排序。

                   下面我们再来看一下合并行和列的列数组集合:

<%@ 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>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
		    url:'datagrid_data.json',    
		    columns:[[    
		        {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},    
		        {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},    
		        {title:'Item Details',colspan:4}    
		    ],[    
		        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},    
		        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},    
		        {field:'attr1',title:'Attribute',width:100},    
		        {field:'status',title:'Status',width:60}    
		    ]]      
		});  
	});
	   
</script>	
</head>
<body>   
 <table id="dg"></table>  
</body>  
</html>

                     页面效果图:

 EasyUI入门(DataGrid)

                     这个效果就和上面的不同了。原理就是原本第二行的数组标题应该对应着 第一行的数组标题,但是由于第一个数组标题的第一列和第二列合并了2行,所以相应的,就把第二行的数组标题 “挤”到了右面,应该是List Price列对应Item Details列,其他的列依次向右。而Item Details这时占了4列,所以,第二行数组标题就全都在Item Details列下,也就出现了如上图的页面效果。(如果不理解可以拷贝代码,然后删除某一个rowspan属性或者colspan属性在看效果,这样就很明显看出是怎么布局的了)

                     Over-------------------------------