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

打印結果：
連載中，請大家持續關注，本文出自我的個人網站思考者日記網