码迷,mamicode.com
首页 > Web开发 > 详细

extjs 表格为可编辑,保存后为不可编辑状态

时间:2017-06-23 18:16:54      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:连接   ima   格式   win   span   top   tac   record   .ajax   

画出表格
技术分享
编辑后技术分享
思路:在初始时设置一个状态,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 表格为可编辑,保存后为不可编辑状态

标签:连接   ima   格式   win   span   top   tac   record   .ajax   

原文地址:http://www.cnblogs.com/mandy3651/p/7070919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!