ExtJs--EditorGrid可編輯的表格控件_第1頁
ExtJs--EditorGrid可編輯的表格控件_第2頁
ExtJs--EditorGrid可編輯的表格控件_第3頁
ExtJs--EditorGrid可編輯的表格控件_第4頁
ExtJs--EditorGrid可編輯的表格控件_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、ExtJs-EditorGrid 可編輯的表格控件可編輯表格控件：<!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtd ><html xmlns=/1999/xhtml><head><meta http-equiv=Content-Type content=text/html;charset=utf-8 /><title> 無標題文檔&

2、lt;/title><link rel=stylesheet type=text/css href=./././resources/css/ext-all.css /><script type=text/javascript src=./././adapter/ext/ext-base.js></script><scri pt type=text/javascript src=./././ext-all.js></script><script type=text/javascript src=./Adapter.js>

3、;</script><script type=text/javascript>/ 可編輯表格控件 EditorGrid/ 制作個可編輯表格 / 添加一行 /刪除一行 /保存修改結果 /驗證editorGrid中的數(shù)據(jù) /限制輸入數(shù)據(jù)的類型Ext.onReady(function()var data= 1,1,new Date(),true,2,2,new Date(),false, 3,2,new Date(),false, 4,0,newDate(),true ; / 選擇列 var comboData= 0, 新版 ext 教程 ,1,ext 在線支持 , 2,ex

4、t 擴展 ; var comboStore=newExt.data.SimpleStore( data:comboData,fields:value,text ); var comboBox=newExt.form.ComboBox( store:comboStore, triggerAction:all,displayField:text, valueField:value, mode:local,/readOnly:true, emptyText: 請選擇 );/注意 :每一列都多加了一個 editor 屬性 / 第一列 :數(shù)字 /第二列 :選擇列 /第三列 :時間列 /第四列 :判斷列

5、var cm=newExt.grid.ColumnModel( header: 數(shù)字列 ,dataIndex:number, editor:new Ext.grid.GridEditor(newExt.form.NumberField( allowBlank:false,allowNegative:false, maxValue:10) , / 如果 comboBox無法正常顯示 ,考慮是不是沒有寫渲染函數(shù) .當沒寫這個函數(shù)時,顯示的數(shù)據(jù)時 value 值 ,而不是 text. /bijing EditorGrid 里的編輯器在實際編輯時起作用 ,表格與 editor 之間共享的是數(shù)據(jù),顯示層

6、都要依靠各自的實現(xiàn) .不過,這樣做 /更靈活 ,不需要兩者都使用一樣的顯示方式 header: 選擇列 ,dataIndex:comboBox, editor:newExt.grid.GridEditor(comboBox),renderer:function(value) return comboDatavalue1; , header: 日期列 , dataIndex:date, editor:new Ext.grid.GridEditor(newExt.form.DateField( format:Y-m-d, minValue:2007-12-14, disabledDays:0,6,

7、 allowBlank:false, disabledDaysText:能選擇工作日 . ), renderer:function(value) return value.format(Y-m-d); , header: 判斷列 , dataIndex:check, editor:new Ext.grid.GridEditor(new),Ext.form.Checkbox( allowBlank:false renderer:function(value)/ 什么叫渲染 ,就是顯示的時候 ,如何顯示 , 這里面現(xiàn)實的時候 ,就是顯示是和否 return value?是:否 ; ); var s

8、tore=newExt.data.Store( proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader(, name:number, name:comboBox, name:date, name:check ), pruneModifiedRecords:true/ 如果為 true, 每次進行 remove和 load 操作時 ,store 會自動清除 modified 標記 .可以避免出現(xiàn)下次提交時還會把上次那些 modified 信息都帶上的現(xiàn) 象 ); store.load(); / 這里定義一個 My

9、Record 類 varMyRecord=newExt.data.Record.create( name:number,type:string, name:comboBox,type:string, name:date,type:string,name:check,type:string ); btn_add=function() / 單擊 添加按鈕 ,添加一個空行 (首先新建一個 MyRecord, 記得給里 面的屬性賦值 ,否則 EditorGrid 最后顯示的內容會混亂 ) var p=new MyRecord( number:, comboBox:, date:, check: );

10、grid.stopEditing();/ 關閉表格的編輯狀態(tài)store.insert(0,p);/ 把我們剛才創(chuàng)建的 MyRecord 放到表格的 第一行 grid.startEditing(0,0);/ 激活第一行第一列的編輯狀 態(tài) btn_delete=function() Ext.Msg.confirm( 提示 , 確定 要刪除 ?,function(btn) if(btn=yes) var sm=grid.getSelectionModel();/ 獲取表格的選擇模型 var cell=sm.getSelectedCell();/ 從選擇模型中獲取選中的單元 格,這個單元格有兩個屬性

11、,一個是行號 ,一個是列號 var record=store.getAt(cell0);/ 通過行號得到 store 這一行對應);的 Record, 然后移除即可 store.remove(record); btn_save=function() / 簡單介紹 slice(start,end) 方法 ,該方法返回一個新數(shù)組 , 包含了源函數(shù)從 start 到 end 所指定的元 素 ,但不包括 end 元素 .如果 start 為負 , /則將它作為 length+start 處理 ,length 為數(shù)組長度 ,如果 end 為負 ,則將它作 end+length 處理 , 如果 end 在

12、 start 之前 , 不做任何復制 ./store.modified.slice(0) 作用就是復制 store.modified, 保證store.modified中的原始數(shù)據(jù)不受影響 .varm=store.modified.slice(0);/ 獲取 store 中修改過的數(shù)據(jù) ,放到jsonArra 數(shù)組中var jsonArray=; <!- 把這些數(shù)據(jù)組裝成簡單的數(shù)組 .兩種方發(fā) :第一種 .因為數(shù)組 m 里保存的是Record, 而不是簡單的對象 , 只需要去除 Record 的 data 屬性即可, /然后使用循環(huán)將 data 添加到數(shù)組中第二種 .使用each() 函

13、數(shù) .each() 的作用是遍歷 array, 并對每項分別調用fn函數(shù),如果 array 不是數(shù)組 , /則只執(zhí)行一次 .如果某項調用fn后結果返回 false, 那么遍歷將結束并退出 . ->Ext.each(m,function(item) jsonArray.push(item.data);)Ext.Ajax.request( url:./success.jsp,success:function(response,opt) var obj=Ext.decode(response.responseText); Ext.Msg.alert(成功 ,obj.msg); , failur

14、e:function() Ext.Msg.alert(失敗 , 提交失敗); ,params: data:encodeURIComponent(Ext.encode(jsonArray) ); / 這里不是 GridPanel, 而是 EditorGridPanelvar grid=new Ext.grid.EditorGridPanel( cm:cm, store:store,autoHeight:true, renderTo:grid, tbar: xtype:buttongroup,defaults: scale:small , layoutConfig: columns:5,items: xtype:button

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論