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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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> 無標(biāo)題文檔&

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/ 制作個(gè)可編輯表格 / 添加一行 /刪除一行 /保存修改結(jié)果 /驗(yàn)證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 擴(kuò)展 ; 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: 請(qǐng)選擇 );/注意 :每一列都多加了一個(gè) editor 屬性 / 第一列 :數(shù)字 /第二列 :選擇列 /第三列 :時(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ù) .當(dāng)沒寫這個(gè)函數(shù)時(shí),顯示的數(shù)據(jù)時(shí) value 值 ,而不是 text. /bijing EditorGrid 里的編輯器在實(shí)際編輯時(shí)起作用 ,表格與 editor 之間共享的是數(shù)據(jù),顯示層

6、都要依靠各自的實(shí)現(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)/ 什么叫渲染 ,就是顯示的時(shí)候 ,如何顯示 , 這里面現(xiàn)實(shí)的時(shí)候 ,就是顯示是和否 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, 每次進(jìn)行 remove和 load 操作時(shí) ,store 會(huì)自動(dòng)清除 modified 標(biāo)記 .可以避免出現(xiàn)下次提交時(shí)還會(huì)把上次那些 modified 信息都帶上的現(xiàn) 象 ); store.load(); / 這里定義一個(gè) 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() / 單擊 添加按鈕 ,添加一個(gè)空行 (首先新建一個(gè) MyRecord, 記得給里 面的屬性賦值 ,否則 EditorGrid 最后顯示的內(nèi)容會(huì)混亂 ) var p=new MyRecord( number:, comboBox:, date:, check: );

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

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

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

13、數(shù) .each() 的作用是遍歷 array, 并對(duì)每項(xiàng)分別調(diào)用fn函數(shù),如果 array 不是數(shù)組 , /則只執(zhí)行一次 .如果某項(xiàng)調(diào)用fn后結(jié)果返回 false, 那么遍歷將結(jié)束并退出 . ->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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論