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冻结列特性
3、striped隔行换色
4、nowrap数据换行显示
5、idField标识字段
6、loadMsg提示信息
7、rownumbers显示行号
8、singleSelect只允许单选
9、remoteSort、sortName和sortOrder是否从服务器给数据排序
10、rowStyler行样式设置