您的位置: 首页  >  文章  >  EasyUI入门（DataGrid）

EasyUI入门（DataGrid）

分类: 文章 • 2022-10-12 09:15:46

            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-------------------------------

相关推荐