- 浏览: 25550 次
最新评论
easyui的datagrid主要用于显示列表信息,其中包含分页,也可通过设置显示行详情(参见文章“easyui在datagrid中显示行详情(二)”)。这里涉及到两个关键字:total、rows,total是显示数据的总行数,datagrid会根据设定的页容量计算总页数;rows对于的值就是要显示的数据了,格式为json,一般将数据装在map中。所以,这两个值要在控制器中设置好。
一、编辑struts配置文件
二、编辑控制器
三、编辑jsp
四、编辑js
说明:
1.载入引入此js的jsp时,刷新jsp时,均会向url指定的地址发送请求,然后datagrid会根据total计算总页数,根据rows解析数据。
2.editor的设置是让datagrid可以执行行内编辑数据。
3.隐藏列:因为不想在datagrid显示所有列信息,但因为这些列信息有用到,所有设置隐藏列。关于隐藏列的作用,请参见下面在代码上的注释。
大功告成,效果如下:
一、编辑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>" +" <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')
大功告成,效果如下:
发表评论
-
easyui实现datagrid行内编辑
2015-10-02 02:21 7416easyui的datagrid行内编辑 ... -
struts2+easyui实现根据条件检索信息
2015-10-02 01:52 2032根据不同条件或组合条件检索信息是很常用的需求,下面将在stru ... -
创建easyui-dialog实现增加/修改bean信息
2015-10-02 00:27 4281是否采用dialog增加/修改bean信息根据项目需求而定,一 ... -
easyui在datagrid中显示行详情(二)
2015-10-01 22:45 1426一、引用文件 注:1.datagrid-detailview. ... -
easyui在datagrid中显示行详情(一)
2015-09-30 13:34 7052一、页面引用 <!-- 1.页面引入样式 --> ...
相关推荐
Struts2、Ajax、EasyUI、JSON 和 DataGrid 是现代Web开发中常用的技术组合,用于构建功能丰富的交互式用户界面。下面将详细解释这些技术及其在实现增删改查、分页和排序功能中的作用。 **Struts2** 是一个基于MVC...
在这个项目中,当用户在登录表单中输入信息并点击提交按钮时,EasyUI的Ajax功能会被触发,向Struts2的Action发送一个异步请求。Action接收到请求后,将用户名和密码传递给后台验证服务,这个服务可能是基于数据库或...
在本项目中,我们主要探讨如何使用Struts2框架与EasyUI库,通过Maven进行构建和依赖管理,实现一个单元格可编辑的表格——DataGrid。以下将详细阐述涉及的技术点及其应用。 首先,Maven是Apache软件基金会开发的一...
1. **SSH+jQuery+DWR+EasyUI 实战**:本文档通过一系列的实战案例展示了如何将 Struts2、Spring3、Hibernate4 与 DWR、jquery2.x 和 easyUI1.3.x 结合起来开发实际的应用。 2. **实战案例详解**: - SSH 架构集成...
例如,使用EasyUI的datagrid组件显示由Struts2 Action返回的数据列表,通过Ajax异步请求更新数据,同时利用Spring的服务层处理业务逻辑和数据持久化。 6. **学习和实践**:"ssh+easyui"组合适合初学者了解和掌握...
以上是对“easyui datagrid+SSH集成项目问题”的总结,涵盖了Struts2与JSON的配合、DataGrid的JSON数据格式、Hibernate懒加载的处理以及循环引用的解决策略。理解这些知识点有助于在实际开发中更顺畅地集成EasyUI与...
- **Action处理**:Struts2 Action接收到请求,调用后台服务处理数据,如从数据库中获取或更新信息。 - **JSON响应**:Action返回JSON格式的结果,便于前端解析和显示。 - **前端交互**:EasyUI使用jQuery的ajax...
例如,使用datagrid展示用户列表,通过`用户列表"></table>`创建表格,并配置相应的列和数据源。 在JavaScript中,我们可以监听按钮的点击事件,调用Ajax请求服务端的API。例如,添加用户时,可以通过`$.ajax()`...
### Struts2 结合 EasyUI 实现增删改分页排序 #### 一、概述 在Web开发领域,Struts2 和 EasyUI 是两个非常重要的框架和技术。Struts2 是一款基于MVC模式的Java Web应用程序框架,它帮助开发者构建灵活、可扩展的...
基于struts,spring,hibernate,oracle环境下jquery easyui环境搭建。实现了使用jquery easyui中的datagrid显示用户列表。测试网址: http://localhost:9090/jquery-easyui-1.2.6BasedonStruts/layout.jsp
网上这方面资源太乱太杂 而且都是拷贝来拷贝去的 所以特此写了这个测试代码 ...有详细的注释教会你如何使用struts2去调用easyui控件,这种方式的调用还是比较好的,毕竟采用了JSON数据格式,传输起来更加方便和快速。
标题中的"jQuery EasyUI + Struts2 + Hibernate 封装的 CRUD Datagrid(内置数据库建表语句)"是一个基于Web开发的技术组合,用于构建数据管理应用。这个项目结合了前端的jQuery EasyUI、后端的Struts2框架以及持久...
6. **DataGrid**:EasyUI的DataGrid组件可以显示大量数据,支持分页加载,减少一次性加载的数据量,提高页面性能。同时,它能与后端进行交互,实现增删改操作。 7. **分页**:在大数据量的情况下,分页是必不可少的...
标题中的“Spring Struts2 iBatis EasyUI”是一个经典的Java Web开发框架组合,用于构建高效、可维护的Web应用程序。下面将详细解释这些技术及其整合应用。 **Spring框架** Spring是一个开源的Java平台,核心特性是...
Struts2、EasyUI和DBUtils是Java Web开发中常用的三个框架或库,它们各自扮演着不同的角色。在这个小项目中,我们将深入了解这三个组件如何协同工作以实现一个基础的CRUD(创建、读取、更新、删除)应用程序。 首先...
在本文中,我们将探讨如何使用Struts2和jQuery EasyUI框架创建一个简单的CRUD(创建、读取、更新、删除)系统。首先,我们需要理解这两个技术的基础概念。 Struts2是一个基于MVC(Model-View-Controller)架构的...
1. **引入依赖**:在项目中添加Struts2和EasyUI的JAR包或Maven依赖,确保所有必要的类库都能被正确引用。 2. **配置Struts2**:在`struts.xml`配置文件中定义Action,指定对应的类和结果页面。例如: ```xml ...
【SSh结合Easyui实现Datagrid的分页显示】是一个典型的Web开发应用场景,涉及到Spring、Struts2和Hibernate(SSh)三大框架与EasyUI前端组件的整合。在这个实例中,我们将探讨如何利用这些技术来实现一个具备分页...
标题 "JQuery EasyUI 整合struts2 代码下载" 涉及到的是一个Web开发中的技术组合,主要集中在前端的JQuery EasyUI框架与后端的Struts2框架的集成应用。JQuery EasyUI是一个基于jQuery的UI库,提供了丰富的组件,如...
使用Easyui的`datagrid`组件,设置其URL属性指向Struts2 Action,以便加载数据。同时,配置分页参数,如每页显示的记录数和当前页数。 7. **后端处理**: - 在Action类中,根据前端传入的分页参数,通过Service层...