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 : ‘格式不对,规则: 第一部分@第二部分  如[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]‘,
                        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-*\.*)[email protected](\w-?)+(\.\w{2,})+$/;
        if (!pattern.test(zz)) {
            Ext.Msg.show({
                        title : ‘提示‘,
                        msg : ‘格式不对,规则: 第一部分@第二部分    如[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-*\.*)[email protected](\w-?)+(\.\w{2,})+$/;
        if (!pattern.test(zz)) {
            Ext.Msg.show({
                        title : ‘提示‘,
                        msg : ‘格式不对,规则: 第一部分@第二部分  如[email protected]‘,
                        buttons : Ext.Msg.OK,
                        icon : Ext.window.MessageBox.ERROR
                    });
            wwyxcheck = ‘1‘;

        }
        wwyxcheck = ‘0‘;
    },
 
时间: 2024-07-29 20:25:20

extjs 表格为可编辑,保存后为不可编辑状态的相关文章

ExtJs表格控件(三)----单元格编辑与提交修改

ExtJs的EditorGrid控件提供了动态修改某个单元格的方法,首先如果要使用编辑插件,首先必须要在需要的列上添加editor属性,只有添加了editor属性的列才可以被编辑,否则无法编辑.同时我们可以在editor中添加一些限制或者约束条件,例如禁止编辑的单元格为空,首先在定义列的时候使用如下方法定义: var columns = [{ header : '第一列', dataIndex : 'first', renderer:datarender, editor:{ allowBlank

vi编辑文件保存后,提示&quot;&quot;vimrc&quot; E212: Can&#39;t open file for writing Press ENTER or type command to continu&quot;

出现这个错误的原因可能有两个: 1.当前用户的权限不足: 2.此文件可能正被其他程序或用户使用. 一般错误原因都是前者,解决方案是在使用vi命令打开文件时,前面加上sudo来临时提供管理员权限,比如使用命令“sudo vi vimrc”打开编辑文件. vi编辑文件保存后,提示""vimrc" E212: Can't open file for writing Press ENTER or type command to continu" 原文地址:https://w

ExtJS表格——行号、复选框、选择模型

本篇的内容是为表格添加行号,和复选框,最后谈一下Ext的选择模型.内容比较简单,就直接上代码了.一. 设置行号   行号的设置主要问题在于删除某一行后需要重新计算行号  Ext.onReady(function() {         var cm = new Ext.grid.ColumnModel([                     new Ext.grid.RowNumberer(),           --在这里设置行号                    { header:

SharePoint 母版页保存后不起作用

有时新建一个站点,编辑母版页保存后,母版页不起作用,可能原因就是母版页需要发布后才能生效. 发布母版页步骤如下: Site Settings—>Master Pages 选中需要编辑的母版页,点击功能区的“Publish”. 需要发布母版页的原因: Site collection features 中的 SharePoint Server Publishing Infrastructure开启了 SharePoint 母版页保存后不起作用,布布扣,bubuko.com

简单粗暴的table行编辑保存

前段时间有人私信问"有没有点击编辑按钮相应的一行变成编辑状态",最后交流了一会儿,只能写了一个简单的Demo,也就是上一篇博文:<最原始的行编辑>,完事后问题又来了,编辑完成后保存能行否?这个问题你们觉得答案是什么,我就不说了,答案你们定...最后强调了一句,编程一定要有自己的思路和想法!!!今天就把剩下的想要的给大家~~~ <html> <head> <title>Table Test Demo</title> <st

ExtJs表格控件(一)

ExtJs表格由类Ext.grid.GridPanel定义,其xtype为grid.表格中列信息由columns定义,而表格的数据存储器由Ext.data.Store定义. 列的定义是一个JSON数组,这个JSON数字是整个表格列的模型必须首先定义,这个JSON数组中的每一个元素都是描述一列属性的,包含:显示文本(header).列对应的记录集字段(dataIndex).列的渲染函数(renderer).宽度(width)以及格式化信息(format). 下面看一个具体示例: 首先在JSP页面中

保存ActionForm中未编辑的字段为NULL,尤其整数不赋0值

Struts中,如果ActionForm里某些字段没有编辑(即没有输入值),提交后直接保存到数据库时,这些字段保存为""(String)或0(int),可是在实际开发中,可能需要将其保存位null,如何实现呢? 最直观的办法:判断字段是否为空,如果为空,则返回null 最简单的办法:修改ActionServlet配置下init-param,具体如下 ActionServlet配置下init-param: 1 <init-param> 2 <param-name>

MathType公式保存后为什么字体会变化

在使用MathType数学公式编辑器的时候,很多的用户朋友是新手会遇到一些问题,比如,有时我们保存后却发现MathType公式字体变化了,原本的斜体变成了正体,面对这种问题我们该如何解决呢?下面就来给大家介绍介绍. 例如: 改变后成为 解决方法如下: 1.双击显示异常的公式进入MathType编辑窗口选中你要修改的符号或者字母,选择“样式”——“数学”或者“变量”.  将字符类型改为“数学”或者“变量” 2.选择“样式”——“定义”,在“定义样式”窗口中将“变量”设置为“Times New Ro

oracle修改后的tnsnames文件无法保存,保存后提示另存为,怎么回事

在配置新的数据库的时候,需要配置监听把一些信息放进去,找到tnsnames时进行修改,文件无法保存,保存后提示另存为. 后来经过在网上查找资料,这种现象产生的原因可能是因为该文件被加密过,所以不允许修改.解决的方法如下: 1.首先打开tnsnames.ora文件 2.右键该文件,点击属性,并进入到常规选项中 3.点击"安全页签",可以选择"编辑"按钮,然后进入到新的界面 4.最后将写入操作的"允许"列的勾上,并点击应用,即可以将tnsnames.