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 ...
随机推荐
- phpstorm clone 码云项目到本地 Version Control 不显示
最近在用码云作为代码仓库,但是建了仓库,也填加了 SSH,把项目利用 phpstorm VCS --> checkout from version control --> git 克隆到 ...
- C++ STL——常用算法
目录 一 常用查找算法 二 常用遍历算法 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 一 常用查找算法 /* find算法 查找元素 @param ...
- [CDH] Cloudera's Distribution including Apache Hadoop
You may choose to install spark, yarn, hive, etc one by one. [Spark] 00 - Install Hadoop & Spark ...
- charles修改响应体
一.修改响应体(只要勾选了主导航Tools--rewrite之后,则请求会一直被修改) 目的:需要测试数据为空,为纯英文,纯数字等多种情况,为了不麻烦后端的技术人员一支来配置,那么咱们就可以改造数据啦 ...
- python3 速查参考- python基础 6 -> 函数编程之参数、变量、作用域、递归、匿名函数 lambda
函数基础 1. 速查笔记 #-- 函数相关的语句和表达式 myfunc('spam') # 函数调用 def myfunc(): # 函数定义 return None # 函数返回值 global a ...
- Linux 操作系统常用命令
常用命令详解 ls 常用选项: -a:列出所有文件,包括以.为开头的隐藏文件. -d ; 列出目录本身,并不包含目录里的内容. -h:和-l一起使用,文件大小容易阅读.文件的实际大小 ls -d/ro ...
- SQL --------JDBC 用用户名查询用户的信息
package demo; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...
- Centos7 安装python3.8和pip
安装python3 yum -y install yum-utilsyum-builddep pythoncurl -O https://www.python.org/ftp/python/3.8.0 ...
- sd卡挂载方法：
cd mnt//Sdcard创建目录mkdir -m 777 Sdcard//节点挂载mount /dev/msa1 /mnt/Sdcard//抓包./tcpdump -i eth0 tcp por ...
- [转帖]英特尔首款采用10nm技术的混合CPU“Lakefield”即将发布
英特尔首款采用10nm技术的混合CPU“Lakefield”即将发布 intel 也出soc了 里面的东西 跟 安卓和 apple的a系列很像. https://baijiahao.baidu.com ...