extjs经典的增删改查
首先，编辑一下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如下：
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);
}
});
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));
}
}
extjs经典的增删改查的更多相关文章
- 快速开发平台WebBuilder中ExtJS表格的增删改查
使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...
- SQLite中的增删改查
虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...
- MVC4 经典增删改查详情demo
MVC4 经典增删改查详情demo 源码 不解释 Mvc4增删改查详情Demo.7z public ActionResult Detail(int? id) { ViewData.Model ...
- asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
- primefaces4.0基本教程以及增删改查
最近试着用了用primefaces4.0,准备写一个基本的增删改查以及分页程序,但在写的过程中发现了很多问题,本想通过百度.谷歌解决,但无奈中文资料非常少,笔者在坑中不停的打滚,终于完成了一个有着基本 ...
- MyBatis学习系列二——增删改查
目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
- 初试KONCKOUT+WEBAPI简单实现增删改查
初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...
- SQL Server学习之路（六）：“增删改查”之“查”
0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...
- MyBatis的增删改查。
数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改,并且对程序接口做了一些调整,以及对一些问题进行了解答. 1.调整后的结构图: 2.连接数据库文件配置分离: 一般的程序都会把连 ...
随机推荐
- SQL精华应用
[精确到纳秒的时间函数] SYSDATETIME().SYSUTCDATETIME() ---- 精确程度取决于执行 SQL Server 实例的计算机硬件和 Windows 版本号 [ ...
- nginx安装第三方模块的方法
nginx第三方模块安装方法: ./configure --prefix=/你的安装目录 --add-module=/第三方模块目录 以安装fair模块实例 下载fair安装包并解压 1.在未安装ng ...
- Java读写二进制文件示例
相对于文本文件,二进制文件读写快,定位快而准,下面是代码示例: import java.io.DataInput; import java.io.DataOutput; import java.io. ...
- 使用two.js生成的卫星环绕动画效果
来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...
- Android异步载入全解析之大图处理
Android异步载入全解析之大图处理 异步载入中很重要的一部分就是对图像的处理,这也是我们前面用异步载入图像做示例的原因. 一方面是由于图像处理不好的话会很占内存,并且easyOOM,还有一方面,图 ...
- JMeter 五：监控服务器
参考:http://jmeter.apache.org/usermanual/build-monitor-test-plan.html 添加Thread Group 添加方法:Test Plan上右键 ...
- 【MVC5】后台修改的Model值反映不到客户端的问题
画面上的检索结果有翻页功能,就在画面上追加了几个隐藏控件保存上次检索时的检索条件. 检索时更新这些隐藏控件的值,Debug时确实把Model中对应的属性值变掉了,但是到了客户端又变回之前的值了. 百思 ...
- vConsole
说明 由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写 使用方法 使用 npm 安装: npm install vconsole 使用webp ...
- logback 配置解析
http://www.cnblogs.com/cb0327/p/5759441.html 正文 回到顶部 1.根节点<configuration>包含的属性 scan: 当此属性设置为tr ...
- O2O研究系列——O2O知识思维导图整理
本篇文章对O2O电子商务模式的常规知识点,使用思维导图的方式整理,表达的形式是名词纲领性的方式, 不会在图中详细说明各个点. 通过这个图研究O2O模式时,可以系统的对各个业务点进行更深入的研究,避免有 ...