上節講到經過後臺數據進行分頁,分頁工具條還能夠放置在頂端,或者上下都有而不影響數據,由於它們都共用一個storephp
//建立表格 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表示升序或降序。後臺根據這些參數進行處理。html
req.getParameter("sort"); //排序字段 req.getParameter("dir"); //升序仍是降序
以上知識是對上節的補充,如今開始將這節所學:可編輯表格--EditorGrid
你們使用過Mircrosoft Excel,它的功能強大,用戶可隨意添加或刪除表格中的行和列,並且只保存一此便可。EditorGrid也提供這些功能,能夠直接在表格裏執行添加、刪除、修改和查找等操做,而後一次性保存。此外,還能夠動態修改某個單元格,這些單元格咱們先暫時不能爲空,保存時會進行檢測,爲空就沒法保存,驗證信息會給予提示。
以上實現的效果就是本節所要作的效果,如今看代碼:java
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()中的原始數據不受影響。
下面看下後臺對輸入的數據怎麼進行保存的?
輸入一行數據
點擊保存後
後臺代碼json
@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); } }
打印結果:
連載中,請你們持續關注,本文出自個人我的網站思考者日記網數組