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

上节讲到经过后台数据进行分页，分页工具条还能够放置在顶端，或者上下都有而不影响数据，由于它们都共用一个store

//建立表格 
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: "没有记录" //没有数据时显示信息 
        }) 
    });

除了后台传递数据分页，默认的排序外，extjs还能够自定义排序，经过传递数据来进行后台排序。
若是须要对全部数据排序，则须要把排序信息提交到后台，由后台将排序信息组装到SQL里，而后再由后台将处理好的数据返回给前台。这就是前台与后台交互的过程，既然要提交到服务端，便须要将Ext.data.Store的remoteSort属性设置为true，这个属性是指是否容许远程排序，默认值为false。下次排序时就会有变化，不会当即显示出排序结果，而是将后台提交了2个参数，分别是sort和dir。sort表示须要排序的字段，dir表示升序或降序。后台根据这些参数进行处理。

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

以上知识是对上节的补充，如今开始将这节所学：可编辑表格--EditorGrid
你们使用过Mircrosoft Excel，它的功能强大，用户可随意添加或删除表格中的行和列，并且只保存一此便可。EditorGrid也提供这些功能，能够直接在表格里执行添加、删除、修改和查找等操做，而后一次性保存。此外，还能够动态修改某个单元格，这些单元格咱们先暂时不能为空，保存时会进行检测，为空就没法保存，验证信息会给予提示。



以上实现的效果就是本节所要作的效果，如今看代码：

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

这里咱们启用了CellEditing插件，其余的部分并无什么变化。但是看到的结果是，如今能够用TextField的方式随意修改单元格。记得不能让单元格为空，不然没法修改。
默认状况下，须要双击单元格才能激活编辑器，从而进行修改。不过，也能够给表格配置上clicksToEdit:1，这样就能够经过单击单元格激活编辑器，从而进行修改，上面的代码中已经用到了。
TextField不容许输入空值，由于在建立columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。
上面的示例中用到了数组对象的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()中的原始数据不受影响。
下面看下后台对输入的数据怎么进行保存的？
输入一行数据



点击保存后


后台代码

@SuppressWarnings("serial") 
public class EditGridServlet extends HttpServlet { 
    <a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a> 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
        doPost(req,resp); 
    } 
      
    <a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a> 
    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); 
    } 
}

打印结果：
连载中，请你们持续关注，本文出自个人我的网站思考者日记网