2 nidafg nidafg 于 2016.01.21 21:56 提问

ExtJs可编辑表格自动保存

我用的extjs3.5,想在表格上直接修改字段自动保存。使用EditorGridPanel,设置了可编辑属性,然而点击后没有效果,只是选中了整行,复选框被选中。我看网上的样例都是在afterEdit这个事件中对记录进行更新,可是我看api,这个事件是在每个单元格被编辑后都触发的,也就是我改一个字段就会提交一次,那么,没有别的自动保存方案么?比如切换到下一行时,上一行去发起ajax请求保存

1个回答

caozhy
caozhy   Ds   Rxr 2016.01.21 22:13

需要一个celledit的插件,这是一个例子:

Ext.onReady(function(){  
    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id',width:50,  
            editor:{  
                allowBlank:true  
            }}, //sortable:true 可设置是否为该列进行排序  
        {header:'名称',dataIndex:'name',width:80,  
                editor:{  
                    allowBlank:true  
                }},  
        {header:'描述',dataIndex:'descn',width:112,  
                    editor:{  
                        allowBlank:true  
                    }}  
      ];  
    //定义数据  
    var data =[  
        ['1','小王','描述01'],  
        ['2','李四','描述02'],  
        ['3','张三','描述03'],  
        ['4','束洋洋','思考者日记网'],  
        ['5','高飞','描述05']  
    ];  
    //转换原始数据为EXT可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置  
           {name:'name'},  
           {name:'descn'}  
        ]  
    });  
    //加载数据  
    store.load();  

    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
        width:550,  
        autoHeight:true,  
        store:store,  
        columns:columns, //显示列  
        stripeRows:true, //斑马线效果  
        selType: 'cellmodel',  
        plugins:[  
                 Ext.create('Ext.grid.plugin.CellEditing',{  
                     clicksToEdit:1 //设置单击单元格编辑  
                 })  
        ],  
        tbar:['-',{  
            text:'添加一行',  
            handler:function(){  
                var p ={  
                        id:'',  
                        name:'',  
                        descn:''  
                        };  
                    store.insert(0,p);  
                }  
            },'-',{  
                text:'删除一行',  
                handler:function(){  
                    Ext.Msg.confirm('系统提示','确定要删除?',function(btn){  
                        if(btn=='yes'){  
                            var sm = grid.getSelectionModel();  
                            var record = sm.getSelection()[0];  
                            store.remove(record);  
                        }  
                    });  
                }  
        },'-',{  
            text:'保存',  
            handler:function(){  
                var m = store.getModifiedRecords().slice(0);  
                var jsonArray = [];  
                Ext.each(m,function(item){  
                    jsonArray.push(item.data);  
                });  
                Ext.Ajax.request({  
                    method:'POST',  
                    url:'/ExtJs4.2Pro/EditGridServlet',  
                    success:function(response){  
                        Ext.Msg.alert('系统提示',response.responseText,function(){  
                            store.load();  
                        });  
                    },  
                    failure:function(){  
                        Ext.Msg.alert("错误","与后台联系的时候出了问题。");  
                    },  
                    params:'data='+encodeURIComponent(Ext.encode(jsonArray))  
                });  
            }  
        }]  
    });  
});  
nidafg
nidafg 就是说不用EditorGridPanel这个类也可以实现这个功能?
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
extjs4可编辑表格优化
用过extjs4的同学应该都是奔着其好用的可编辑啊表格去的吧,虽然看着好用,但是用起来却伤痕累累啊。今天针对其最大的一个问题,大量数据(800以上)的表格进行编辑时,特别是在ie下,编辑单元格时,要4,,5秒才能编辑完成,这客户能接受?欲哭无泪吧。我下断点调试,从源码看,冒泡时间太多,最后发现是一个store的set方法占了很多时间。最后就是从extjs的可编辑表格编辑完成的先后事件来进行优化的。
Ext EditorGrid可编辑表格
Ext.onReady(function(){       //定义列       var columns = [           {header:'编号',dataIndex:'id',width:50,               editor:{                   allowBlank:true               }}, //sortable:tr
ExtJS学习(四)EditorGrid可编辑表格
操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。 双击点击的时候可以单元格的操作。 代码:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8
Extjs学习总结之EditGridPanel可编辑表格
Ext.onReady(function(){ /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容,出现三角号表示已经被修改过 * 5、程序内部变化:将记录设置为脏读数据状态,
Extjs4 可编辑grid实例
MemberEditGrid = Ext.extend(Ext.grid.Panel, { _proId:0, constructor : function(_config) { if (_config == null) _config = {}; Ext.apply(this, _config); this.canFlag = false; this.monCorr =
EXT简单的可编辑表格
Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([{ header: '编号', dataIndex: 'id', editor: new Ext.grid.GridEditor( new Ext.form.TextField({
ExtJs4开发动态编辑的表格
开发动态编辑的表格(1) Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能,该包下提供了如下3个与表格编辑有关的类。 Ext.grid.plugin.Editing:为表格增加编辑功能的基类。 Ext.grid.plugin.RowEditing:为表格行增加编辑功能的插件类。 Ext.grid.plugin.CellEditing:为单元格增加编辑功能的插件类
EXTJS中,取得当前grid下标,给可编辑表格赋值
var value = this.getValue(); var _smi = editgrid.getSelectionModel();//选中的一条 if(_smi.getCount() != 0){ var linenum=editgrid.getSelectionModel().lastActive;//取得下标 var row = editstore.getCount();
Ext.js5(编辑表格的内容celledit)(添加和删除的行为)(20)
view/** * This example shows how to enable users to edit the contents of a grid. Note that cell * editing is not recommeded on keyboardless touch devices. * 这个例子展示了怎么去编辑表格的内容。这种格子(细胞)编辑不推荐在触屏的时候使用。
EXTJS4 给grid加 复选框列
记录一下被extjs折磨的过程。。。。效果如图:就这玩意,慢活了大半天,网上搜的答非所问,可能是我关键词选的不好。最后还是在官方的例子中找到的。官方例子地址:http://docs.sencha.com/extjs/4.0.7/extjs-build/examples/grid/grid-plugins.html这其实很简单,代码如下:(红色的为复选框的代码,其他的可自行忽略),var sm = ...