struts2+easyui的datagrid显示列表信息

easyui的datagrid主要用于显示列表信息，其中包含分页，也可通过设置显示行详情（参见文章“easyui在datagrid中显示行详情（二）”）。这里涉及到两个关键字：total、rows，total是显示数据的总行数，datagrid会根据设定的页容量计算总页数；rows对于的值就是要显示的数据了，格式为json，一般将数据装在map中。所以，这两个值要在控制器中设置好。

一、编辑struts配置文件

<package name="mypackage" extends="json-default" >
   
	    <action name="emplAction" class="com.chen.action.EmplAction">
	      <result name="tolist" type="redirectAction">emplAction!listEmpl.action</result>
	      <result name="false">/login.jsp</result>
	      <result name="list">/WEB-INF/jsp/userManager.jsp</result>
	      <!-- 显示员工详情的地址 -->
	      <result name="userDetail">/WEB-INF/jsp/userDetail.jsp</result>
	      <result name="toAddEmpl">/WEB-INF/jsp/addEmpl.jsp</result>
	      <result name="toEditEmpl" type="dispatcher">/WEB-INF/jsp/editEmpl.jsp</result>
	    </action>
  </package>

二、编辑控制器

//跳转至显示员工列表页面
	public String toUserManager(){
		dept=deptService.listDept();
		job=jobService.listJob();
		jobStatus=jobStatusService.listJobStatus();
		return "list";
	}
//显示员工信息列表
	public void listEmpl() throws IOException{
		   //设置响应格式
		   resp.setCharacterEncoding("UTF-8");
		   
		   //获取当前用户的id
		   Empl currEmpl = (Empl) session.getAttribute("emp1");
		   int currId = currEmpl.getEid();
		   
		   //当前页
		   int offset=!"".equals(req.getParameter("page"))&&null!=(req.getParameter("page"))?Integer.parseInt(req.getParameter("page")):1;
		   
		   //查询条件：员工名称、职位、部门名称、状态
		   Pager<Object[]> pager=empService.search(empl,ajob,adept,ajobStatus,currId,offset);
			
		   //将数据存入list中，它存入的是map，这样在easyui的datagrid才能以键值对的形式获取到具体的数据
		   List<Map<String,String>> list = new ArrayList<>();
		   Map<String,String> map0 = null;
		   for (Object[] e : pager.getList()) {
			   map0=new HashMap<String, String>();
			   //在datagrid中显示的数据
			   map0.put("eid", String.valueOf(e[0]));
			   map0.put("ename", String.valueOf(e[1]));
			   map0.put("birthday", String.valueOf(e[3]));
			   map0.put("hiredate", String.valueOf(e[6]));
			   map0.put("jname", String.valueOf(e[5]));//职位
			   map0.put("dname", String.valueOf(e[4]));
			   map0.put("status", String.valueOf(e[7]));
			   //在datagrid中隐藏的数据（部门编号、职位编号、在职状态编号）
			   map0.put("did", String.valueOf(e[8]));
			   map0.put("jid", String.valueOf(e[9]));
			   map0.put("jsid", String.valueOf(e[10]));
			   list.add(map0);
		   }
		   
		   //设置总行数，行数据。
		   Map<String,Object> map = new HashMap<String, Object>();
		   map.put("total", pager.getSumRows());
		   map.put("rows", list);
		   
		   //将map转换为json格式
		   String s = JSON.toJSONString(map);
		   PrintWriter out = resp.getWriter();
		   out.println(s);
	}

三、编辑jsp

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 1.页面引入样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.4.2/themes/icon.css">
<!-- 2.页面引入脚本 -->
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/datagrid-detailview.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> 
<!-- 3.页面引入自定义脚本 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/userManager.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/validate.js" ></script>
<!-- 4.页面引入其他脚本 -->
<link href="${pageContext.request.contextPath }/myDatePicker_2.2/datePicker.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/myDatePicker_2.2/jquery.datePicker-min.js"></script>
<title>用户管理</title>
<style type="text/css">

.dv-label{
    font-weight: bolder;
    color:#15428B;
}
/*datagrid行高设置*/
.datagrid-btable tr{
	height:30px;   
}
...
<table id="dg"></table>
...

四、编辑js
说明：
1.载入引入此js的jsp时，刷新jsp时，均会向url指定的地址发送请求，然后datagrid会根据total计算总页数，根据rows解析数据。
2.editor的设置是让datagrid可以执行行内编辑数据。
3.隐藏列：因为不想在datagrid显示所有列信息，但因为这些列信息有用到，所有设置隐藏列。关于隐藏列的作用，请参见下面在代码上的注释。

$('#dg').datagrid({
		//条纹
		striped:true, 
		//标题
		title:'用户管理',
		//提交的url地址
		url:'emplAction!listEmpl.action',
		//允许收缩数据
		collapsible:'true',
		//分页
		pagination:'true',
		//自适应
		fit:'true',
		//默认页容量
		pageSize:'10',
		//分页工具位置
		pagePosition:'top',
		//列自适应
		fitColumns:'true',
		//显示编号
		rownumbers:'true',
		//排序
		sortable:'true',
		sortName:'id',
		//主键
		idField:'id',
		//列字段
		columns:[[
		          {
		        	  field:'ck',
		        	  checkbox:true
		          },
		          {
		        	  field:'eid',
		        	  title:'用户编号',
		        	  height:30,
		        	  width:100,
		        	  align:'center',
		        	  sortable:'true',//排序
		        	  readonly:'true',
		        	  disabled:true//禁止编辑
		        	  /*editor:{
		        		  type:'numberbox',
		        		  options:{
		        			  required:true,
		        			  disabled:true//禁止编辑
		        		  }
		        	  }*/
		          },
		          {
		        	  field:'ename',
		        	  title:'用户名',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'hiredate',
		        	  title:'入职时间',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'jname',
		        	  title:'职位描述',
		        	  width:100,
		        	  height:30,
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'dname',
		        	  width:100,
		        	  height:30,
		        	  title:'所属部门',
		        	  align:'center',
		        	  readonly:'true',
		        	  disabled:true
		          },
		          {
		        	  field:'status',
		        	  width:100,
		        	  height:30,
		        	  title:'状态',
		        	  align:'center',
		        	  editor:{//编辑选项
		        		  type:'combobox',
		        		  options:{
		        			  url:"emplAction!getJobStatusList.action",//请求地址
		        			  required:true,
		        			  panelHeight: 'auto',
		        			  valueField:'jsid',//下拉框的值
		        			  textField:'status'//下拉框显示的文本
		        		  }
		        	  }
		        		  
		          },
		          {
		        	  field:'process',
		        	  title:'操作',
		        	  width:150,
		        	  height:30,
		        	  align:'center',
		        	  //格式化列值（设置列值在页面的显示样式）
		        	  formatter:function(value,row,index){
		        		  return "<a href='javascript:obj.editStatus("+index+")'>修改状态</a>"
	        			  +"&nbsp;&nbsp;<a href='javascript:obj._delete("+row.eid+")'>删除</a>"
		        	  }
		          },//隐藏列：出生日期。虽然不在datagrid中显示，但在mydialog中修改操作中需显示。
		          {
		        	  field:'birthday',
		          },
		          //隐藏列：员工的部门编号、职位编号、状态编号。在mydialog中添加/修改操作时设置下拉框的默认选项有用到。
		          {
		        	  field:'did',
		          }
		          ,
		          {
		        	  field:'jid',
		          },
		          {
		        	  field:'jsid',
		          }
		          
		]],
		
	})
	//隐藏列
	$('#dg').datagrid('hideColumn', 'birthday')
	$('#dg').datagrid('hideColumn', 'did')
	$('#dg').datagrid('hideColumn', 'jid')
	$('#dg').datagrid('hideColumn', 'jsid')

大功告成，效果如下：