【数据表格】-002-表格的基本特性 -

lipiaoshui2015

浏览: 101434 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【数据表格】-002-表格的基本特性

博客分类：

easyui

【数据表格】-002-表格的基本特性

1、WebContent/jsp/datagrid_002.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>	
<!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>数据表格--表格的基本特性</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$('#t_user').datagrid({
			idField:'id', //标识字段，只要创建数据表格,就必须要加 idField
			url:'<%=root %>/UserServlet?method=getList', //后台访问地址
			title:'用户列表', //表格标题
			width:1000, //表格宽度
			height:400, //表格高度
			fitColumns:true, //自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
			/*
			frozenColumns:[[ //冻结列特点，会将列冻结在左边，不能与fitColumns特性一起使用
				{field:'username',title:'用户名',width:100}
			]],*/
			striped:true, //隔行换色，默认值为false
			nowrap:true, //当true时，把数据显示在一行;当false时，数据会被换行;默认值为true
			loadMsg:'数据正在加载，请耐心等待...',
			rownumbers:true, //显示行号，默认为false
			singleSelect:true, //当true时，只允许单选，默认为false
			remoteSort:false, //定义是否从服务器给数据排序,默认值为true,当为false时,sortName和sortOrder设置才有效
			sortName:'salary', //定义可以排序的列
			sortOrder:'desc', //定义列的排序顺序，只能用'asc'或'desc'。
			rowStyler:function(rowIndex,rowData) { //行样式设置
				if(rowData.age>25) {
					return "background:red";
				}
			},
			columns:[[ //定义对应后台传过来的列名(field),表格列的名字(title),表格宽度(width),表格列的对齐方式(align)
			    {field:'username',title:'用户名',width:100},
				{field:'password',title:'密码',width:100},
				{field:'age',title:'年龄',width:100,align:'right'},
				{field:'sex',title:'性别',width:50},
				{field:'birthday',title:'生日',width:100},
				{field:'city',title:'所属城市',width:100,align:'right'},
				{field:'salary',title:'薪水',width:100},
				{field:'starttime',title:'开始时间',width:180},
				{field:'endtime',title:'结束时间',width:180},
				{field:'description',title:'个人描述',width:150}
			]]
		});
	});
</script>
</head>
<body>
	<table id="t_user"></table>
</body>
</html>

2、frozenColumns冻结列特性