在使用WebGridView時,爲了能夠將資料顯示完整。我們提出了WebGridView加WebFormView的模式(WebFormView可以顯示更多的資料)。AjaxGridView提供了資料展開顯示功能,只需一份AjaxGridView設定便可解決原有使用兩個元件所實現的功能,如下圖,本節我們還是使用bProducts來做講解。
AllowExpandRow屬性
AjaxGridView的AllowExpandRow是用來決定在AjaxGridView的資料表頭上是否存在“+”的按鈕。當AllowExpandRow屬性設定為True的時候,AjaxGridView最左邊的一列就會出現一排“+”號,當用滑鼠左鍵點擊“+”號的時候,類似WebFormView的明細就會展開。
NewLine屬性設定方法
選中AjaxGridView1,滑鼠單按AjaxGridView1的Columns屬性右邊的按鈕,打開Columns的屬性編輯框,可以看到每個Column都有一個ExpandColumn的屬性,只有在此屬性設定為True的時候展開的FormView中才會顯示此Column,如果為False就不會顯示了。另一種是反過來的,就是AjaxGridView不想顯示(請設定Visible為False),但FormView要顯示(設定ExpandColumn為True)。
我們剛才設定ExpandColumn屬性的時候,可能會注意到一個叫做“NewLine”的屬性,這個屬性的作用就是在ExpandRow的時候是否換行顯示這個Column,可以利用NewLine屬性來進行欄位間的排版。(此屬性只有在與AllowExpandRow以及ExpandColumn都設定為True的情況下有效)。
現在我們可以根據下面的表格來重新調整每個Column的NewLine的設定。
ColumnName |
ExpandColumn |
NewLine |
ProductID |
True |
True |
ProductName |
True |
True |
SupplierID |
True |
True |
CategoryID |
True |
False |
QuantityPerUnit |
True |
True |
UnitPrice |
True |
False |
UnitsInStock |
True |
True |
UnitsOnOrder |
True |
False |
ReorderLevel |
False |
任意 |
Discontinued |
True |
False |
設定完成後,我們一起來查看一下輸出的效果吧。
ExpandRowTemplateHtml方式
除了上面我們提供的最基本的NewLine(換行排版)功能外,我們還提供了一個叫做“ExpandRowTemplateHtml的屬性”,用於自行使用HTML格式對Row展開的格式進行設定,其中,{欄位名稱}即可表示需要輸出該欄位內容的值,如{ProductID},括號內是定義欄位名稱。現在將AjaxGridView的ExpandRowTemplateHtml屬性設為“<table><tr><td>產品編號:{ProductID}</td></tr><tr><td>產品名稱:{ProductName}</td></tr></table>”,再來瀏覽下效果,如圖:
此屬性是接受Html格式,因此如果需要做的漂亮的話,就需要熟習Html語言。
Converted from CHM to HTML with chm2web Pro 2.85 (unicode) |