AjaxGridView

【功能說明】

此為 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 中所有欄位的明細，如下說明：

Allow Null ( 允許為空 )( bool) ： 設定是否允許為空，如果該欄位設為 False ，在 AjaxGridView 上直接編輯的時候，會控制該欄位不能為空，並會出現“該輸入項為必輸項目”的提示。

AllowSort ( 允許排序 )( bool) ： 設定該欄位是否允許排序， true 為允許，否則不可排序。

C olumnName ( 欄位名稱 )(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 ”。在代碼部分我們可寫為：

  functionconverter (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)

對應到 Ajax GridView 的資料源代號，就是指 WebDataSource ，注意使用 AjaxGridView 時， WebDataSource 的 CacheDataSet 屬性一定必須設定為 True ，否則無法取得資料。

EditPane lID ( 編輯 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 的寬度。

PagingSet ( 分頁設定 )

    AllowPage ( 允許分頁 )( bool) ： 設定是否允許分頁。

    DisplayPageInfo ( 允許分頁信息顯示 )( bool) ： 設定是否允許顯示分頁的頁次操作訊息。

StoreSet ( 存儲設定 )

ServiceUrl ( 服務 URL)(string) ： 用於設定 Web Server 端所配合的資料服務程式名稱，預設 EEP 所提供的存取方法文件 “~/ ExtJs/infolight/ExtGetData.ashx” ，我們目前都是透過這個 ashx 來讓 AjaxGridView 來取得資料內容的。

ToolItems ( 工具欄設定 )

CssClass ( cssClass 名稱 )(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 。