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



 上节讲到通过后台数据进行分页,分页工具条还可以放置在顶端,或者上下都有而不影响数据,因为它们都共用一个storevED思考者日记网-束洋洋个人博客

QQ截图20131114220236.jpgvED思考者日记网-束洋洋个人博客

//创建表格  
var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
        autoHeight:true,  
        store:store,  
        width:550,  
        columns:columns, //显示列  
        bbar:new Ext.PagingToolbar({  
            pageSize:25, //每页显示几条数据  
            store:store,   
            displayInfo:true, //是否显示数据信息  
            displayMsg:'显示第 {0} 条到 {1} 条记录,一共  {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据  
            emptyMsg: "没有记录" //没有数据时显示信息  
        }),  
        tbar:new Ext.PagingToolbar({  
            pageSize:25, //每页显示几条数据  
            store:store,   
            displayInfo:true, //是否显示数据信息  
            displayMsg:'显示第 {0} 条到 {1} 条记录,一共  {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据  
            emptyMsg: "没有记录" //没有数据时显示信息  
        })  
    });

 vED思考者日记网-束洋洋个人博客

 vED思考者日记网-束洋洋个人博客

除了后台传递数据分页,默认的排序外,extjs还可以自定义排序,通过传递数据来进行后台排序。vED思考者日记网-束洋洋个人博客

如果需要对所有数据排序,则需要把排序信息提交到后台,由后台将排序信息组装到SQL里,然后再由后台将处理好的数据返回给前台。这就是前台与后台交互的过程,既然要提交到服务端,便需要将Ext.data.Store的remoteSort属性设置为true,这个属性是指是否允许远程排序,默认值为false。下次排序时就会有变化,不会立即显示出排序结果,而是将后台提交了2个参数,分别是sort和dir。sort表示需要排序的字段,dir表示升序或降序。后台根据这些参数进行处理。vED思考者日记网-束洋洋个人博客

req.getParameter("sort"); //排序字段  
req.getParameter("dir"); //升序还是降序 

 vED思考者日记网-束洋洋个人博客

以上知识是对上节的补充,现在开始将这节所学:可编辑表格--EditorGridvED思考者日记网-束洋洋个人博客

大家使用过Mircrosoft Excel,它的功能强大,用户可随意添加或删除表格中的行和列,而且只保存一此即可。EditorGrid也提供这些功能,可以直接在表格里执行添加、删除、修改和查找等操作,然后一次性保存。此外,还可以动态修改某个单元格,这些单元格我们先暂时不能为空,保存时会进行检测,为空就无法保存,验证信息会给予提示。vED思考者日记网-束洋洋个人博客

QQ截图20131114221331.jpgvED思考者日记网-束洋洋个人博客

以上实现的效果就是本节所要做的效果,现在看代码:vED思考者日记网-束洋洋个人博客

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))  
                });  
            }  
        }]  
    });  
}); 

 vED思考者日记网-束洋洋个人博客

这里我们启用了CellEditing插件,其他的部分并没有什么变化。可是看到的结果是,现在可以用TextField的方式随意修改单元格。记得不能让单元格为空,否则无法修改。vED思考者日记网-束洋洋个人博客

默认情况下,需要双击单元格才能激活编辑器,从而进行修改。不过,也可以给表格配置上clicksToEdit:1,这样就可以通过单击单元格激活编辑器,从而进行修改,上面的代码中已经用到了。vED思考者日记网-束洋洋个人博客

TextField不允许输入空值,因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。vED思考者日记网-束洋洋个人博客

上面的示例中用到了数组对象的Slice(start,[end])方法,该方法返回一个新数组,包含了原函数从start到end所指定的元素,但是不包括end元素,比如a.slice(0,3)。如果start为负,则将它作为length+start处理(此处length为数组的长度,比如a.slice(-3,4),相当于a.slice(2,4))。如果end为负,就将它作为length+end处理(次数length为数组的长度,比如a.slice(0,-1)。如果省略end,那么slice方法将一直复制到原数组结尾,比如a.slice(1))。如果省略end,那么slice方法将一直复制到原数组结尾,比如a.slice(1)。如果end出现在start之前,不复制任何元素到新数组中,比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是复制store.getModifiedRecords(),保证store.getModifiedRecords()中的原始数据不受影响。vED思考者日记网-束洋洋个人博客

下面看下后台对输入的数据怎么进行保存的?vED思考者日记网-束洋洋个人博客

输入一行数据vED思考者日记网-束洋洋个人博客

QQ截图20131114221331.jpgvED思考者日记网-束洋洋个人博客

点击保存后vED思考者日记网-束洋洋个人博客

22840.jpgvED思考者日记网-束洋洋个人博客

后台代码vED思考者日记网-束洋洋个人博客

@SuppressWarnings("serial")  
public class EditGridServlet extends HttpServlet {  
    @Override  
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        doPost(req,resp);  
    }  
  
    @Override  
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        req.setCharacterEncoding("UTF-8");  
  
        String data = req.getParameter("data");  
        System.out.println(data);  
  
        resp.getWriter().print(data);  
    }  
}

 vED思考者日记网-束洋洋个人博客

打印结果:vED思考者日记网-束洋洋个人博客

20131114223049.jpgvED思考者日记网-束洋洋个人博客

 vED思考者日记网-束洋洋个人博客

 vED思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridvED思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridvED思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingvED思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格vED思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldvED思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件vED思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorvED思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 vED思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解vED思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目vED思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈