struts2跟easyui 示例一后台生成json数据传到前台html页面

最新推荐文章于 2024-08-09 07:33:29 发布

轻松kenny

最新推荐文章于 2024-08-09 07:33:29 发布

阅读量9.3k

点赞数

分类专栏： javaSE及jsp javascript

本文链接：https://blog.csdn.net/salonzhou/article/details/36873463

版权

javaSE及jsp 同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

javascript

17 篇文章 0 订阅

订阅专栏

目标：使用struts2和easyui实现后台生成json数据，前台html中table展示数据

步骤：1、创建struts2

2、添加json 相关包

3、添加easyui

1、*创建web项目struts2easyui;

*添加struts2需要的包

*在web.xml中添加拦截器

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
*在src目录下创建struts2.xml,内容先为空

2、添加json相关包

3、添加easyui js文件

*在struts2.xml中添加传递json 的配置文件

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"><struts> <include file="struts-default.xml"></include> <constant name="struts.i18n.encoding" value="utf-8"/> <package name='json' extends="json-default"> <action name="funcAction_*" class="action.FuncAction" method="{1}"> <result type="json"> <param name="root">resultObj</param> </result>  </action> </package></struts>
其中需要指定result 的type="json" 参数的 name必须是root 参数中的resultObj为action中的属性

*添加action包下的FuncAction(当然也可以是其它包下或其它类名，跟struts.xml对应就可以了)

package action;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

//action 中
public class FuncAction extends ActionSupport {
   private JSONObject resultObj = null;

   public JSONObject getResultObj() {
       return resultObj;
   }

   public void setResultObj(JSONObject resultObj) {
       this.resultObj = resultObj;
   }

   // 省去getter setter方法。
   public String execute() {
       return getFunc();
   }

   public String getFunc() {
       JSONObject json = JSONObject
               .fromObject("{\"rows\":[{\"isLeaf\":0,\"nodeAction\":\"\",\"nodeID\":1,\"nodeIcon\":\"icon-sys\",\"nodeText\":\"系统管理\",\"parenetID\":0},{\"isLeaf\":1,\"nodeAction\":\"sys/entryM.html\",\"nodeID\":2,\"nodeIcon\":\"icon-nav\",\"nodeText\":\"栏目管理\",\"parenetID\":1}],\"total\":2}");
       this.setResultObj(json);
       return SUCCESS;
   }

}

*添加显示用的test.html

<!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">
   <title>test</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="js/themes/icon.css">

    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
   <script type="text/javascript" src="js/test.js"></script>
</head>
<body>
   
       <table id="test" class="easyui-datagrid" title="Basic DataGrid" style="width:800px;"
           data-options="singleSelect:true,collapsible:true">
       <thead>
           <tr>
               <th data-options="field:'nodeIcon',width:150">图标</th>
               <th data-options="field:'parentID',width:120">父节点编号</th>
               <th data-options="field:'nodeID',width:120,align:'right'">节点编号</th>
               <th data-options="field:'isLeaf',width:120,align:'right'">节点类型</th>
               <th data-options="field:'nodeText',width:120">节点名称</th>
               <th data-options="field:'nodeAction',width:120,align:'center'">连接程序</th>
           </tr>
       </thead>
   </table>
</body>
</html>

*添加easyui的执行test.js

$(function(){
           $('#test').datagrid({
               title:'My Title',//表格标题
               iconCls:'icon-save',//表格图标
               nowrap: false,//是否只显示一行，即文本过多是否省略部分。
               striped: true,
               url:'funcAction_getFunc.action', //action地址
               sortName: 'parentID',
               sortOrder: 'desc',
               idField:'nodeID',
               frozenColumns:[[
               ]],
           /*   columns:[[
                   {field:'nodeIcon',title:'图标',width:150},
                   {field:'parentID',title:'父节点编号',width:120},
                   {field:'nodeID',title:'节点编号',width:120,sortable:true},
                   {field:'isLeaf',title:'节点类型',width:120},
                   {field:'nodeText',title:'节点名称',width:120},
                   {field:'nodeAction',title:'连接程序',width:120},

               ]],*/
               pagination:true, //包含分页
               rownumbers:true,
               singleSelect:true,
               toolbar:[{
                   text:'Add',
                   iconCls:'icon-add',
                   handler:function(){
                       alert('add')
                   }
               /*},{
                   text:'Cut',
                   iconCls:'icon-cut',
                   handler:function(){
                       alert('cut')
                   }
               },'-',{
                   text:'Save',
                   iconCls:'icon-save',
                   handler:function(){
                       alert('save')
                   }*/
               }]
           });
           });

总结：easyui 传递json分为以下几个步骤