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 ...
随机推荐
- Flutter移动电商实战 --（4）打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- koa 项目实战（六）注册接口加密
1.创建工具类 根目录/config/tools.js const bcrypt = require('bcryptjs'); const tools = { enbcrypt(password) { ...
- Mysql忘记密码,支持中文,tab补全
忘记Mysql密码: (1)暂停服务: /etc/init.d/mysqld stop (2)跳过grant表授权,进入安全模式,并在后台运行: mysqld_safe --skip-grant-ta ...
- GIT管理以及运行规范
继前天看分享的前后端分离后,又重新研究了GIT分支与各个环境的应用. 从开始使用git就一直有在网上查各种资料,查他的运行规范.但不知道是自己理解不够还是怎么的,一直用得不是很好. 根据自己的摸索,整 ...
- 在业务控制方法中写入包装User的模型来收集参数
可以在业务控制方法中书写0个或多个模型来收集客户端的参数 1) 如果多个模型中有相同的属性时,可以用user.name或admin.name来收集客户端参数 2) 用一个新的模型将User和Adm ...
- kafka入门学习---1 启动kakfa
1.查看kafka生产者产生的数据 kafka-console-consumer.sh --zookeeper hadoop-:,hadoop-:,hadoop-: -topic kafkademo ...
- sysctl 命令
sysctl命令 被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目录/proc/sys中.它包含一些TCP/ip堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性 ...
- centos7安装kvm及kvm管理
一.安装kvm 查看CPU是否支持虚拟化 grep -E 'svm|vmx' /proc/cpuinfo - vmx is for Intel processors - svm is for AMD ...
- java数据结构之ConcurrentHashMap
大神博客:https://www.cnblogs.com/study-everyday/p/6430462.html https://baijiahao.baidu.com/s?id=16170899 ...
- iptable的四表五链
iptable的概念中有四张表,五条链. 四张表是: filter表——过滤数据包 Nat表——用于网络地址转换(IP.端口) Mangle表——修改数据包的服务类型.TTL.并且可以配置路由实现QO ...