extjs 表格為可編輯，保存後為不可編輯狀態
阿新 • • 發佈：2017-06-23
action bottom ams res read true turn jre sql
編輯後
畫出表格
編輯後
思路：在初始時設置一個狀態，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 { returnhtml; } } }, ‘手機‘ : { 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 : ‘格式不對，規則: [email protected] [email protected], buttons : Ext.Msg.OK, icon : Ext.window.MessageBox.ERROR }); return false; nwyxcheck == ‘0‘; } if (me.wwyxcheck == ‘1‘) { Ext.Msg.show({ title : ‘提示‘, msg : ‘格式不對，規則: [email protected] [email protected], 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 : ‘格式不對，規則: [email protected] [email protected], 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 : ‘格式不對，規則: [email protected] [email protected], buttons : Ext.Msg.OK, icon : Ext.window.MessageBox.ERROR }); wwyxcheck = ‘1‘; } wwyxcheck = ‘0‘; },
extjs 表格為可編輯，保存後為不可編輯狀態