码迷,mamicode.com
首页 > Web开发 > 详细

JqueryEasyUI datagrid通过struts请求从后台读取数据

时间:2015-02-12 18:28:57      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:jqueryeasyui   datagrid   

我就说下需要注意的事项,希望能帮助到大家:
1.后台返回的格式必须是JqueryEasyUI那种格式。比如:{"total":2,"rows":[{...}]"}这种形式。
2.struts配置文件无须配置result,直接简单配置就行,如下:
        <!-- 用户列表-->
        <action name="userList" method="userList" class="com.duosen.ocs.system.action.UserAction">
        </action>  
3.action中方法这么写,直接返回success:
            result = userService.findPageUserList(this.getPage(), this.getLimit(), user);    
          //{total=2, rows=[com.duosen.ocs.system.domain.User@151685f, com.duosen.ocs.system.domain.User@19b60bb]}

            JSONObject object = JSONObject.fromObject(result);
            
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("html/text;charset=UTF-8");
            response.getWriter().write(object.toString());  
            return null;  
这样前台返回数据格式为:
技术分享

前台展现:
技术分享


附上用户管理jsp代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/include.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<h2>CRUD DataGrid</h2>
<p>Double click the row to begin editing.</p>
<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="loginname" width="50" editor="{type:‘validatebox‘,options:{required:true}}">用户名</th>
<th field="password" width="50" editor="{type:‘validatebox‘,options:{required:true}}">密码</th>
<th field="mobile" width="50" editor="text">电话</th>
<th field="createtime" width="50" editor="{type:‘validatebox‘,options:{validType:‘email‘}}">创建时间</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘addRow‘)">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘destroyRow‘)">Destroy</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘saveRow‘)">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘cancelRow‘)">Cancel</a>
</div>
<script type="text/javascript">
$(function(){
    $(‘#dg‘).edatagrid({
        url: window.BIZCTX_PATH + ‘/system/userjson/userList.action‘,
        saveUrl: ‘save_user.php‘,
        updateUrl: ‘update_user.php‘,
        destroyUrl: ‘destroy_user.php‘
    });
});
</script>
</body>
</html>


include.jsp的代码:
<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@ page import="com.duosen.ocs.constant.WebConstants" %>
<%@ page import="com.duosen.ocs.system.domain.User" %>
 
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    
%>

<script type="text/javascript">
        window.BIZCTX_PATH = "<%=path%>";
        var bizctxpath = "<%=path%>";
</script>


    <link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/easyui/demo/demo.css">
    <script type="text/javascript" src="<%=path%>/easyui/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/common.css" />
    <script type="text/javascript" src="<%=path%>/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=path%>/resource/js/fmscookie.js"></script>
    <script type="text/javascript" src="<%=path%>/easyui/jquery.edatagrid.js"></script>

以上js都是jqueryEasyUi官方下载。

JqueryEasyUI datagrid通过struts请求从后台读取数据

标签:jqueryeasyui   datagrid   

原文地址:http://blog.csdn.net/wuyongde_0922/article/details/43764913

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!