【数据表格】-004-columns特性 -

lipiaoshui2015

浏览: 101464 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【数据表格】-004-columns特性

博客分类：

easyui

【数据表格】-004-columns特性

1、columns特性的属性说明

2、WebContent/jsp/datagrid_004.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>数据表格--columns特性</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'
			pagination:true, //在表格底部显示分页栏，默认为false不显示
			pageSize:5, //当设置了pagination特性时，初始化每页显示的记录数
			pageList:[5,10,15,20,50], //当设置了pagination特性时,初始化页面尺寸的选择列表,默认值[10,20,30,40,50]
			rowStyler:function(rowIndex,rowData) { //行样式设置
				if(rowData.age>25) {
					return "background:red";
				}
			},
			columns:[[ //定义对应后台传过来的列名(field),表格列的名字(title),表格宽度(width),表格列的对齐方式(align)
			    {
					field:'ck',
					width:50,
					checkbox:true
				},
			    {
			    	field:'username',
			    	title:'用户名',
			    	width:100,
			    	styler:function(value,rowData,rowIndex){ //单元格的样式函数
			    		if(value == 'admin') {
			    			return 'background:blue;';
			    		}
			    	}
			    },
				{
			    	field:'password',
			    	title:'密码',
			    	width:100,
			    	hidden:true
			    },
				{
			    	field:'age',
			    	title:'年龄',
			    	width:100,
			    	align:'right',
			    	sortable:true
			    },
				{
					field:'sex',
					title:'性别',
					width:50,
					formatter:function(value,rowData,rowIndex){ //单元格的格式化函数
						if(value == 1) {
							return '男';
						} else if(value == 2) {
							return '女';
						}
					}
				},
				{
					field:'birthday',
					title:'生日',
					width:100
				},
				{
					field:'city',
					title:'所属城市',
					width:100,
					formatter:function(value,rowData,rowIndex){ //单元格的格式化函数
						var str = '';
						$.ajax({
							type:'post',
							url:'<%=root %>/UserServlet?method=getCityName',
							cache:false,
							async:false, //同步请求
							data:{id:value},
							dataType:'json',
							success:function(result) {
								str = result.name;
							}
						});
						return str;
					}
				},
				{
					field:'salary',
					title:'薪水',
					width:100
				},
				{
					field:'starttime',
					title:'开始时间',
					width:180
				},
				{
					field:'endtime',
					title:'结束时间',
					width:180
				},
				{
					field:'description',
					title:'个人描述',
					width:150,
					formatter:function(value,rowData,rowIndex){ //单元格的格式化函数
						return '<span title='+value+'>'+value+'</span>';
					}
				}
			]]
		});
	});
</script>
</head>
<body>
	<table id="t_user"></table>
</body>
</html>

3、com.easyui.bean.CityBean.java

package com.easyui.bean;

/**
 * 城市基本信息 
 * @author LiPiaoShui
 */
public class CityBean {

	private int id;
	private String name;
	
	public CityBean(int id, String name) {
		this.id = id;
		this.name = name;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

4、com.easyui.servlet.UserServlet.java

package com.easyui.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.easyui.bean.CityBean;
import com.easyui.bean.TUserBean;
import com.easyui.dao.UserDao;

/**
 * 用户控制器类
 * 
 * @author LiPiaoShui
 */
public class UserServlet extends HttpServlet {

	private static final long serialVersionUID = 9140830946116659042L;
	private UserDao uDao = new UserDao();

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String method = request.getParameter("method");
		if ("getList".equals(method)) {
			getList(request, response);
		} else if("getCityName".equals(method)) {
			getCityName(request, response);
		}
	}

	/**
	 * 获取城市信息
	 * @param request
	 * @param response
	 */
	private void getCityName(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			List<CityBean> cList = new ArrayList<CityBean>();
			cList.add(new CityBean(1,"北京"));
			cList.add(new CityBean(2,"上海"));
			cList.add(new CityBean(3,"深圳"));
			cList.add(new CityBean(4,"长春"));
			int id = Integer.parseInt(request.getParameter("id"));
			for(CityBean city:cList) {
				if(id == city.getId()) {
					response.setContentType("text/html;charset=utf-8");
					response.getWriter().write(JSONObject.fromObject(city).toString());
				}
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获取全部用户信息
	 * 
	 * @param request
	 * @param response
	 */
	private void getList(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			//当前页码
			int currentPage = Integer.parseInt(request.getParameter("page"));
			//每页显示的大小
			int pageSize = Integer.parseInt(request.getParameter("rows"));
			// 获取分页显示的用户信息
			List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize);
			//获取总用户数
			int total = uDao.getTotal();
			// json格式 --> {"total":10,"rows":[{},{}]}
			String json = "{\"total\":" + total + ",\"rows\":"
					+ JSONArray.fromObject(uList).toString() + "}";
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

5、formatter单元格的格式化函数

6、sortable允许此列被排序