extjs经典的增删改查

最新推荐文章于 2024-04-23 15:26:03 发布

weixin_30369087

最新推荐文章于 2024-04-23 15:26:03 发布

阅读量76

点赞数

文章标签： ux javascript json ViewUI

原文链接：http://www.cnblogs.com/zrui-xyu/p/4917276.html

版权

首先，编辑一下yepnope，生成yepnope.jsp，如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${ctx}/resources/loader/yepnope.min.js"></script>
<script type="text/javascript">
   pagesize=eval('(${fields.pagesize==null?"{}":fields.pagesize})');
   yepnope({
           load : [ //extjs
                     "${ctx}/resources/extjs/resources/css/ext-all.css",
                     //"${ctx}/resources/extjs/resources/css/yourtheme.css",
                     "${ctx}/resources/extjs/resources/css/xtheme-blue.css",
                     "${ctx}/resources/extjs/adapter/ext/ext-base.js",
                   "${ctx}/resources/extjs/ext-all.js",
                   "${ctx}/resources/extjs/ext-lang-zh_CN.js",
                   "${ctx}/resources/extjs/ux/ExtMD5.js",
                   "${ctx}/resources/extjs/ux/TabCloseMenu.js",
                   "${ctx}/resources/extjs/ux/SearchField.js",
                   "${ctx}/resources/extjs/ux/ProgressBarPager.js",
                   //通用
                   "${ctx}/resources/js/Ext.ux.override.js",
                   "${ctx}/resources/js/share.js",
                   "${ctx}/resources/js/shareux.js",
                   "${ctx}/resources/js/ux/DeptTreePanel.js",
                   "${ctx}/resources/js/ux/DeptUserPanel.js",
                   "${ctx}/resources/js/ux/UploadWindow.js",
                   //jquery
                   "${ctx}/resources/jquery/jquery-1.8.1.min.js",
                   "${ctx}/resources/jquery/jquery.json-2.2-min.js",
                     "${ctx}/resources/css/default.css",
                     "${ctx}/resources/jquery/fixtable.js",
                     "${ctx}/resources/css/ext-patch.css",
                       //fckeditor
                     '${ctx}/resources/extjs/ux/FieldLabeler.js',
                   '${ctx}/resources/fckeditor/fckeditor.js'
                   ],
           complete : function() {
               Ext.QuickTips.init();
               Ext.form.Field.prototype.msgTarget = 'under';//qtip,title,under,side
               Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
               ctx = "${ctx}";
               currentUser = {
                  userId:'${user.userId}',
                  account:'${user.account}',
                  realName:'${user.realName}',
                  deptId:'${user.dept.deptId}'
               }
               Ext.BLANK_IMAGE_URL = '${ctx}/resources/extjs/resources/images/default/s.gif';
               }
           });
</script>

大框架有了，具体页面如下：

jsp页面如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<html>
<head>
   <script type="text/javascript">
   yepnope({
        load:[
        '${ctx}/resources/js/user/application/AppFormWin.js',
       '${ctx}/resources/js/user/application/AppGridPanel.js'],
       complete:function(){
           var testGrid = new Ext.basic.AppGridPanel({
               height : index.tabPanel.getInnerHeight() - 1,
               width:index.tabPanel.getInnerWidth() - 1,
               actionJson:${actionJson},
               id: '${param.id}' + '_panel',
               renderTo:'${param.id}'
           });
       }
   });
</script>
</head>


<body>
   <div id="${param.id}"></div>
</body>
</html>

AppGridPanel如下：

Ext.ns("Ext.basic");

Ext.basic.AppGridPanel = Ext.extend(Ext.grid.GridPanel, {

   constructor : function(_config) {
       Ext.apply(this, _config || {});

       this.pageSize = 20;
       this.Url = {
           all : ctx + '/baseApplication/queryListForPage',// 加载所有
           insertUrl : ctx + '/baseApplication/insert',
           updateUrl : ctx + '/baseApplication/update',
           deleteUrl : ctx + '/baseApplication/delete'
       };
       /** 顶部工具栏 */
       this.toolbar = new Ext.ActionToolbar({
                   actionPanel : this,
                   actionJson : this.actionJson,
                   addFunction : this.showAddWindow,
                   editFunction : this.showEditWindow,
                   deleteFunction : this.deleteData
               });

       /** 基本信息-数据源 */
       this.store = new Ext.data.Store({
                   remoteSort : true,
                   baseParams : {
                       start : 0,
                       limit : this.pageSize
                   },
                   proxy : new Ext.data.HttpProxy({// 获取数据的方式
                       method : 'POST',
                       url : this.Url.all
                   }),
                   reader : new Ext.data.JsonReader({// 数据读取器
                       totalProperty : 'results', // 记录总数
                       root : 'rows' // Json中的列表数据根节点
                   }, ['id', 'appName', 'appDesc','appType','displayIndex','iconCls'])
               });

       /** 基本信息-选择模式 */
       this.selModel = new Ext.grid.CheckboxSelectionModel({
                   singleSelect : true,
                   listeners : {
                       'rowselect' : function(selectionModel, rowIndex, record) {
                           this.toolbar.enableEditDelete();
                       },
                       'rowdeselect' : function(selectionModel, rowIndex,
                               record) {
                           if (!selectionModel.hasSelection()) {
                               this.toolbar.disableEditDelete();
                           }
                       },
                       scope : this
                   }
               });
       /** 基本信息-数据列 */
       this.colModel = new Ext.grid.ColumnModel({
                   columns : [this.selModel, {
                               header : '应用名称',
                               dataIndex : 'appName'
                           },{
                               header : '应用类型',
                               dataIndex : 'appType',
                               renderer:function(value){
                                  if(value == 1){
                                    return '系统应用';
                                  }else if(value == 2){
                                    return '外部应用';
                                  }
                               }
                           }, {
                              header:'样式',
                              dataIndex:'iconCls'
                           },{
                              header:'显示顺序',
                              dataIndex:'displayIndex'
                           },{
                               header : '应用描述',
                               dataIndex : 'appDesc',
                               width:300
                           }]
               });

       /** 底部工具条 */
       this.bbar = new Ext.PagingToolbar({
                   pageSize : this.pageSize,
                   store : this.store,
                   displayInfo : true

               });
       Ext.basic.AppGridPanel.superclass.constructor.call(this, {
                   store : this.store,
                   colModel : this.colModel,
                   selModel : this.selModel,
                   bbar : this.bbar,
                   tbar : this.toolbar,
                   autoScroll : 'auto',
                   region : 'center',
                   loadMask : true,
                   stripeRows : true
               });
       this.store.load();
   },
/** 添加组件 */
   showAddWindow : function() {
       if (!this.addWindow) {
           this.addWindow = new Ext.basic.AppFormWin({
                       store : this.store,
                       saveUrl : this.Url.insertUrl
                   });
       }
       this.addWindow.reset();
       this.addWindow.show();
   },
   /** 修改组件 */
   showEditWindow : function() {
       var record = this.getSelectionModel().getSelected();
       if (!this.editWindow) {
           this.editWindow = new Ext.basic.AppFormWin({
                       store : this.store,
                       saveUrl : this.Url.updateUrl
                   });
       }
       this.editWindow.reset();
       this.editWindow.show();
       this.editWindow.loadRecord(record);
   },
   /** 删除信息 */
   deleteData : function() {
       /** 选中的记录 */
       var record = this.getSelectionModel().getSelected();
       /** 存放id的数组 */
           Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗？', function(btn) {
                       if (btn == 'yes') {
                           Ext.Ajax.request({
                                       url : this.Url.deleteUrl,
                                       params : {
                                           id : record.data.id
                                       },
                                       success : function(response, options) {
                                           var text = Ext
                                                   .decode(response.responseText);
                                           Ext.Msg.alert('提示', text.msg,function(){
                                               this.store.reload();
                                           },this);
                                       },
                                       failure : function() {
                                           Ext.MessageBox.alert('提示', '请求失败！');
                                       },
                                       scope : this
                                   });

                       }
                   }, this);
   }

});

AppFormWin如下：

Controller如下：

package cn.edu.hbcf.plugin.project.materials.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.edu.hbcf.common.constants.WebConstants;
import cn.edu.hbcf.common.utils.EncodingUtils;
import cn.edu.hbcf.common.vo.Criteria;
import cn.edu.hbcf.common.vo.ExtGridReturn;
import cn.edu.hbcf.common.vo.ExtPager;
import cn.edu.hbcf.common.vo.ExtReturn;
import cn.edu.hbcf.plugin.project.materials.pojo.ProjectMaterials;
import cn.edu.hbcf.plugin.project.materials.service.ProjectMaterialsService;
import cn.edu.hbcf.plugin.workflow.apply.pojo.Execution;
import cn.edu.hbcf.plugin.workflow.apply.pojo.JbpmTask;
import cn.edu.hbcf.plugin.workflow.apply.service.ExecutionService;
import cn.edu.hbcf.plugin.workflow.business.service.BusinessService;
import cn.edu.hbcf.plugin.workflow.createjpdl.pojo.JpdlNode;
import cn.edu.hbcf.plugin.workflow.createjpdl.service.JpdlNodeService;
import cn.edu.hbcf.plugin.workflow.historybusiness.pojo.HistoryBusiness;
import cn.edu.hbcf.plugin.workflow.historybusiness.service.HistoryBusinessService;
import cn.edu.hbcf.plugin.workflow.sponsor.pojo.Sponsor;
import cn.edu.hbcf.plugin.workflow.sponsor.service.SponsorService;
import cn.edu.hbcf.privilege.pojo.BaseUsers;
/**
* 描述：无项目材料采购Controller
* @author zhaorui
* @date 2015-10-28
*/
@Controller
@RequestMapping("/projectMaterials")
public class ProjectMaterialsController {

   @Autowired
   private ProjectMaterialsService service;
   /**
   * 描述：进入无项目材料采购的jsp路径
   * @return 进入无项目材料采购的jsp路径
   */
   @RequestMapping(method=RequestMethod.GET)
   public String getIndex(){
       return "/plugins/project/web/views/materials/materials";
   }
   /**
   * 描述：查询详细页所有的无项目材料采购信息
   * @param request
   * @param materials 根据billId查询唯一标识
   * @param pager 分页
   * @return
   */
   @RequestMapping(value="/queryListForPage",method=RequestMethod.POST)
   @ResponseBody
   public ExtGridReturn queryListForPage(HttpServletRequest request, ProjectMaterials materials,ExtPager pager){
       Criteria criteria = new Criteria();
       if(pager.getStart()!=null && pager.getLimit()!=null){
           criteria.put("start", pager.getStart());
           criteria.put("limit", pager.getLimit());
       }
       criteria.put("billId", materials.getBillId());
       List<ProjectMaterials> list = service.queryListForPage(criteria);
       int total = service.getTotalCount(criteria);
       return new ExtGridReturn(total, list);
   }
   /**
   * 描述：新增无项目材料采购信息都数据库中
   * @param materials 要新增的无项目材料采购信息
   * @return
   */
   @RequestMapping(value="/insert",method=RequestMethod.POST)
   @ResponseBody
   public ExtReturn insert(ProjectMaterials materials){
       materials.setId(UUID.randomUUID().toString().replace("-", ""));
       int result = service.insert(materials);
       if(result>0){
           return new ExtReturn(true, "新增成功！");
       }
       return new ExtReturn(false, "新增失败！");
   }
   /**
   * 描述：修改无项目材料采购信息
   * @param materials 要修改的无项目材料采购信息
   * @return
   */
   @RequestMapping(value="/update",method=RequestMethod.POST)
   @ResponseBody
   public ExtReturn update(ProjectMaterials materials){
       int result = service.update(materials);
       if(result>0){
           return new ExtReturn(true, "修改成功！");
       }
       return new ExtReturn(false, "修改失败！");
   }
   /**
   * 描述：删除无项目材料采购信息
   * @param ids 批量删除，唯一标识一
   * @return
   */
   @RequestMapping(value="/delete",method=RequestMethod.POST)
   @ResponseBody
   public ExtReturn delete(String[] ids){
       int result = service.deleteAll(ids);
       if(result>0){
           return new ExtReturn(true, "删除成功！");
       }
       return new ExtReturn(false, "删除失败！");
   }
   /**
   * 描述：增加一行统计装修预算的数据
   * @param materials 条件
   * @return
   */
   @RequestMapping(value="/getSumTotol",method=RequestMethod.POST)
   @ResponseBody
   public ExtReturn getSumTotol(ProjectMaterials materials){
       return new ExtReturn(true, service.getSumTotol(materials));
   }
}

转载于:https://www.cnblogs.com/zrui-xyu/p/4917276.html

weixin_30369087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs经典的增删改查

首先，编辑一下yepnope，生成yepnope.jsp，如下：<%@ page language="java" pageEncoding="UTF-8"%><script type="text/javascript" src="${ctx}/resources/loader/yepnope.min.js"></script><script type=...
复制链接

扫一扫