easyui datagrid 前后台交互

最新推荐文章于 2022-08-14 23:36:27 发布

原创最新推荐文章于 2022-08-14 23:36:27 发布 · 1.4w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#datagrid #easyui

js 同时被 2 个专栏收录

1 篇文章

订阅专栏

easyui

1 篇文章

订阅专栏

在自学EasyUI时，作者遇到了Datagrid与后台数据交互的问题，包括数据无法显示和表格渲染失败。通过调整Struts配置、引入必要的jar包以及修正JS引用顺序，最终解决了问题。文章提供了关键代码片段和错误示例，以帮助读者避免类似错误。

最近自学easyui，先选择了datagrid，悲催的是刚学就遇到问题，后台数据怎么都整不到页面上。。好不容易页面有数据了，但是发现没有渲染表格。好吧，言归正传，直接贴代码。
先贴最重要的action：

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

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可以省略。

<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字符串。。。

<%@ 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