【功能說明】

此為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)用於設定GridViewColumn所綁定的欄位。

DefaultValue(預設值)(string)用於設定該欄位的預設值,可以為一個常數,或一個js函數傳回值(可使用『方法名+( )』來代表。

Editor(編輯欄位的類型)(enum):該欄位的編輯型態,目前提供TextBoxComboBoxDateTimePickerCheckBox4種。

EditControlId(編輯控制項的Id) (string):此屬性是配合Editor屬性為ComboBox時所使用,用於設定實際連接的ExtComboBox的元件ID

ExpandColumn(展開顯示欄位)(bool)AllowExpandRowtrue時,該屬性設定即可用來控制是否將將顯示在FormView的展開區域。

FieldType(欄位類型)(string)用於設定該欄位的類型,共有5種選擇:stringintfloat    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)ColumnCaption對齊格式,分成3種選擇:leftrightcenter等。

ValidType(驗證類型)(enum)針對該欄位進行特殊的驗證功能,目前共有Email(檢查內容是否為Email的格式)Url(檢查內容是否為URL的格式)Int(檢查內容是否為一個整數)Float(檢查內容是否為一個數值)IPAddress(檢查內容是否為IP位址)等的驗證方式。

Visible(是否顯示)(bool)用於設定該欄位是否顯示在AjaxGrid上。

Width(寬度)(int)用於設定Column上的寬度,以Pixel為單位。

DataSourceID (資料源) (string)

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

EditPanelID(編輯Panel ID)(string)

ExtModalPanel配合使用,此屬性一般設定為ExtModalPanelID。用於確定在AjaxGridViewShow Modal Panel模式修改及新增時,需要打開哪個ExtModalPanel

ExpandRowTemplateHtml(展開Row格式設定)(string)

用於自行對Row展開的格式進行設定Html格式,其中,格式:{欄位元名稱}即可表示需要輸出該欄位元的值,如{OrderID},這樣就可以自由以HTML方式配合這些欄位元格式來自定展開的呈現內容,可以設計得較為活潑,不像內建FormView那麼死板。

GenRowNumber(是否自動產生Row的編號)(bool)

用於設定是否在每行Row前,虛擬一個Row的編號來顯示。

GetServerText(是否自動取得server的系統資訊)(bool)

用於設定是否取得Serversysmsg.xml中的多國語言提示訊息,當為True時,系統會根據client的系統語言類別分別找到對應的系統訊息。

GridSet(表格設定)

         AlternateRow(是否顯示交替行)(bool)設定是否顯示交替的資料行,true為顯示,否則不顯示,這樣會讓Row的資料有交替不同的底色。

AutoFillingColumn(自動填充欄位)(string)用於設定某一個欄位,當總寬度小於Grid的寬度時,會自動調整這個欄位的寬度來配合整個AjaxGridView補滿到最大。

ClicksToEdit(編輯狀態點擊次數)(int)用於設定在Grid上進入Edit狀態需要滑鼠點擊的次數,一般不是1(單按) 就是2 (雙按)

ExpandColumnWidth(展開欄位擡頭寬度)(int)設定這個ExpandRow在展開時,每個ColumnCaption的顯示的長度,默認為0,表示系統自動調整寬度。該屬性常用在ClientIE6,使用0自動時格式會錯亂,必須自行來決定。此屬性只有在與AllowExpandRow以及ExpandColumn都設定為True的情況下有效。

GridCollasible(是否折疊Grid)(bool)用於設定當Page打開時Grid以折疊的形式顯示。True時為折疊,否則則展開。

GridPanel(Grid 呈現的目標Panel)(string)用於設定AjaxGridView產生時Render(呈現)的目標Panel,當不設定值時,表示會RenderPageBody上。

Height(高度)(int)用於設定AjaxGridView的高度。

LoadMask(顯示等待圖標)(bool)設定在AjaxGridView更新資料時,是否顯示等待圖示。

Title(標題)(string)用於設定AjaxGridView上面的標題。

Width(寬度)(int)用於設定AjaxGridView的寬度。

QueryFields(查詢欄位)(collection)

Caption(標題)( string)查詢欄位的標題。

Condition(條件)(enum)用戶設定查詢的條件方式,分別有AndOrNone

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種模式:AddEditDeleteAbortSave以及Refresh

         Text(按紐文字)(string)該工具按鈕的文字內容。

         ToolItemType(按紐類型)(enum)該工具按鈕的型態,可設為Button, Label, Separation(分隔線), Fill(填滿)等等。

 

【方法】

SetEditMode:用來與WebFormViewWebDetailView配合使用的時候,讓AjaxGridView能夠通知WebFormView或者WebDetailView,使它們能同步進入新增或修改狀態。此方法無參數,返回類型為Void

Submit:用來與WebFormViewWebDetailView配合使用的時候,用來讓WebFormViewWebDetailView的資料能存檔到後端的WebDataSource當中。此方法參數為WebFormViewID或者是WebDetailViewID,返回類型為Void

Cancel:用來與WebFormViewWebDetailView配合使用的時候,用來讓WebFormViewWebDetailView的資料進行放棄存檔的動作。此方法參數為WebFormViewID或者是WebDetailViewID,返回類型為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)