extjs 表格为可编辑，保存后为不可编辑状态
画出表格
编辑后
思路：在初始时设置一个状态，panduan='0'，此时，就是一个不可编辑的input，当点击编辑时，改变panduan = '1'，即可编辑。保存是加入正则表达式的判断，在将panduan='0'
var columnsSet = {
'姓名' : {
align : 'center',
minWidth : 80
},
'性别' : {
align : 'center',
minWidth : 80
},
'单位' : {
align : 'center',
minWidth : 80
},
'职务' : {
align : 'center',
minWidth : 80
},
'从事主要业务' : {
align : 'center',
minWidth : 80
},
'办公室电话' : {
align : 'center',
minWidth : 120,
renderer : function(v, k, r) {
var oo = '';
if (panduan == '0') {
oo = 'style="background:none;border-right:0px solid; border-top:0px solid; border-left:0px solid; border-bottom:0px solid; text-align:center;" readonly="readonly"';
}
var htmlFormat = '<input id='
+ r['raw']['办公室电话']
+ ' type="text" '
+ oo
+ 'name="bgsdh" onblur="Ext.getCmp(\'{0}\').bgsdhRecord(this)" value = {1} >';
var html = Ext.String.format(htmlFormat, this.id, v);
if (me.readonly && me.readonly == true) {
return v;
} else { return html;
}
} },
'手机' : {
align : 'center',
minWidth : 120,
renderer : function(v, k, r) {
var oo = '';
if (panduan == '0') {
oo = 'style="background:none;border-right:0px solid; border-top:0px solid; border-left:0px solid; border-bottom:0px solid;text-align:center;" readonly="readonly"';
}
var htmlFormat = '<input id='
+ r['raw']['手机']
+ ' type="text" '
+ oo
+ 'name="sj" onblur="Ext.getCmp(\'{0}\').sjRecord(this)" value = {1} >';
var html = Ext.String.format(htmlFormat, this.id, v);
if (me.readonly && me.readonly == true) {
return v;
} else {
return html;
}
}
},
'微信号' : {
align : 'center',
minWidth : 120,
renderer : function(v, k, r) {
var oo = '';
if (panduan == '0') {
oo = 'style="background:none;border-right:0px solid; border-top:0px solid; border-left:0px solid; border-bottom:0px solid;text-align:center;" readonly="readonly"';
}
var htmlFormat = '<input id=' + r['raw']['微信号']
+ ' type="text" ' + oo
+ 'name="wxh" value = {1} >';
var html = Ext.String.format(htmlFormat, this.id, v);
if (me.readonly && me.readonly == true) {
return v;
} else {
return html;
}
}
},
'内网邮箱' : {
align : 'center',
minWidth : 120,
renderer : function(v, k, r) {
var oo = '';
if (panduan == '0') {
oo = 'style="background:none;border-right:0px solid; border-top:0px solid; border-left:0px solid; border-bottom:0px solid;text-align:center;" readonly="readonly"';
}
var htmlFormat = '<input id='
+ r['raw']['内网邮箱']
+ ' type="text" '
+ oo
+ 'name="nwyx" onblur="Ext.getCmp(\'{0}\').nwyxRecord(this)" value = {1} >';
var html = Ext.String.format(htmlFormat, this.id, v);
if (me.readonly && me.readonly == true) {
return v;
} else {
return html;
}
}
},
'外网邮箱' : {
align : 'center',
minWidth : 120,
renderer : function(v, k, r) {
var oo = '';
if (panduan == '0') {
oo = 'style="background:none;border-right:0px solid; border-top:0px solid; border-left:0px solid; border-bottom:0px solid;text-align:center;" readonly="readonly"';
}
var htmlFormat = '<input id='
+ r['raw']['外网邮箱']
+ ' type="text" '
+ oo
+ 'name="wwyx" onblur="Ext.getCmp(\'{0}\').wwyxRecord(this)" value = {1} >';
var html = Ext.String.format(htmlFormat, this.id, v);
if (me.readonly && me.readonly == true) {
return v;
} else {
return html;
}
}
}
编辑时改变状态，即panduan='1'
bjRecord : function() {
panduan = '1';
this.Reload();
},
保存时
saveRecord : function(inputElement) {
var me = this;
if (me.bgsdhcheck == '1') {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则：区号+号码，区号以0开头，3位或4位 ;号码由7位或8位数字组成,区号与号码之间可以无连接符，也可以“-”连接 如01088888888,010-88888888,0955-7777777',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
return false;
bgsdhcheck == '0';
}
if (me.sjcheck == '1') {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则：11位数字，以1开头 如12345678941',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
return false;
sjcheck == '0';
}
if (me.nwyxcheck == '1') {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则: 第一部分@第二部分 如11@qq.com',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
return false;
nwyxcheck == '0';
}
if (me.wwyxcheck == '1') {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则: 第一部分@第二部分 如11@qq.com',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
return false;
wwyxcheck == '0';
}
//获取所有的值，将每一列的数据放到一个数组里，将数组的数据通过Ajax传到后台。
me.getSelectionModel().selectAll();
var record = me.getStore().getRange();
var bgsdh = [];
var sj = [];
var wxh = [];
var nwyx = [];
var wwyx = [];
// var bgsdhs = $("input[name='bgsdh']");
$("input[name='bgsdh']").each(function(index, element) {
bgsdh.push($(element).val());
});
// var sjs = $("input[name='sj']");
$("input[name='sj']").each(function(index, element) {
sj.push($(element).val());
});
// var wxhs = $("input[name='wxh']");
$("input[name='wxh']").each(function(index, element) {
wxh.push($(element).val());
});
// var nwyxs = $("input[name='nwyx']");
$("input[name='nwyx']").each(function(index, element) {
nwyx.push($(element).val());
});
// var wwyxs = $("input[name='wwyx']");
$("input[name='wwyx']").each(function(index, element) {
wwyx.push($(element).val());
});
var array1 = [];
for (var i = 0; i < record.length; i++) {
var zhujian = record[i].get("HDID");
bgsdh.push(record[i].get("办公室电话"));
sj.push(record[i].get("手机"));
wxh.push(record[i].get("微信号"));
nwyx.push(record[i].get("内网邮箱"));
wwyx.push(record[i].get("外网邮箱"));
array1.push(zhujian);
}
Ext.Ajax.request({
url : '/zgzhzd/zzgzlxb/Zzgzlxb/savefpme?theme=none',
params : {
bgsdh : bgsdh,
sj : sj,
wxh : wxh,
nwyx : nwyx,
wwyx : wwyx,
array1 : array1
},
success : function(r) {
var data = Ext.decode(r.responseText);
if (data.success == 'true') {
Ext.Msg.show({
title : '保存',
msg : '操作成功!',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
panduan = '0';
me.Reload();
} else {
Ext.Msg.show({
title : '保存',
msg : '操作失败!',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
}
},
failure : function(response) {
Ext.Msg.show({
title : '提示',
msg : '操作失败!',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
}
});
},
java文件，保存方法。
//保存
@Action
public String savefpme() {
HttpServletRequest request = ActionContext.getActionContext().getHttpServletRequest();
Map<String, Object> map = new HashMap<String, Object>();
String[] B00 = request.getParameterValues("array1");
String[] bgsdh = request.getParameterValues("bgsdh");
String[] sj = request.getParameterValues("sj");
String[] wxh = request.getParameterValues("wxh");
String[] nwyx = request.getParameterValues("nwyx");
String[] wwyx = request.getParameterValues("wwyx");
for (int i = 0; i < B00.length; i++) {
String sql = "";
String sqlsel="select ZGZH0300 from ZGZH03 where ZGZH0301='"+B00[i]+"'";
List<Map<String, Object>> listres = jdbcOperations.queryForList(sqlsel);
if(listres.isEmpty()){ sql = "insert into ZGZH03(ZGZH0301,ZGZH0302,ZGZH0303,ZGZH0304,ZGZH0305,ZGZH0306) values "
+ "('"+B00[i]+"','"+bgsdh[i]+"','"+sj[i]+"','"+wxh[i]+"','"+nwyx[i]+"','"+wwyx[i]+"')";
}
else{
sql = "update ZGZH03 set ZGZH0302='"+bgsdh[i]+"',ZGZH0303='"+sj[i]+"',ZGZH0304='"+wxh[i]+"',ZGZH0305='"+nwyx[i]+
"',ZGZH0306='"+wwyx[i]+"'where ZGZH0300='"+listres.get(0).get("ZGZH0300")+"'";
}
try {
int count = jdbcOperations.update(sql);
if(count > 0){
map.put("message", "插入成功");
map.put("success", "true");
}else{
map.put("message", "插入失败");
map.put("success", "false");
}
} catch (Exception e) {
map.put("message", "插入失败");
map.put("success", "false");
e.printStackTrace();
}
}
return Json.encode(map);
}
正则表达式的验证
在上述红色框调用
// 正则验证
bgsdhRecord : function(inputElement) {
var me = this;
var zz = $(inputElement).val();
var pattern = /^0\d{2,3}-?\d{7,8}$/;
if (!pattern.test(zz)) {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则：区号+号码，区号以0开头，3位或4位 ;号码由7位或8位数字组成,区号与号码之间可以无连接符，也可以“-”连接 如01088888888,010-88888888,0955-7777777',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
bgsdhcheck = '1';
} else {
bgsdhcheck = '0';
} },
sjRecord : function(inputElement) {
var me = this;
var zz = $(inputElement).val();
var pattern = /^1\d{10}$/;
if (!pattern.test(zz)) {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则：11位数字，以1开头 如12345678941',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
sjcheck = '1';
} else {
sjcheck = '0';
}
},
nwyxRecord : function(inputElement) { var me = this;
var zz = $(inputElement).val();
var pattern = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!pattern.test(zz)) {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则: 第一部分@第二部分 如11@qq.com',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
nwyxcheck = '1'; } else {
nwyxcheck = '0';
}
},
wwyxRecord : function(inputElement) {
var me = this;
var zz = $(inputElement).val();
var pattern = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!pattern.test(zz)) {
Ext.Msg.show({
title : '提示',
msg : '格式不对，规则: 第一部分@第二部分 如11@qq.com',
buttons : Ext.Msg.OK,
icon : Ext.window.MessageBox.ERROR
});
wwyxcheck = '1'; }
wwyxcheck = '0';
},
extjs 表格为可编辑，保存后为不可编辑状态的更多相关文章
- vue 表格 多选 换页保存前一页的状态
表格多选 点击下一页,上一页的状态没消失. 在表格 添加 row-key="id" 在表格行里添加 reserve-selection
- 今天在Mac机器上使用了Flex Builder编辑了一个源代码文件，保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号，其实^M在Linux/Unix中是非常常见的，也就是我们在Win中见过的/r回车符号。由于编辑软件的编码问题，某些IDE的编辑器在编辑完文件之后会自动加上这个^M符号。看起来对我们的源代码没有任何影响，其实并不然，当我们把源代码文件Check In到svn之类
今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在W ...
- H+ 编辑tab页 保存后 刷新列表tab页 并关闭自已。tabA页调用tabB页的方法
//注:在contabs.js文件中 $(function () { }); 方法外 加入 //注: data-name="' + menuName + '" 这句是加入的自定义属 ...
- MAC 终端编辑完成后如何保存：
如果是vi,则:Esc 退出编辑模式,输入以下命令: :wq 保存后退出vi,若为 :wq! 则为强制储存后退出(常用):w 保存但不退出(常用):w! 若文件属性为『只读』时,强制写入该档案:q 离 ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- 设置sudo不输入密码 sudoers 编辑出错后的补救方法
一 设置sudo为不需要密码 有时候我们只需要执行一条root权限的命令也要su到root,是不是有些不方便?这时可以用sudo代替.默认新建的用户不在sudo组,需要编辑/etc/sudoers文件 ...
- css javascript 自动化压缩（保存后即自动生成压缩文件）
先上图:
- 解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能
最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...
- 弹框勾选datatable中的数据，点击保存后添加到另一个表中，同一个页面
需求描述:做编辑的时候,点击添加按钮,弹出数据表table2,勾选弹出框中的数据,点击保存后能够添加到table1中,并且已经被添加到table1中的数据,在弹出框中显示已选,checkbox隐藏:t ...
随机推荐
- mac安装phpmysql
1.百度搜“phpmadmin”,还是一样,第二个因为是PC版本,不能用,点击第一个连接,去phpmyadmin的官网. 2.下载完毕后,进入到下载文件保存目录,双击压缩包,压缩包则会自动解压. 3. ...
- mysql数据库学习
1,服务端和客户端 MySQL 包括服务端和客户端,服务端是MySQL server,客户端包括命令行客户端和图形用户客户端: 命令行客户端:mysql,mysqladmin,mysqldump ( ...
- POJ 3083 -- Children of the Candy Corn（DFS+BFS）TLE
POJ 3083 -- Children of the Candy Corn(DFS+BFS) 题意: 给定一个迷宫,S是起点,E是终点,#是墙不可走,.可以走 1)先输出左转优先时,从S到E的步数 ...
- Undo Segment/Undo Retention
undo_retention简单定义,就是最多数据的最少保留时间.AUM模式下,undo_retention参数用于事务commit后undo数据保留的时间.单位为秒.这是个no guarantee的 ...
- 【8583】ISO8583报文解析
ISO8583报文(简称8583包)又称8583报文,是一个国际标准的包格式,最多由128个字段域组成,每个域都有统一的规定,并有定长与变长之分. [报文格式] POS终端上送POS中心的消息报文结构 ...
- Des加密类
需要导入Base64.jar包 import java.io.IOException; import java.security.SecureRandom; import javax.crypto.C ...
- Python3+RobotFramewok RIDE环境搭建（一）
工欲善其事,必先利其器,RIDE目前可以比较稳定的支持python3了,这里简单介绍一下环境的部署,建议多看看读一读官方文档,对能力提升很有帮助,很简单的三步: (1)安装python3,不详细介绍了 ...
- Nginx+FastCGI到底是谁影响超时时间
需求: 一个php程序要跑一段时间,但是时间不确定. 问题: 当该php程序运行超过一段时间被强制断开连接. PHP本身超时处理 在 php.ini 中,有一个参数 max_execution_tim ...
- window 10 安装vs2013启动web项目报错Id端口不能启动iis
https://www.cnblogs.com/leolion/p/3789732.html 如果我们想在Visual Studio2013上调试64位ASP.NET MVC的网站(本机环境X64), ...
- 3年磨一剑，我的前端数据 mock 库 http-mock-middleware
不好意思,离开博客园4年多了,一回来就是为自己打广告,真是害羞啊... http-mock-middleware 是我最近完成的一个前端数据 mock 库.它是我汇总近3年工作经验而诞生的一个工具,使 ...