DataGrid（数据表格）

最新推荐文章于 2025-03-14 10:26:14 发布

墨渐生微

最新推荐文章于 2025-03-14 10:26:14 发布

阅读量1.6k

点赞数 1

分类专栏： easyUI

本文链接：https://blog.youkuaiyun.com/Mythology_px/article/details/83033986

版权

easyUI 专栏收录该内容

9 篇文章

订阅专栏

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>数据表格:从现有的表格元素创建DataGrid</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	</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>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>数据表格:Javascript去创建DataGrid控件</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	</head>
	<script type="text/javascript">
		$(function(){
			$('#dg').datagrid({ 
				// 读取从后台写出的数据表格json
			    url:'getDataServlet',    
			    columns:[[
			    	// 将后台的json字符串中的数据与列对应  
			        {field:'name',title:'Code',width:100},    
			        {field:'sex',title:'Name',width:100},    
			        {field:'age',title:'Price',width:100,align:'right'}    
			    ]],
			    // DataGrid控件底部显示分页工具栏
			    pagination:true,
			    toolbar: [{
					iconCls: 'icon-edit',
					text:"修改",
					handler: function(){
						//获取选中的行对象
						//var rowObj=$('#dg').datagrid('getSelected');
						//alert(rowObj.age);  
						//选中所有行
						$('#dg').datagrid('checkAll');
						
					}
				},'-',{
					iconCls: 'icon-remove',
					text:"删除",
					handler: function(){
						//取消选中所有行
						$('#dg').datagrid('uncheckAll');
					}
				}] 
			});
		});
	</script>
  
 	<body>
		<table id="dg"></table> 
 	</body>
</html>