shanhuijava 2016-01-19
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允许此列被排序
【说明】:该特性不能与remoteSort一起使用,且需要后台支持。
7、hidden隐藏此列
8、checkbox复选框
9、styler单元格的样式函数
10、formatter鼠标移上显示全部信息
11、formatter通过ajax请求获取后台的城市名称