關於DataGrid Web控制項的熱門問題

來源:互聯網
上載者:User
datagrid|web|控制項|問題 文章譯自在工作過程中遇到的實際問題,而查的MSDN,當時沒有找到中文資料,網上關於此方面的實用的資料也不多,有心收集下來並翻譯,在此與大家交流,歡迎批評指正:zyfly0808@hotmail.com


內容——

序言:Windows表單&Web表單中的DataGrid控制項

①.控制列的寬度、高度和對齊。

②.制定列的顯示和編輯模式外觀。

③.格式化日期、貨幣和其它資料。

④.動態顯示和隱藏列。

⑤.動態增加列。

⑥.用DataGrid控制項向資料來源添加一條記錄。

⑦.在編輯模式下顯示一個下拉式清單。

⑧.用CheckBox選擇多個Items.

⑨.一次編輯多行。

⑩.單擊任何地方選中該行。


簡介







DataGrid伺服器控制是從資料來源顯示資訊的強有力的工具,使用簡單。你可以只通過設定一些屬性就可以顯示可編輯的資料,並且使其具有專業的外觀,同時,它還具有非常複雜的物件模型,為你展示資料提供了很大的靈活性。







這篇文章重點講解了在NewsGroup網路和其它的開發人員的論壇裡經常問到的關於制定DataGrid的顯示的問題。這裡所討論的有些問題是很簡單的,但有時也有些令人迷惑,在這種情況下,他們提出了這一問題——如何掌握DataGrid控制項的準系統。







文章假設你已經熟悉該控制項——怎樣將它添加到一個表單以及如何設定它來顯示資料。你還要知道怎樣將它的一行變成可編輯模式和其它的基本任務。最終,你將會發現掌握如何使用模板——向DataGrid中添加模板列以及在模板中展示控制項——是十分有協助的。








序言:Windows表單&Web表單中的DataGrid控制項。







Web表單中的DataGrid控制項並不是Windows表單中該控制項的等價物,通常認為它們是同一種控制項,至少具有相同的功能。但是,Web表單的整個編程Paradigm和Windows表單有著很大的不同,舉個例子來說,Web表單頁面的每一次處理過程都要回傳到伺服器,它們必須維護狀態,而且具有非常不同的資料繫結模型,如此等等。







正是由於這些不同,使得它們在各自的控制項方面也有著很大的差異,包括
DataGrid控制項,一般來說,Web表單DataGrid控制項的內建屬性要少一些,下面列出了幾個不同之處:
①.不繼承支援主——從資料結構。

②.和其它Web伺服器控制項一樣,它不支援雙向的資料繫結。如果你想更新資料,必須要自己寫代碼。

③.一次只能編輯一行。

④.並不繼承性也支援排序,儘管你可以通過處理它激發的事件來對網格的內容排序。

另一方面:

①.你可以將Web表單DataGrid控制項綁定到任何支援IEnumerable介面的對象上。

②.Web表單DataGrid控制項支援分頁。

③.與Windows表單DataGrid相比,我們更容易規範Web表單DataGrid的外觀和資料的輸出。







一.控制列寬度、高度和對齊公式。

預設情況下,DataGrid控制項自動調整行和列,使它們適應你指定給它的全部

的高度和寬度。在全部寬度內,它根據列頭的文本來控制列的寬度。所有資料默

認都是靠左對齊的。









為控制列的特性,應該關閉“自動產生列”屬性——將AutoGenerateColumns屬性置為False.在實際的使用中,只有在短期應用,如快速探索頁面或者示範的時候,才將該屬性設為True.對於產生應用程式而言,你應該預設添加列,每個列可以是繫結資料行或者模板列。

為了控制某個列的寬度,可以為該列產生一個樣式元素(style-element)然後
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:


<asp: BoundColumn DataField=”title”SortExpression=”title”



<asp: BoundColumn DataField=”title”SortExpression=”title”


Header Text=”Title”>







<ItemStyle Width=”100px”></ItemStyle>







</asp:BoundColumn>







註:可以將ItemStyle-Width=”100px”寫入Boundolumn中。







你可以使用樣式元素設定對齊,將其設為“左”、“右”或者其它在“水平對齊”集合中定義的值(在VS中,每個單獨的列對齊是可見的)







下面是一個例子:







<asp: BoundColumn DataField=”title” SortExpression=”title”







HeaderText=”Title”>







<ItemStyle Width=”100px”HorizontalAlign=”Right”></ItemStyle>







</asp:BoundColumn>







你還可以使用樣式元素設定列的高度,你很可能會覺得這沒有設定寬度靈活,因為設定某一列的高度也就設定了全部列的高度。







你也可以在運行時通過代碼設定寬度,採取這種方式的一個例子就是ItemGreated事件控制代碼,下面的例子將前兩列分別設定為100和50像素。







//C#







Private void DataGrid-ItemCreated(object sender,







System.Web.UI.WebControls.DataGridItemEventArgs e)







{







e.Item.Cells[0]Width=new Unit(100);







e.Item.Cells[1].Width=new Unit(50);







}







當然,將這些可以在設計時就設定好的寬度值通過代碼來設定幾乎沒有任何意義。一般情況下,你可能只是想要基於運行時的值來設定寬度而採取這種方法,你可以將儲存格控制項的寬度設為標準的單位(往往是像素)。但是,它並不直接將這些長度資料轉化為像素——這些僅僅是字元數。然而,當你建立一個項的時候,可以使用這些資料來檢查。







(unfinished)


③.與Windows表單DataGrid相比,我們更容易規範Web表單DataGrid的外觀和資料的輸出。







一.控制列寬度、高度和對齊公式。

預設情況下,DataGrid控制項自動調整行和列,使它們適應你指定給它的全部

的高度和寬度。在全部寬度內,它根據列頭的文本來控制列的寬度。所有資料默

認都是靠左對齊的。









為控制列的特性,應該關閉“自動產生列”屬性——將AutoGenerateColumns屬性置為False.在實際的使用中,只有在短期應用,如快速探索頁面或者示範的時候,才將該屬性設為True.對於產生應用程式而言,你應該預設添加列,每個列可以是繫結資料行或者模板列。

為了控制某個列的寬度,可以為該列產生一個樣式元素(style-element)然後
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:


<asp: BoundColumn DataField=”title”SortExpression=”title”



<asp: BoundColumn DataField=”title”SortExpression=”title”


Header Text=”Title”>







<ItemStyle Width=”100px”></ItemStyle>







</asp:BoundColumn>







註:可以將ItemStyle-Width=”100px”寫入Boundolumn中。







你可以使用樣式元素設定對齊,將其設為“左”、“右”或者其它在“水平對齊”集合中定義的值(在VS中,每個單獨的列對齊是可見的)







下面是一個例子:







<asp: BoundColumn DataField=”title” SortExpression=”title”







HeaderText=”Title”>







<ItemStyle Width=”100px”HorizontalAlign=”Right”></ItemStyle>







</asp:BoundColumn>







你還可以使用樣式元素設定列的高度,你很可能會覺得這沒有設定寬度靈活,因為設定某一列的高度也就設定了全部列的高度。







你也可以在運行時通過代碼設定寬度,採取這種方式的一個例子就是ItemGreated事件控制代碼,下面的例子將前兩列分別設定為100和50像素。







//C#







Private void DataGrid-ItemCreated(object sender,







System.Web.UI.WebControls.DataGridItemEventArgs e)







{







e.Item.Cells[0]Width=new Unit(100);







e.Item.Cells[1].Width=new Unit(50);







}







當然,將這些可以在設計時就設定好的寬度值通過代碼來設定幾乎沒有任何意義。一般情況下,你可能只是想要基於運行時的值來設定寬度而採取這種方法,你可以將儲存格控制項的寬度設為標準的單位(往往是像素)。但是,它並不直接將這些長度資料轉化為像素——這些僅僅是字元數。然而,當你建立一個項的時候,可以使用這些資料來檢查。







(unfinished)


③.與Windows表單DataGrid相比,我們更容易規範Web表單DataGrid的外觀和資料的輸出。







一.控制列寬度、高度和對齊公式。

預設情況下,DataGrid控制項自動調整行和列,使它們適應你指定給它的全部

的高度和寬度。在全部寬度內,它根據列頭的文本來控制列的寬度。所有資料默

認都是靠左對齊的。









為控制列的特性,應該關閉“自動產生列”屬性——將AutoGenerateColumns屬性置為False.在實際的使用中,只有在短期應用,如快速探索頁面或者示範的時候,才將該屬性設為True.對於產生應用程式而言,你應該預設添加列,每個列可以是繫結資料行或者模板列。

為了控制某個列的寬度,可以為該列產生一個樣式元素(style-element)然後
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:
將元素的寬度屬性設為標準單位,下面給出了一個項樣式的width屬性設定
的HTML代碼:


<asp: BoundColumn DataField=”title”SortExpression=”title”



<asp: BoundColumn DataField=”title”SortExpression=”title”


Header Text=”Title”>







<ItemStyle Width=”100px”></ItemStyle>







</asp:BoundColumn>







註:可以將ItemStyle-Width=”100px”寫入Boundolumn中。







你可以使用樣式元素設定對齊,將其設為“左”、“右”或者其它在“水平對齊”集合中定義的值(在VS中,每個單獨的列對齊是可見的)







下面是一個例子:







<asp: BoundColumn DataField=”title” SortExpression=”title”







HeaderText=”Title”>







<ItemStyle Width=”100px”HorizontalAlign=”Right”></ItemStyle>







</asp:BoundColumn>







你還可以使用樣式元素設定列的高度,你很可能會覺得這沒有設定寬度靈活,因為設定某一列的高度也就設定了全部列的高度。







你也可以在運行時通過代碼設定寬度,採取這種方式的一個例子就是ItemGreated事件控制代碼,下面的例子將前兩列分別設定為100和50像素。







//C#







Private void DataGrid-ItemCreated(object sender,







System.Web.UI.WebControls.DataGridItemEventArgs e)







{







e.Item.Cells[0]Width=new Unit(100);







e.Item.Cells[1].Width=new Unit(50);







}







當然,將這些可以在設計時就設定好的寬度值通過代碼來設定幾乎沒有任何意義。一般情況下,你可能只是想要基於運行時的值來設定寬度而採取這種方法,你可以將儲存格控制項的寬度設為標準的單位(往往是像素)。但是,它並不直接將這些長度資料轉化為像素——這些僅僅是字元數。然而,當你建立一個項的時候,可以使用這些資料來檢查。







(unfinished)



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。