`
floger
  • 浏览: 213924 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Hibernate+Spring+Struts2+ExtJS开发CRUD功能(3)

阅读更多
配置spring,添加:

<bean id="LevelService" parent="baseTransactionProxy">

       <property name="target">

           <bean class="privilege.service.LevelService">

              <property name="dao">

                  <bean class="privilege.dao.LevelDAO">

                     <property name="sessionFactory" ref="sessionFactory" />

                  </bean>

              </property>

           </bean>

       </property>

    </bean>

    <bean id="LevelAction" class="privilege.action.LevelAction">

       <property name="levelService" ref="LevelService" />

    </bean>

配置struts.xml: 

添加操作配置:

<action name="AddLevel" class="LevelAction" method="persistLevel">

    <result>/resource/json_struts2.jsp</result>

</action>

修改时载入数据操作配置:

<action name="LoadLevel" class="LevelAction" method="findLevelById">

    <result>/resource/json_struts2.jsp</result>

</action>

列表查询和删除数据时操作配置:

<action name="LevelAjaxJsonData" class="LevelAction" method="jsonExecute">

    <result>/resource/json_struts2.jsp</result>

</action>

 

 json_struts2.jsp :

这个页面是一个公用的页面,服务器段向客户端传输时用于JSON字符串的输出,特别注意的是:

<s:property>标签的escape属性一定要是false,默认是true,不然输出的JSON字符串被转码。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%>

<s:property value="jsonString" escape="false" />

 

Level.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<!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>页面</title>

导入所需要的javascript类库和样式表:

<link rel="stylesheet" type="text/css" href="/my/resource/ext2.0/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="/my/resource/ext2.0/init.css" />

<script src="/my/resource/ext2.0/adapter/ext/ext-base.js" type="text/javascript"></script>

<script src="/my/resource/ext2.0/ext-core.js" type="text/javascript"></script>

<script src="/my/resource/ext2.0/ext-all.js"  type="text/javascript"></script>

Init.jsp是自定义的javascript文件,这里有一些需要动态处理的内容,所以以jsp后缀名的方式导入,这个文件的内容可以参考Extjs解压后目录中examples/examples.js文件:

<script src="/my/resource/ext2.0/init.jsp"  type="text/javascript"></script>

<script src="/my/resource/ext2.0/source/locale/ext-lang-zh_CN.js"  type="text/javascript"></script>

Level.js是整个界面所写的js:

<SCRIPT type="text/javascript" src="Level.js"></SCRIPT>

<SCRIPT type="text/javascript">

Ext.BLANK_IMAGE_URL = /my/resource/ext2.0/resources/images/default/s.gif';

</SCRIPT>

 

<STYLE type="text/css">

.ss {

    text-align: left;;

}

.icon-grid {

    background-image: url(grid.png) !important;

}

.add {

    background-image: url(new.png) !important;

}

.edit {

    background-image: url(edit.png) !important;

}

.remove {

    background-image: url(del.png) !important;

}

</STYLE>

</head>

<body class="x-vista">

<div id="topic-grid"></div>

 

 

<div id="topic-win" class="x-hidden">

<div class="x-window-header">Hello Dialog</div>

<div id="topic-tabs"></div>

</div>

</body>

</html>

 

Level.js文件:

myinit();//初始化

Ext.onReady(function() {

    Ext.QuickTips.init();

    var newFormWin;

    var form1;

//定义一个JsonReader对象,用于表格列表数据显示,即grid对象

    var _jsonReader = new Ext.data.JsonReader( {

        root : 'list',

        totalProperty : 'totalCount',

        id : 'levelid',

        successProperty : '@success'

    }, [ {

        name : 'levelid',

        mapping : 'levelid',

        type : 'int'

    }, {

        name : 'levelname',

        mapping : 'levelname'

    }, {

        name : 'description',

        mapping : 'description'

    }]);

    // Store对象,注意proxy配置参数,如果url : 'LevelAjaxJsonData.action'与程序在同一应用下面,就用new Ext.data.HttpProxy,如果不在同一应用中要用Ext.data.ScriptTagProxy对象

        var ds = new Ext.data.Store( {

            proxy : new Ext.data.HttpProxy( {

                url : 'LevelAjaxJsonData.action'

            }),

            //

            reader : _jsonReader

        });

        ds.setDefaultSort('levelid', 'desc');//设置默认的排序字段

 

        // ColumnModel对象,用于grid对象中的列格式化配置

        var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {

            id : 'levelid',

            header : '序号',

            dataIndex : 'levelid',

            width : 40

        }, {

            header : "级别名称",

            dataIndex : 'levelname',

            width : 50,

            sortable : true,

            locked : false

        }, {

            header : "描述",

            dataIndex : 'description',

            width : 100

        }]);

        // by default columns are sortable

        cm.defaultSortable = true;

// GridPanel对象

        var grid = new Ext.grid.GridPanel( {

            // var grid = new Ext.grid.EditorGridPanel( {

            collapsible : true,// 是否可以展开

            animCollapse : false,// 展开时是否有动画效果

            title : '级别管理',

            iconCls : 'icon-grid',

            store : ds,

            cm : cm,

            renderTo : 'topic-grid',

            viewConfig : {

                forceFit : true

            },

            /*

             * // 添加内陷的按钮 buttons : [ { text : '保存' }, { text : '取消' }],

             * buttonAlign : 'center',// 按钮对齐

             * 

             */

            // 添加分页工具栏

            bbar : new Ext.PagingToolbar( {

                pageSize : 30,

                store : ds,

                displayInfo : true,

                displayMsg : '显示 {0}-{1}条 / 共 {2} 条',

                emptyMsg : "无数据。",

                items : ['-', {

                    pressed : true,

                    enableToggle : true,

                    text : '按钮',

                    cls : 'x-btn-text-icon details',

                    toggleHandler : ptb_bt1

                }]

            }),

            // 添加内陷的工具条

            tbar : [ {

                id : 'New1',

                text : ' 新建  ',

                tooltip : '新建一个表单',

                iconCls : 'add',

                handler : function() {

                    ptb_bt1();

                }

            }, '-', {

                text : '修改',

                tooltip : '修改',

                iconCls : 'edit',

                handler : function() {

                    ptb_bt2();

                }

            }, '-', {

                text : '删除',

                tooltip : '删除被选择的内容',

                iconCls : 'remove',

                handler : function() {

                    ptb_bt3();

                }

            }],

            width : 700,

            height : 400,

            frame : true,

            loadMask : true,// 载入遮罩动画

            autoShow : true

        });

//数据载入

        ds.load( {

            params : {

                start : 0,//开始数

                limit : 30,//每次载入数量,服务器段就根据这两个参数来处理数据分页

                forumId : 4

            }

        });

        grid.render();

//添加行双击事件,双击是可以打开修改窗口

        grid.on("rowdblclick", function(grid) {

            loadFormData(grid);

        });

        // 载入被选择的数据行的表单数据

        var loadFormData = function(grid) {

            var _record = grid.getSelectionModel().getSelected();

            if (!_record) {//这里判断是否有行已经被选择

                Ext.example.msg('修改操作', '请选择要修改的一项!');

            } else {

                myFormWin();

                form1.form.load( {

                    url : 'LoadLevel.action?level.levelid='

                            + _record.get('levelid'),

                    waitMsg : '正在载入数据...',

 

                    failure : function() {

                        Ext.example.msg('编辑', '载入失败');

                    },

                    success : function() {

                        Ext.example.msg('编辑', '载入成功!');

                    }

                });

            }

        }

        // 分页工具栏按钮--新建事件

        var ptb_bt1 = function() {

            myFormWin();

        };

        // 修改操作事件

        var ptb_bt2 = function() {

            loadFormData(grid);

        };

        // 删除事件

        var ptb_bt3 = function() {

            var _record = grid.getSelectionModel().getSelected();

            if (_record) {//判断是否有行被选择

                Ext.MessageBox.confirm('确认删除', '你确认要删除这条数据吗?', function(btn) {

                    if (btn == "yes") {

                        var m = grid.getSelections();//所有被选择的行

                        var jsonData = "";//

                        for (var i = 0, len = m.length;i < len; i++) {

                            var ss = m[i].get("levelid");

                            if (i == 0) {

                                jsonData = jsonData + ss;

                            } else {

                                jsonData = jsonData + "," + ss;

                            }

                            ds.remove(m[i]);

                        }

                        ds.load( {

                            params : {

                                start : 0,

                                limit : 30,

                                delData : jsonData//这里是向服务器段发送的数据信息,一般采用JSON协议,这儿直接采用,只发送用逗号分割的ID号序列, 以方便

                            }

                        });

 

                        // Ext.example.msg('---删除操作---', '你删除的数据是');

                    }

                });

            } else {

                Ext.example.msg('删除操作', '请选择要删除的数据项!');

            }

        };

 

        // form_win定义一个Window对象,用于新建和修改时的弹出窗口。

        var myFormWin = function() {

            // create the window on the first click and reuse on subsequent

            // clicks

            if (!newFormWin) {

                newFormWin = new Ext.Window( {

                    el : 'topic-win',

                    layout : 'fit',

                    width : 400,

                    height : 300,

                    closeAction : 'hide',

                    plain : true,

                    title : '窗口',

                    items : form1,

                    reader : _jsonReader

                });

            }

            newFormWin.show('New1');

        }

//用窗体Form的JsonReader对象,修改时数据载入解析

        var _jsonFormReader = new Ext.data.JsonReader( {

            root : 'list',

            totalProperty : 'totalCount',

            id : 'levelid',

            successProperty : '@success'

        }, [ {

            name : 'level.levelid',

            mapping : 'levelid',

            type : 'int'

        }, {

            name : 'level.levelname',

            mapping : 'levelname'

        }, {

            name : 'level.description',

            mapping : 'description'

        }]);

 

        // 窗体

        form1 = new Ext.FormPanel( {

            // collapsible : true,// 是否可以展开

            labelWidth : 75, // label settings here cascade unless overridden

            url : 'AddLevel.action',

            frame : true,

            title : '添加级别',

            bodyStyle : 'padding:5px 5px 0',

            width : 350,

            waitMsgTarget : true,

            reader : _jsonFormReader,

            defaults : {

                width : 230

            },

            defaultType : 'textfield',

            items : [ {

                fieldLabel : '级别ID',

                name : 'level.levelid',

                allowBlank : false

            }, {

                fieldLabel : '级别名称',

                name : 'level.levelname',

                allowBlank : false

            }, new Ext.form.TextArea( {

                fieldLabel : '描述',

                name : 'level.description',

                growMin : 234

            })],

 

            buttons : [ {

                text : '保存',

                disabled : false,

                handler : function() {

                    if (form1.form.isValid()) {

                        form1.form.submit( {

                            url : 'AddLevel.action',

                            success : function(from, action) {

                                Ext.example.msg('保存成功', '添加级别成功!');

                                ds.load( {

                                    params : {

                                        start : 0,

                                        limit : 30,

                                        forumId : 4

                                    }

                                });

                            },

                            failure : function(form, action) {

                                Ext.example.msg('保存失败', '添加级别失败!');

                            },

                            waitMsg : '正在保存数据,稍后...'

                        });

                        dialog.hide();

                    } else {

                        Ext.Msg.alert('信息', '请填写完成再提交!');

                    }

                }

            }, {

                text : '取消',

                handler : function() {

                    newFormWin.hide();

                }

            }]

        });

 

分享到:
评论

相关推荐

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例

    在IT行业中,构建Web应用程序是常见的任务,而“Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例”提供了一个完整的解决方案,用于快速开发基于Java的Web应用,特别是涉及数据库操作的CRUD(创建、读取、更新、删除...

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能最新版lib[Zone Yan]

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能最新版lib[Zone Yan] 2个小时才找全的啊。

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能.doc

    ### Hibernate+Spring+Struts2+ExtJS集成开发CRUD功能 #### 一、技术栈介绍与环境搭建 **1. Hibernate:** Hibernate是一个强大的对象关系映射(ORM)框架,用于简化Java应用程序与数据库之间的交互。通过...

    Hibernate+Spring+Struts2+ExtJS整合开发实例

    在"Hibernate+Spring+Struts2+ExtJS整合开发实例"中,开发者通常会利用这些框架的协同工作来实现CRUD(Create, Read, Update, Delete)操作,这是数据库应用的基本功能: 1. **创建(Create)**: 用户通过ExtJS的...

    Hibernate+Spring+Struts2+ExtJS CRUD

    在IT行业中,构建高效、可维护的Web应用是至关重要的,而SSH(Spring、Struts2、Hibernate)和ExtJS的结合使用就是一种常见的解决方案。本文将深入探讨如何利用这些技术实现CRUD(创建、读取、更新和删除)功能,并...

    比较流行的框架模式(Hibernate+Spring+Struts2+ExtJS)

    标题中的"Hibernate+Spring+Struts2+ExtJS"是一个经典的Java Web开发框架组合,也被称为SSH2(Struts2, Spring, Hibernate)与ExtJS的集成。这个组合在过去的几年里广泛应用于企业级应用开发,提供了强大的数据持久...

    struts2+spring+hibernate+extjs实例(音乐播放器)

    这是一个基于Java技术栈的Web应用实例,名为...总之,这个实例是一个典型的Java Web项目,通过集成Struts2、Spring、Hibernate和ExtJS,实现了音乐播放器的功能,对于学习和理解这些技术的结合使用具有很高的参考价值。

    图书管理系统源码(ExtJs+struts2+hibernate+spring)

    【图书管理系统源码(ExtJs+struts2+hibernate+spring)】是一个基于Web的软件项目,它展示了如何整合多种技术来构建一个实际的应用系统。这个管理系统使用了前端框架ExtJs,后端MVC框架Struts2,持久层框架...

    Struts2+Spring+Hibernate+ExtJS开发实例.pdf

    ### Struts2+Spring+Hibernate+ExtJS集成开发详解 #### 一、技术栈概览与集成背景 在企业级应用开发中,采用MVC架构的项目常常会使用到多种框架来实现不同的业务需求,其中Struts2、Spring、Hibernate以及ExtJS是...

    Extjs+hibernate+struts2+spring案例大全源代码

    这是一个基于Java技术栈的Web应用开发案例集合,涵盖了ExtJS前端框架、Hibernate持久化框架、Struts2 MVC框架以及Spring框架的综合运用。这个源代码库对于初学者来说是一个宝贵的资源,可以帮助他们理解和掌握这些...

    J2EE最新精品项目源码Struts2.0+Hibernate+Spring+ExtJS

    这个压缩包文件包含了一个基于J2EE架构的高级项目源码,主要采用了Struts2.0、Hibernate、Spring和ExtJS这四大核心技术。下面将详细解释这些技术及其在项目中的应用。 **Struts2.0** 是一个MVC(Model-View-...

    Struts2.18+Spring2.56+Hibernate3+Extjs+JSON实现登陆修改密码等

    Struts2.18+Spring2.56+Hibernate3+Extjs+JSON是一个经典的Java Web开发技术组合,常用于构建高效、可扩展的企业级应用。这个项目涉及到的知识点广泛,涵盖前端、后端以及数据持久化等多个层面。以下是这些技术在...

    spring mvc+hibernate+extjs代码示例

    这是一个基于Spring MVC、Hibernate和ExtJS的Web应用示例,主要展示了如何整合这三个技术来构建一个功能完善的后台管理系统。下面将分别对这三个技术及其整合方式进行详细介绍。 **Spring MVC** Spring MVC是Spring...

    extjs2.0+struts1.2+hibernate+spring增删改查

    本项目名为"extjs2.0+struts1.2+hibernate+spring增删改查",结合了四个核心的技术框架,它们分别是ExtJS 2.0、Struts 1.2、Hibernate和Spring,用于实现数据的CRUD(创建、读取、更新和删除)操作。这四个组件共同...

Global site tag (gtag.js) - Google Analytics