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

最新推荐文章于 2019-01-08 15:15:38 发布
最新推荐文章于 2019-01-08 15:15:38 发布
阅读量283 收藏
点赞数
文章标签： json java
原文链接：http://www.cnblogs.com/mandy3651/p/7070919.html
版权 
画出表格
编辑后 
思路：在初始时设置一个状态，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" οnblur="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" οnblur="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" οnblur="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" οnblur="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';
    },
 
  
 
  
 
 
  
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/mandy3651/p/7070919.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30675247
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
ExtJS中设置下拉列表框不可编辑的方法

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了ExtJS中设置下拉列表框不可编辑的方法,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
ExtJS学习(四)EditorGrid可编辑表格

					
热门推荐

				
			

			

				

					分享牛
				

				

					03-12
					
					2万+
					
				

			

		

		

			
				
操作表格有一种需求，要操作表格需要动态的添加内容，删除内容以及双击的时候进入编辑状态。这个时候怎么办呢，看具体的实现吧。 
双击点击的时候可以单元格的操作。 
代码：





			
		

	



                


  
              

                


	

		

			

				
					
extjs EditorGridPanel禁止某些单元格编辑

				
			

			

				

					嘻嘻哈哈的专栏
				

				

					03-29
					
					1万+
					
				

			

		

		

			
				
给EditorGridPanel加上listeners

'cellclick' : function(grid, rowIndex, columnIndex, e) {
	var record = grid.getStore().getAt(rowIndex);
	if(record.get('editable') == 'N' && columnIndex == 2）
		return f

			
		

	





	

		

			

				
					
Extjs grid表格根据条件判断某行是否可编辑

				
			

			

				

					樱花园丁
				

				

					01-08
					
					1935
					
				

			

		

		

			
				

//grid编辑
    var grid = Ext.getCmp('gridMain');
  
    grid.addPlugin(
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    );

//单元格禁止编辑
   grid.addListener...

			
		

	



		

			
		



	

		

			

				
					
Extjs grid 中 checkbox列无法编辑的解决

				
			

			

				

					walle的博客
				

				

					06-17
					
					1724
					
				

			

		

		

			
				
Extjs grid单元格编辑，有一个字段【只读】readonly，设置xtype为checkcolumn，但点击checkbox时状态切换有问题，只能把选中的改为不选中，不选中的却无法选中        var fieldCellEditing = Ext.create("PSI.UX.CellEditing", {
            clicksToEdit: 1, //点击几次进入编辑...

			
		

	





	

		

			

				
					
ExtJs控件属性配置详细

				
			

			

				

					weixin_34233618的博客
				

				

					08-27
					
					420
					
				

			

		

		

			
				
序言：
   1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴（不足之处，以后项目用到时再续完善）。
Ext.form.TimeField:
  配置项：            maxValue：列表中允许的最大时间            maxText：当时间大于最大值时的错误提示信息            minValue：列表中允许的最小时间        ...

			
		

	





	

		

			

				
					
ExtJS_可编辑Grid进度条

				
			

			

				

					04-11
				

			

		

		

			
				
ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.

			
		

	





	

		

			

				
					
extjs表格文本启用选择复制功能具体实现

				
			

			

				

					10-26
				

			

		

		

			
				
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的，下面就为大家介绍下选择复制功能如何启用，感兴趣的朋友可以了解下

			
		

	





	

		

			

				
					
EXTJS页面编辑器

				
			

			

				

					03-24
				

			

		

		

			
				
EXTJS页面编辑器，对于使用EXTJS作为项目界面技术支持的人，可以用该编辑器，可以快速的编辑生成你所需要的界面。

			
		

	





	

		

			

				
					
行编辑动态设置某个单元格进入编辑状态/不可编辑

				
			

			

				

					weixin_34206899的博客
				

				

					10-30
					
					2610
					
				

			

		

		

			
				
行编辑时特定单元格编辑
设置列qtype的editable属性值为true，表示此字段可编辑；然后设置id对应的行进入编辑状态，此时该行中所有的可编辑列都将进入编辑状态。

$("#jqgridTable").setColProp("qtype",{editable:true});
$("#jqgridTable").editRow(id,true);


qtype列名 id ...

			
		

	





	

		

			

				
					
extjs中的表格编辑

				
			

			

				

					
				

				

					01-16
					
					1204
					
				

			

		

		

			
				
要实现ext表格编辑首先需要启用CellEditing插件，示例代码如下：
grid = Ext.create('Ext.grid.Panel', {
		renderTo : 'information_date',// 渲染到一个div上
		frame : true,// 面板渲染
		forceFit : true,// 自动填充panel空白处
		autoHeight:true,
		

			
		

	





	

		

			

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

				
			

			

				

					翻滚吧小牛
				

				

					02-13
					
					4542
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Extjs4 之grid组件

				
			

			

				

					weixin_33895695的博客
				

				

					05-26
					
					211
					
				

			

		

		

			
				
grid表格是extjs的核心组件之一，它提供了展示大量数据的最佳途径。Grid组件的重要特性包括：智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进，这些特性共同缔造了功能强大的4.0grid组件。
智能渲染：在extjs4.0之前的版本中采用了‘最小公分母’的策略来支持各种丰富的特性，这种方式会对每一个表格产生大量的标签，而这些标签对于简单表格来说是不必要的，而在4.0中默认的表格只...

			
		

	





	

		

			

				
					
[ExtJS] grid 可编辑表格 禁用部分单元格编辑

				
			

			

				

					拒绝成猿的程序员
				

				

					09-12
					
					4857
					
				

			

		

		

			
				
在ExtJS Mordern版本中，grid的单元格编辑都是一整列的

但是，若是有时单元格无需编辑时，就没有相关配置项

看下效果：



这里需要手写逻辑，取消编辑

1.首先配置grid的单元格编辑插件


plugins: {
     gridcellediting: {
             selectOnEdit: true,
             triggerEvent...

			
		

	





	

		

			

				
					
ExtJS4.2学习(七)EditorGrid可编辑表格(转)

				
			

			

				

					weixin_34004750的博客
				

				

					11-20
					
					159
					
				

			

		

		

			
				
鸣谢地址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html
----------------------------------------------------------------------------------------------

以上实现的效果就是本节所要做...

			
		

	





	

		

			

				
					
ExtJS 将表单设置为不可编辑（查看）

				
			

			

				

					祥子的博客
				

				

					10-13
					
					6692
					
				

			

		

		

			
				
代码：afterrender : function(thiz) {
                        //隐藏按钮
                        var e1 = Ext.ComponentQuery.query("basebutton[btype=ok]");
                        var e2 = Ext.ComponentQuery.q

			
		

	





	

		

			

				
					
extjs表格单元格编辑保存事件的代码

					
最新发布

				
			

			

				

					03-10
				

			

		

		

			
				
以下是 extjs 表格单元格编辑保存事件的代码示例：  ``` Ext.create('Ext.grid.Panel', {  title: 'Example',  store: Ext.data.StoreManager.lookup('simpsonsStore'),  columns: [  { text: 'Name', dataIndex: '...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值