附錄附錄\Appendix Web端元件\WebGridView

WebGridView

 

 

【功能說明】

用途:使用於Web網頁中,繼承自GridView元件,此元件的主要功能是以表格的方式顯示多筆資料內容。

 

【元件屬性】

(ID)(元件名稱)(string)

用於識別該組件。

 

DataSourceID (資料源)(string)

對應到WebGridView的資料源代號,就是指WebDataSource

 

AddIndentityField(自增值欄位)(bool)

用來自動增加一個IndentityField自增值欄位,此欄位是由系統產生,並不必使用實體欄位,這裡會自動依WebGridView的次序自動顯示一個序號,用來標示給User查看。

 

Caption(抬頭)(string)

元件上面的抬頭文字內容。

 

ExpressionFieldCount(運算式欄位數)(int)

用於指示該WebGridViewExpressionField的數量,設置此屬性後設計者必須進入Fields屬性來對ExpressionField進行設定(包括Expression屬性等),才能使用。

 

Columns (欄位明細)(collection)

設定WebGridView中所有欄位的明細,如下說明:

   HeaderText(表頭文字)(string):每個欄位上方的欄位表頭內容。

 

    HeaderImageURL(表頭圖示)(string):每個欄位上方的表頭圖示。

 

    ApplyFormatInEdit(編輯時使用格式)(bool)此欄位編輯時是否使用DataFormatString格式。

 

InsertVisible(新增顯示)(bool)新增時是否要顯示此欄位。

Visible(顯示)(bool):在WebGridView中是否顯示該欄位。

 

ReadOnly(唯讀)(bool):是否唯讀,不能新增/更改/刪除。

 

ShowHeader(顯示表頭)(bool):該欄位是否顯示上面的抬頭。

 

DataField (欄位名稱)(strring):對應的欄位名稱。

 

DataFormatString (欄位格式)(strring):對應的欄位格式內容,請參考VS手冊說明。

 

ItemStyle(資料頁面型態):設定此欄位在顯示時其頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

HeaderStyle(表頭頁面型態):設定此欄位抬頭的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

FooterStyle(表尾頁面型態):設定此欄位表尾頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

AddNewRowControls(新增元件明細)(Collection)

如果你允許WebGridView可以自由新增資料時,系統會自動在WebGridViewFooter中增加一個空的RowUser新增,一般都會以標準的TextBox來讓User輸入,如果你想在更改或新增時能以特殊的元件來讓User輸入者,可以先將此特殊欄位轉換成TemplateField(Columns屬性中轉),在TemplateField設定時,只能設定ItemTemplate(顯示用)EditTemplate(更改用),因為WebGridView並沒有InsertTemplate,因此我們只能定義在FooterTemplate中,除此之外,就是還要在本屬性中將此AddNewRowControlsFieldName要對應上FooterTemplate中的ControlID,這樣即可以讓WebGridView在新增時使用特殊的元件。在此Collenction中,其設定說明如下:

FieldName(欄位名稱)(string):只要新增的欄位名稱,要與相對的WebGridView欄位對應上。

 

ControlID(元件名稱)(string):代表所要對應的元件名稱,就是貼在FooterTemplate中用來新增的元件名稱。

 

ControlType(元件型態)(enum):可以設定為TextBoxCheckBoxRefValDateTimePickerDropDownList等。

 

CreateInnerNavigator(內建Navigator)(bool)

用於指示是否在該WebGridView中建立內建的WebNavigator,一般此Navigator會自動放在DetailsViewFooter中,內建的Navigator會預設新增/更改/刪除/查詢的按鈕。

 

GetServerText(Server端訊息)(bool)

控制內建WebNavigator所顯示文字,是否去抓取Server端的多國語言訊息,即存在SYSMSG.XML中的WebNavigator訊息。

 

InnerNavigatorShowStyle(內建Navigator型態) (enum)

可設定為 (HyperLink,Image,Button),只內建WebNavigator所顯示按鈕的外觀形式,HyperLink代表連結LabelImage代表圖示,Button代表按鈕。

 

InnerNavigatorLinkLabel (對應狀態標籤) (string)

可以將內建Navigator的狀態訊息對應到一個Label上來顯示,狀態一般會有:瀏覽/更改中/新增中/存檔成功/存檔放棄等訊息。

 

NavControls (Navigator明細)(collection)

可以設定內建Navigator的各按鈕的明細,其屬性說明如下:

 

   ControlVisible(是否顯示)(bool):該按鈕是否顯示。

 

  ImageURL(圖示URL)(bool):該按鈕的對應URL圖檔案。

 

   MouseOverImageURL(作用圖示URL)(bool):該按鈕Mouser移過所對應的URL圖檔案。

  Size(寬度大小)(int32):該按鈕的寬度大小。

 

   ControlName(元件名稱)(bool):該按鈕的元件名稱。

 

   ControlText(按鈕文字)(string):該按鈕的文字內容。

 

   ControlType(按鈕類型)(enum):該按鈕的型態,可設為(HyperLink,Image,Button)

 

WebGridView中預設有新增/存檔/取消/查詢等按鈕,更改/刪除則一般置於CommandFields中。

 

HorizontalAlign(左右對齊方式)(enum)

用來設定左右的對齊方式,可以利用此屬性設定此元件的版面靠左/靠右/靠中等。

 

EditUrl(編輯連結)(string)

可以設定另一連結網頁(.ASPX)來進行新增/編輯/查看資料,即指定到另一的頁的url,該頁須另外自行設計,並且該頁中須配合一個WebTranslate元件,用來控制返回原WebGridView的頁面,並處理返回後資料的更新。

 

OpenEditHeight(編輯連結高度)(int)

用來設置打開EditUrl頁面時的高度。

 

OpenEditWidth(編輯連結寬度)(int)

用來設置打開EditUrl頁面時的寬度。

 

OpenEditUrlInServerMode ( Server 模式打開 編輯連結 )( bool)

設置打開 EditUrl 頁面時是否已 Server 模式打開, ServerMode ClientMode 區別在於, ServerMode 時會造成打開 EditUrl 頁面時父畫面出現刷新。

 

TotalActive(是否加總)(bool)

指示是否在WebGridViewFooter中顯示相應的Total值,Total的欄位將在TotalColumns中定義之。

 

TotalColumns(加總明細)(collectioon)

用來設定TotalColumns的明細,所設定的ColumnWebGridViewFooter中會顯示相應的Total(前提是TotalActive屬性為true),此Collection屬性說明如下:

 

FieldName(欄位名稱)(string)代表要加總的欄位名稱。

 

ShowTotal(是否顯示加總)(bool):代表是否要顯示此欄位的Total值。

 

TotalMode (加總模式)(enum):代表此列的Total值的加總模式,可設定為 none:不加總,sum:累加加總,count:記次加總;max:取最大值,min:取最小值,average:取平均值等。

 

HeaderStyleWrap(表頭文字換行)(bool)

用來統一控制各個ColumnHeaderStyleWrap的值。

 

EditRowStyle(編輯頁面型態)

用來設定更改編輯時其頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

RowStyle(資料頁面型態)

用來設定資料顯示時其頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

HeaderStyle(表頭頁面型態)

用來設定表頭頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

FooterStyle(表尾頁面型態)

用來設定表尾頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

EmptyDataRowStyle(空白資料型態)

用來設定空白資料時其頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

PagerStyle(分頁頁面型態)

用來設定表尾分頁的頁面上的前景背景顏色,字型,自動換列,邊框顏色型態大小等等。

 

EmptyDataText(空白資料文字)(string)

用來設定空白資料時所要顯示的文字內容。

 

TotalCaption(加總抬頭)(string)

能在TotalActive=True時能顯示加總抬頭在Footer上。

 

AutoPostBackMultiCheckBoxes(多個控制項)(bool)

此專門用來配合一次可以直接在ItemTemplate中輸入多筆CheckBox元件,為True代表啟動,使用時需配合WebGridView中要貼入WebCheckBox元件才能正常運作。

 

AutoPostBackWebGridDropDown(多個控制項)(bool)

此專門用來配合一次可以直接在ItemTemplate中輸入多筆DropDownList元件,為True代表啟動,使用時需配合WebGridView中要貼入WebDropDownList元件才能正常運作。

 

AutoPostBackWebGridTextBoxs(多個控制項)(bool)

此專門用來配合一次可以直接在ItemTemplate中輸入多筆TextBox元件,為True代表啟動,使用時需配合WebGridView中要貼入WebGridTextBox元件才能正常運作。

 

MultiCheckColumn(控制項欄位名稱)(string)

此配合AutoPostBackMultiCheckBoxes=True時使用,須配合定義本屬性要搭配的欄位名稱,本欄位只能是Bit型態的欄位。

Params ( 參數 ) (Collection)

屬性可設定哪些 參數需要在 EditURL 中的 WebTranslate 保存 後保留下 來,  只要在 Params 中增加 一項 參數 "Filter"( 過濾條件 ) 就可以 記下 查詢條件

EditURLPanel ( 編輯鏈接的 ModalPanel )(string)

用於 設定關聯 對應的 AjaxModalPanel ,讓 WebGridView Insert/Update/View 時可以 將此 AjaxModalPanel 打開,並以 ShowModal 方式呈現。

 

【功能函數】

  ToExcel () :依照 WebGridView 內的 Control 來輸出 , 只要 Control 內有 text 的屬性的資料都可以輸出到 Excel , 並按 WebGridView 的欄位次序輸出。

 

事件

Adding(EventArgs e)

用於 控制新增 Button 按下 後,要配合 執行的功能, Adding 則是指新增前。

Added( EventArgs e)

用於 控制 OK Button 按下 後,要配合 執行的功能, Added 則是指新增 後。

 

【其它說明】

1. 如果要刪除WebGridView中的ExpressionField,必須先在Fields屬性中刪除此ExpressionField,再將ExpressionFieldCount屬性的值減去相應已刪除ExpressionField的數量即可。

 

2. WebGridView的設計模式中,可以用右鍵的AdjustColumn功能,自動以COLDEFField_Length來自動決定其相對欄位的寬度(全部調整HeaderStyle.Width,並以百分比來調整),如果當 field_length沒有設定時,則Varchar都當作20,數值與其他都當作10來計算,再用此Width除以總寬度(所有欄位的總計),得到百分比。

 

3. WebGridView在設計模式中,可以用右鍵'Copy AddNewControls'功能,自動將FooterTemplate內的元件Copy進去WebGridViewAddNewControls中,這是為了讓開發者方便自動Copy 有設TemplateField的欄位,自動將其FooterTemplate的元件CopyAddNewControls中,以簡化設計。

 

4. 請注意,TotalCaption屬性一定要配合第一個WebGridViewColumn要不為Binding的欄位,否則無法顯示出TotalCaptionFooter中。

 

5. WebGridView EditURL 方式中實現連續新增,目前方法為 : Formview 上貼一個 " 繼續新增 " Button ,執行以下程式即可 :

  FormView.InsertItem ( false);

  FormView.ChangeMode ( FormViewMode.Insert );

 

範例

利用 RowDataBound 的事件來設定欄位的初值, 如下 :

protected voidWebGridView1_RowDataBound( objectsender, GridViewRowEventArgse)

{

// Default 操作 (Insert 時使用 )

if (e.Row.RowType == DataControlRowType.Footer && WebGridView1.ShowFooter)

{

Control ctrl = e.Row.FindControl( "TextBox1");

if (ctrl != null&& ctrl is TextBox)

{

   TextBoxtxt = ( TextBox)ctrl;

  txt.Text = "abc";

 }

}

// Default 操作 (Update 時使用 )

if (e.Row.RowType == DataControlRowType.DataRow)

{

Control ctrl = e.Row.FindControl( "TextBox1");

if (ctrl != null&& ctrl is TextBox)

{

   TextBoxtxt = ( TextBox)ctrl;

  txt.Text = "abc";

 }

}

}

 

可以利用 RowUpdating 的事件來設定更改時欄位的檢核, 如下 :

RowUpdating 事件中 , 加入如下代码

protected voidwgvDetail_RowUpdating( objectsender, GridViewUpdateEventArgse)

{

if (e.NewValues[ "UnitPrice"].ToString() == "0") // 此為沒有 Template 的欄位

{

e.Cancel = true;

Page.Response.Write( "<script>alert('UnitPrice 必須不为 0 !');</script>" );

return ;

}

// 如果有設為 TemplateField , 則改用 FindControl

WebRefVal rf = ( WebRefVal)wgvDetail.Rows[e.RowIndex].FindControl( "wrvOrderDetailsProductIDE");

if (rf.BindingValue[0] >= '0'&& rf.BindingValue[0]<= '9')

{

e.Cancel = true;

Page.Response.Write( "<script>alert('Product ID 第一個字母不為數字 !');</script>" );

}

}

 

可以利用 Inserting 的事件來設定新增時欄位的檢核, 如下 :

protected voidWebGridView1_Inserting( objectsender, EventArgse)

{

if (WebGridView1.ShowFooter)

{

   Controlctrl = WebGridView1.FooterRow.FindControl( "TextBox1");

   if(ctrl != null&& ctrl is TextBox)

  {

       TextBox txt = ( TextBox)ctrl;

      if(txt.Text == null|| txt.Text == "")

     {

         Page.Response.Write( "<script>alert(' 请输入不为空的 groupname 的值 !');</script>" );

         WebGridView1.SkipInsert = true; // 这行一定要写

     }

   }

 }

}

 

 

 

Top of Page