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 ...
随机推荐
- ZT：在mybatis的Mapping文件写入表名 出现异常ORA-00903: 表名无效 的解决
简而言之,把#{tablename}换成${tablename}就能解决问题. 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:htt ...
- 中间件 | kafka简介、使用场景、设计原理、主要配置及集群搭建
开源Java学习 公众号 一.入门 1.简介 Kafka is a distributed,partitioned,replicated commit logservice.它提供了类似于JMS的特性 ...
- 发送Http请求调用webService
如果调用WebService的不是在.NET中,无法直接添加web引用,那怎么调用webservice. 有两种方式 第一种方式:GET方式 string strUrl = "http:// ...
- 使用redis防止重复提交
使用redis防止重复提交 其实主要思路是他的https://blog.csdn.net/u013378306/article/details/52944780 主要目前我的情况是,前后端分离的, ...
- WebApi实现通讯加密 （转）
http://www.cnblogs.com/jonneydong/p/WebApi_Encryption.html 一. 场景介绍: 如题如何有效的,最少量的现有代码侵入从而实现客户端与服务器之间的 ...
- R语言与概率统计(三) 多元统计分析（下）广义线性回归
广义线性回归 > life<-data.frame( + X1=c(2.5, 173, 119, 10, 502, 4, 14.4, 2, 40, 6.6, + 21.4, 2.8, 2. ...
- DevOps - CI&CD
1 - CI与CD的联系与区别 持续集成(Continuous Integration).持续交付(Continuous Delivery)和持续部署(Continuous Deployment)的过 ...
- NFS PersistentVolume
一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...
- 【Web】如何注释？
HTML 形式:<!-- 注释内容 --> 实例: <!-- <p>这是第一段</p> --> CSS 形式:/* 注释内容 */ 实例: /* 选中i ...
- Centos7搭建主从DNS服务器
1.准备 例:两台192.168.11.10(主),192.168.11.11(从),域名www.test1.com # 主从DNS服务器均需要安装bind.bind-chroot.bind-util ...