`
wql025
  • 浏览: 25550 次
社区版块
存档分类
最新评论

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')


大功告成,效果如下:


  • 大小: 24.1 KB
分享到:
评论

相关推荐

    struts2+ajax+easyui+json+datagrid增删改查

    Struts2、Ajax、EasyUI、JSON 和 DataGrid 是现代Web开发中常用的技术组合,用于构建功能丰富的交互式用户界面。下面将详细解释这些技术及其在实现增删改查、分页和排序功能中的作用。 **Struts2** 是一个基于MVC...

    struts2+easyUI+ajax+json用户登验证

    在这个项目中,当用户在登录表单中输入信息并点击提交按钮时,EasyUI的Ajax功能会被触发,向Struts2的Action发送一个异步请求。Action接收到请求后,将用户名和密码传递给后台验证服务,这个服务可能是基于数据库或...

    struts2+easyui 基于maven实现单元格可编辑表格datagrid

    在本项目中,我们主要探讨如何使用Struts2框架与EasyUI库,通过Maven进行构建和依赖管理,实现一个单元格可编辑的表格——DataGrid。以下将详细阐述涉及的技术点及其应用。 首先,Maven是Apache软件基金会开发的一...

    DWR+jquery2.x+easyUI1.3.x开发富客户端应用

    1. **SSH+jQuery+DWR+EasyUI 实战**:本文档通过一系列的实战案例展示了如何将 Struts2、Spring3、Hibernate4 与 DWR、jquery2.x 和 easyUI1.3.x 结合起来开发实际的应用。 2. **实战案例详解**: - SSH 架构集成...

    ssh+easyui

    例如,使用EasyUI的datagrid组件显示由Struts2 Action返回的数据列表,通过Ajax异步请求更新数据,同时利用Spring的服务层处理业务逻辑和数据持久化。 6. **学习和实践**:"ssh+easyui"组合适合初学者了解和掌握...

    easyui datagrid+SSH集成项目问题

    以上是对“easyui datagrid+SSH集成项目问题”的总结,涵盖了Struts2与JSON的配合、DataGrid的JSON数据格式、Hibernate懒加载的处理以及循环引用的解决策略。理解这些知识点有助于在实际开发中更顺畅地集成EasyUI与...

    struts2-easyui.

    - **Action处理**:Struts2 Action接收到请求,调用后台服务处理数据,如从数据库中获取或更新信息。 - **JSON响应**:Action返回JSON格式的结果,便于前端解析和显示。 - **前端交互**:EasyUI使用jQuery的ajax...

    java+easyUI技术--实现增删改查功能

    例如,使用datagrid展示用户列表,通过`用户列表"&gt;&lt;/table&gt;`创建表格,并配置相应的列和数据源。 在JavaScript中,我们可以监听按钮的点击事件,调用Ajax请求服务端的API。例如,添加用户时,可以通过`$.ajax()`...

    struts2结合easyui实现增删改分页排序

    ### Struts2 结合 EasyUI 实现增删改分页排序 #### 一、概述 在Web开发领域,Struts2 和 EasyUI 是两个非常重要的框架和技术。Struts2 是一款基于MVC模式的Java Web应用程序框架,它帮助开发者构建灵活、可扩展的...

    基于struts环境下的jquery easyui环境搭建

    基于struts,spring,hibernate,oracle环境下jquery easyui环境搭建。实现了使用jquery easyui中的datagrid显示用户列表。测试网址: http://localhost:9090/jquery-easyui-1.2.6BasedonStruts/layout.jsp

    struts2继承easyui

    网上这方面资源太乱太杂 而且都是拷贝来拷贝去的 所以特此写了这个测试代码 ...有详细的注释教会你如何使用struts2去调用easyui控件,这种方式的调用还是比较好的,毕竟采用了JSON数据格式,传输起来更加方便和快速。

    jquery easyui +struts2+hibernate封装的crud datalist(内置数据库建表语句)

    标题中的"jQuery EasyUI + Struts2 + Hibernate 封装的 CRUD Datagrid(内置数据库建表语句)"是一个基于Web开发的技术组合,用于构建数据管理应用。这个项目结合了前端的jQuery EasyUI、后端的Struts2框架以及持久...

    easyui datagird增删改分页例子

    6. **DataGrid**:EasyUI的DataGrid组件可以显示大量数据,支持分页加载,减少一次性加载的数据量,提高页面性能。同时,它能与后端进行交互,实现增删改操作。 7. **分页**:在大数据量的情况下,分页是必不可少的...

    spring struts2 ibatis easyui

    标题中的“Spring Struts2 iBatis EasyUI”是一个经典的Java Web开发框架组合,用于构建高效、可维护的Web应用程序。下面将详细解释这些技术及其整合应用。 **Spring框架** Spring是一个开源的Java平台,核心特性是...

    Struts2与EasyUI和DBUtils的一个简单的小项目

    Struts2、EasyUI和DBUtils是Java Web开发中常用的三个框架或库,它们各自扮演着不同的角色。在这个小项目中,我们将深入了解这三个组件如何协同工作以实现一个基础的CRUD(创建、读取、更新、删除)应用程序。 首先...

    使用Struts2和jQuery EasyUI实现简单CRUD系统

    在本文中,我们将探讨如何使用Struts2和jQuery EasyUI框架创建一个简单的CRUD(创建、读取、更新、删除)系统。首先,我们需要理解这两个技术的基础概念。 Struts2是一个基于MVC(Model-View-Controller)架构的...

    Struts2.3.1与EasyUI1.2.5的整合

    1. **引入依赖**:在项目中添加Struts2和EasyUI的JAR包或Maven依赖,确保所有必要的类库都能被正确引用。 2. **配置Struts2**:在`struts.xml`配置文件中定义Action,指定对应的类和结果页面。例如: ```xml ...

    SSh结合Easyui实现Datagrid的分页显示(多个实例)

    【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景,涉及到Spring、Struts2和Hibernate(SSh)三大框架与EasyUI前端组件的整合。在这个实例中,我们将探讨如何利用这些技术来实现一个具备分页...

    JQuery EasyUI 整合struts2 代码下载

    标题 "JQuery EasyUI 整合struts2 代码下载" 涉及到的是一个Web开发中的技术组合,主要集中在前端的JQuery EasyUI框架与后端的Struts2框架的集成应用。JQuery EasyUI是一个基于jQuery的UI库,提供了丰富的组件,如...

    SSh结合Easyui实现Datagrid的分页显示

    使用Easyui的`datagrid`组件,设置其URL属性指向Struts2 Action,以便加载数据。同时,配置分页参数,如每页显示的记录数和当前页数。 7. **后端处理**: - 在Action类中,根据前端传入的分页参数,通过Service层...

Global site tag (gtag.js) - Google Analytics