【功能說明】
此為Web使用的Ajax元件,使用Ext JS公司的Ext Grid包裝而成的一個強大Grid元件,透過該元件可以實現動態選擇Column,動態調整Column位置與寬度,並可以類似Win Form中的GridView一樣,可直接在GridView瀏覽狀態下對資料進行修改。
【屬性】
AllowExpandRow(允許展開Row)(bool)
該屬性用於設定在GridView的每個Row是否需要有展開顯示類似FormView格式功能,當設定為true時,系統會在每個GridView中的Row上會顯示“+”,可展開顯示Row中的重要欄位的具體資料,其顯示內容在Columns中進行設定,當對其ExpandColumn設定為False時,則在展開時將不顯示。
Columns (欄位明細)(collection)
設定AjaxGridView中所有欄位的明細,如下說明:
AfterEdit(編輯後調用Js方法)(string):用戶設定在對該欄位編輯後,調用的JS方面名稱。
AllowNull(允許為空)(bool):設定是否允許為空,如果該欄位設為False,在AjaxGridView上直接編輯的時候,會控制該欄位不能為空,並會出現“該輸入項為必輸項目”的提示。
AllowSort(允許排序)(bool):設定該欄位是否允許排序,true為允許,否則不可排序。
BeforeEdit(編輯前調用Js方法)(string):用戶設定在對該欄位編輯前,調用的JS方面名稱。
ColumnName(欄位名稱)(string):設定該欄位的欄位名稱。
DataField(綁定欄位)(string):用於設定GridView的Column所綁定的欄位。
DefaultValue(預設值)(string):用於設定該欄位的預設值,可以為一個常數,或一個js函數傳回值(可使用『方法名+( )』來代表。
Editor(編輯欄位的類型)(enum):該欄位的編輯型態,目前提供TextBox、ComboBox、DateTimePicker、CheckBox等4種。
EditControlId(編輯控制項的Id) (string):此屬性是配合Editor屬性為ComboBox時所使用,用於設定實際連接的ExtComboBox的元件ID。
ExpandColumn(展開顯示欄位)(bool):當AllowExpandRow為true時,該屬性設定即可用來控制是否將將顯示在FormView的展開區域。
FieldType(欄位類型)(string):用於設定該欄位的類型,共有5種選擇:string、int、float、 boolean以及date等,每一種系統會自動配合對應格式。
HeaderText(表頭文字)(string):每個欄位上方的標題抬頭內容。
IsKeyField(是否為KeyField)(bool):用於設定該欄位是否為Key欄位。
NewLine(是否換行)(bool):設定這個Column在展開FormView顯示時是否要往下進行換行,此屬性只有在與AllowExpandRow以及ExpandColumn都設定為True的情況下有效。
Formatter(欄位Format)(string):用於設定對該Column的格式所使用,這些格式系統會自動以JavaScript方式包裝起來,可針對不同的資料型態來設定不同的格式。如遇到DateTime型態欄位,可以設定為:Y/m/d。同時,我們也可通過自行編寫js方法輸出格式,但是請注意Formatter中填寫方法名稱為固定名稱“converter”。在代碼部分我們可寫為:
function converter (value, column, record, rowIndex, columnIndex, store)
{return 'display';}
value表示當前這個Column中的值,column表示當前的欄位名稱,record為當前此筆數據,rowIndex表示當前這筆資料在GridView中的Row的索引位置,columnIndex表示當前這筆資料在GridView中的Column的索引位置,store表示當前此筆數據存儲容器相當於C#中的DataSet。請注意converter方法中的參數可缺省。這些參數中的具體值AjaxGridView在呼叫此個方法時會提供。
Resizable(可否調整欄寬)(bool):設定該欄位是否可以在Browser上調整Column的寬度。
TextAlign(對齊格式)(enum):指Column的Caption對齊格式,分成3種選擇:left、right和center等。
ValidType(驗證類型)(enum):針對該欄位進行特殊的驗證功能,目前共有Email(檢查內容是否為Email的格式),Url(檢查內容是否為URL的格式),Int(檢查內容是否為一個整數),Float(檢查內容是否為一個數值),IPAddress(檢查內容是否為IP位址)等的驗證方式。
Visible(是否顯示)(bool):用於設定該欄位是否顯示在AjaxGrid上。
Width(寬度)(int):用於設定Column上的寬度,以Pixel為單位。
DataSourceID (資料源) (string)
對應到AjaxGridView的資料源代號,就是指WebDataSource,注意使用AjaxGridView時,WebDataSource的CacheDataSet屬性一定必須設定為True,否則無法取得資料。
EditPanelID(編輯Panel ID)(string)
與ExtModalPanel配合使用,此屬性一般設定為ExtModalPanel的ID。用於確定在AjaxGridView以Show Modal Panel模式修改及新增時,需要打開哪個ExtModalPanel。
ExpandRowTemplateHtml(展開Row格式設定)(string)
用於自行對Row展開的格式進行設定Html格式,其中,格式:{欄位元名稱}即可表示需要輸出該欄位元的值,如{OrderID},這樣就可以自由以HTML方式配合這些欄位元格式來自定展開的呈現內容,可以設計得較為活潑,不像內建FormView那麼死板。
GenRowNumber(是否自動產生Row的編號)(bool)
用於設定是否在每行Row前,虛擬一個Row的編號來顯示。
GetServerText(是否自動取得server的系統資訊)(bool)
用於設定是否取得Server的sysmsg.xml中的多國語言提示訊息,當為True時,系統會根據client的系統語言類別分別找到對應的系統訊息。
GridSet(表格設定)
AlternateRow(是否顯示交替行)(bool):設定是否顯示交替的資料行,true為顯示,否則不顯示,這樣會讓Row的資料有交替不同的底色。
AutoFillingColumn(自動填充欄位)(string):用於設定某一個欄位,當總寬度小於Grid的寬度時,會自動調整這個欄位的寬度來配合整個AjaxGridView補滿到最大。
ClicksToEdit(編輯狀態點擊次數)(int):用於設定在Grid上進入Edit狀態需要滑鼠點擊的次數,一般不是1(單按) 就是2 (雙按)。
ExpandColumnWidth(展開欄位擡頭寬度)(int):設定這個ExpandRow在展開時,每個Column的Caption的顯示的長度,默認為0,表示系統自動調整寬度。該屬性常用在Client為IE6,使用0自動時格式會錯亂,必須自行來決定。此屬性只有在與AllowExpandRow以及ExpandColumn都設定為True的情況下有效。
GridCollasible(是否折疊Grid)(bool):用於設定當Page打開時Grid以折疊的形式顯示。True時為折疊,否則則展開。
GridPanel(Grid 呈現的目標Panel)(string):用於設定AjaxGridView產生時Render(呈現)的目標Panel,當不設定值時,表示會Render在Page的Body上。
Height(高度)(int):用於設定AjaxGridView的高度。
LoadMask(顯示等待圖標)(bool):設定在AjaxGridView更新資料時,是否顯示等待圖示。
Title(標題)(string):用於設定AjaxGridView上面的標題。
Width(寬度)(int):用於設定AjaxGridView的寬度。
QueryFields(查詢欄位)(collection)
Caption(標題)( string):查詢欄位的標題。
Condition(條件)(enum):用戶設定查詢的條件方式,分別有And、Or和None。
DataField(綁定欄位)(string):用於設定查詢的Column所綁定的欄位。
DefaultValue(預設值)(string):用於設定查詢欄位的預設值,可以為一個常數,或一個js函數傳回值(可使用『方法名+( )』來代表。
Operator(操作符)(enum):用來設定查詢使用的操作符號,分別有=、!=、>、<、>=、<=、%以及%%
PagingSet(分頁設定)
AllowPage(允許分頁)(bool):設定是否允許分頁。
DisplayPageInfo(允許分頁信息顯示)(bool):設定是否允許顯示分頁的頁次操作訊息。
ToolItems(工具欄設定)
CssClass(css Class名稱)(string):用於設定AjaxGridView上面的工具按鈕所使用的CSS Class名稱,預設為“x-btn-text-icon details”。
Handler(自定義處理方法)(string):用於讓用戶自行定義的該工具按鈕處理方法,注意此方法為Javascript方法。
IconUrl(工具欄按鈕圖標)(string):用於設定該工具按鈕所要顯示的圖標。
ButtonName(按鈕名稱)(string):用於設定該工具按鈕的名稱,對於AjaxGridView的預設有新增、修改、刪除、存檔、取消以及更新等,我們規定需要使用btn加處理類型為名稱,請勿自行更改。
SysHandlerType(處理類型)(enum):該工具按鈕處理類型,共提供6種模式:Add、Edit、Delete、Abort、Save以及Refresh。
Text(按紐文字)(string):該工具按鈕的文字內容。
ToolItemType(按紐類型)(enum):該工具按鈕的型態,可設為Button, Label, Separation(分隔線), Fill(填滿)等等。
【方法】
SetEditMode:用來與WebFormView或WebDetailView配合使用的時候,讓AjaxGridView能夠通知WebFormView或者WebDetailView,使它們能同步進入新增或修改狀態。此方法無參數,返回類型為Void。
Submit:用來與WebFormView或WebDetailView配合使用的時候,用來讓WebFormView或WebDetailView的資料能存檔到後端的WebDataSource當中。此方法參數為WebFormView的ID或者是WebDetailView的ID,返回類型為Void。
Cancel:用來與WebFormView或WebDetailView配合使用的時候,用來讓WebFormView或WebDetailView的資料進行放棄存檔的動作。此方法參數為WebFormView的ID或者是WebDetailView的ID,返回類型為Void。
【Js方法】
gridSavePersonal(string UserId, string remark):用於保存根據某些過濾條件的個性化設定。UserId這個參數是用來傳遞過濾條件的,而非限定只可傳遞UserId,可以可是GroupId等。
gridLoadPersonal(string UserId):用於載入根據某些過濾條件的個性化設定。UserId這個參數是用來傳遞過濾條件的,而非限定只可傳遞UserId,這個條件是根據保存時的個性化設定過濾條件來決定。
【ExtJs方法】
在AjaxGridView中我們提供AfterEdit以及beforeEdit兩種屬性。這兩個時機我們可通過ExtJs的一些方法來取得資料,也可寫資料。如下例:
function unitPriceAfterEdit(value)
{
var unitPrice = value.value; //取得當前修改的欄位值
var quantity = value.record.get("Quantity");//取得GridView的欄位值
if (isNaN(parseInt(quantity)))
value.record.set("amount", 0);//給值到GridView的欄位
else
value.record.set("amount", unitPrice * quantity);
}
Converted from CHM to HTML with chm2web Pro 2.85 (unicode) |