easyui datagrid 前后台交互
2015-11-12 18:30
357 查看
最近自学easyui,先选择了datagrid,悲催的是刚学就遇到问题,后台数据怎么都整不到页面上。。好不容易页面有数据了,但是发现没有渲染表格。好吧,言归正传,直接贴代码。
先贴最重要的action:
继承的BaseAction:注意这里需要一个将list转为json对象的jar包:json-lib-2.2-jdk15.jar
struts.xml:
继承加上json-default,这样才可以指定返回前台的数据type=”json”,result则是为了指定我只把result传递到页面,其它的例如userService,user不会传到前台。另外实际上struts-default也是继承json-default的,所以struts-default可以省略。
jsp:
注意css和js不要导错了,另外jquery.min.js要在jquery.easyui.min.js前面,不然加载会出错的,我就犯了这个错,结果页面上是json字符串。。。
有图有真相:
js顺序搞错后结果截图:
正确的:
需要用到的jar:commons-httpclient.jar、struts2-json-plugin-2.2.3.1、json-lib-2.2-jdk15.jar、commons-lang.jar、commons-beanutils.jar,可以到这里下:
http://download.csdn.net/detail/birdofsky/9264451
先贴最重要的action:
[code]public class UserManageAction extends BaseAction { private static final long serialVersionUID = 1L; public Log log = Log.getLogger(UserManageAction.class); private UserForm user; private UserService userService; public UserForm getUser() { return user; } public void setUser(UserForm user) { this.user = user; } public void setUserService(UserService userService) { this.userService = userService; } public UserService getUserService() { return userService; } @Override public String execute() { return null; } public String easyui() {//看这个方法 Map map = new HashMap(); map.put("userId", ""); map.put("userName", ""); PagerTag pageResult = userService.queryByPage(page, rows, map); List<TblSysUser> userlist= pageResult.getResult(); List beanList = new ArrayList(); for(TblSysUser user:userlist){ UserBean ubBean = new UserBean(); BeanUtils.copyProperties(user, ubBean); beanList.add(ubBean); } initJsonResult(pageResult.getRecordCount(),beanList); return SUCCESS; } }
继承的BaseAction:注意这里需要一个将list转为json对象的jar包:json-lib-2.2-jdk15.jar
[code]public class BaseAction extends ActionSupport { //page是easyui传递到后台的值,表示页码 public int page = 1; //rows是easyui传递到后台的值,表示每页大小 public int rows = 10; public JSONObject result; public void initJsonResult(int total,List beanList){ Map<String, Object> obj = new HashMap<String, Object>(); //easyui能处理的json格式,{"total":total,"rows":[{list的json形式}]},不要和上面那个表示每页大小的rows弄混了,实际这也是easyui蛋疼的一点,你TMD不会用pageSize啊。 obj.put("total", total); obj.put("rows", beanList); result=JSONObject.fromObject(obj); } public JSONObject getResult() { return result; } public void setPage(int page) { this.page = page; } public void setRows(int rows) { this.rows = rows; } }
struts.xml:
继承加上json-default,这样才可以指定返回前台的数据type=”json”,result则是为了指定我只把result传递到页面,其它的例如userService,user不会传到前台。另外实际上struts-default也是继承json-default的,所以struts-default可以省略。
[code]<constant name="struts.action.extension" value="do" /> <package name="system" extends="struts-default,json-default"> <action name="easyui" class="com.book.ssh.action.UserManageAction" method="easyui"> <result type="json"> <param name="root">result</param> </result> </action> </package>
jsp:
注意css和js不要导错了,另外jquery.min.js要在jquery.easyui.min.js前面,不然加载会出错的,我就犯了这个错,结果页面上是json字符串。。。
[code]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <!-- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> --> <!-- <meta http-equiv="description" content="This is my page"> --> <title>你好啊easyui</title> <script type="text/javascript" charset="utf-8" src="../../../jquery-easyui-1.4/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="../../../jquery-easyui-1.4/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css" href="../../../jquery-easyui-1.4/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../../jquery-easyui-1.4/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../../../jquery-easyui-1.4/demo/demo.css" /> <script type="text/javascript" src="../../../jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script> </head> <body> <table class="easyui-datagrid" title="Basic DataGrid" id="dg" style="width: 700px; height: 250px" data-options="singleSelect:true,fitColumns:true,url:'easyui2.do',rownumbers:true, autoRowHeight:false,pagination:true"> <thead> <tr> <th data-options="field:'userId',width:80">编号</th> <th data-options="field:'userName',width:100">用户名</th> <th data-options="field:'gender',width:80,align:'right'">性别</th> <th data-options="field:'password',width:80,align:'right'">密码</th> <th data-options="field:'isExpire',width:250">超期</th> <th data-options="field:'status',width:60,align:'center'">登陆状态</th> <th data-options="field:'sessionid',width:60,align:'center'">会话id</th> </tr> </thead> </table> </body> <script type="text/javascript" charset="UTF-8"> $(function() { //loadGrid(); //$("#dg").datagrid("load","easyui.do"); }); </script> </html>
有图有真相:
js顺序搞错后结果截图:
正确的:
需要用到的jar:commons-httpclient.jar、struts2-json-plugin-2.2.3.1、json-lib-2.2-jdk15.jar、commons-lang.jar、commons-beanutils.jar,可以到这里下:
http://download.csdn.net/detail/birdofsky/9264451
相关文章推荐
- 修改LR自带的示例程序端口号,Cannot create GUI process-program not found
- UVA 10401 Injured Queen Problem (dp)
- Android手机中UID、PID作用及区别
- UILable响应点击事件
- UILable响应点击事件
- UITableView
- 【opencl】buildprogram错误日志提示source file is not valid utf-8
- 关于iOS UITextView的一点使用心得,设置placeHolder效果
- 全面解释StringBuilder、StringBuffer和String的关系
- android 搜索框UI
- UITextView添加planceholder
- (温故而知新)iOS开发UI篇—UITableview控件基本使用
- esayui datagrid 列内容超长自动换行
- (温故而知新)iOS开发UI篇—UITableview控件简单介绍
- UIView中的clipsTobounds属性及扩展
- UIScrollView
- Maltab gui 使用函数学习记录
- UITableView分割线式样 与 颜色设置
- UICollectionView 简单使用
- [ios]如何分组具有 UICollectionReusableView (使用 JSON) 的单元格