答案:Introduction
The DataGrid Web server control is a powerful tool for displaying information from a data source. It is easy to use; you can display editable data in a professional-looking grid by setting only a few properties. At the same time, the grid has a sophisticated object model that provides you with great flexibility in how you display the data.
This 易做图 addresses some of the questions about customizing grid display that are commonly asked in newsgroups, on Web sites, and in other developer forums. The techniques described here are sometimes quite 易做图 and at other times somewhat involved. In each case, however, they address a question of how to go beyond the basic functionality of the DataGrid control.
This 易做图 assumes that you are already familiar with the control — how to add it to a form and configure it to display data. You should also understand how to put a row in the grid into edit mode and other basic tasks. (For details, see DataGrid Web Server Control.) Finally, you will find it helpful to know how to work with templates — adding template columns to the grid and layout out controls inside a template.
Windows Forms versus Web Forms DataGrid Control
The Web Forms DataGrid control is not the same as the Windows Forms equivalent. It is a common (and not unreasonable) assumption that they are the same control, or at least have identical functionality. However, the entire programming paradigm for Web Forms is quite different from that for Windows Forms. For example, Web Forms pages perform a round trip to the server for any processing; they must manage state; they feature a very different data-binding model; and so on.
Because of these differences, there are also significant differences in their respective controls, including the DataGrid control. As a general rule, the Web Forms DataGrid control includes less built-in functionality. A few examples of differences in the Web Forms DataGrid control are:
It does not inherently support master-detail data structures.
As with other Web server controls, it does not support two-way data binding. If you want to update data, you must write code to do this yourself.
You can only edit one row at a time.
It does not inherently support sorting, although it raises events you can handle in order to sort the grid contents.
On the other hand:
You can bind the Web Forms DataGrid to any object that supports the IEnumerable inte易做图ce.
The Web Forms DataGrid control supports paging.
It is easy to customize the appearance and layout of the Web Forms DataGrid control as compared to the Windows Forms one. (Details are provided later in this 易做图.)
Controlling Column Width, Height, and Alignment
By default, the DataGrid control sizes rows and columns to fit the overall height and width that you have assigned to the grid. Within the overall grid width, it sizes columns according to the width of the column heading text. All data is displayed left-justified by default.
To control column characteristics, you should turn off auto column generation by setting the AutoGenerateColumns property to false. In fact, you should set this property to true only for short-term uses, such as quick proof-of-concept pages or demonstrations. For production applications, you should add columns explicitly. The individual columns can be bound columns or template columns.
To set the column width, you create a style element for that column and then set the element's Width property to standard units (say, pixels). The following example shows you what the HTML syntax looks like for an ItemStyle element with its Width property set.
<asp:BoundColumn DataField="title" SortExpression="title"
HeaderText="Title">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundColumn>
Alternatively, you can do the same thing by setting the ItemStyle property directly in the element, as in the following example:
<asp:BoundColumn ItemStyle-Width="100px" DataField="title"
SortExpression="title" HeaderText="Title">
</asp:BoundColumn>
You can set alignment using the style element, setting it to "Right," "Left," and other values defined in the HorizontalAlign enumeration. (In Visual Studio, alignment is available for individual columns in the Format tab of the grid's Property builder.) The following is an example:
<asp:BoundColumn DataField="title" SortExpression="title"
HeaderText="Title">
<ItemStyle Width="100px" HorizontalAlign="Right"></ItemStyle>
</asp:BoundColumn>
You can also set a column's height using the style element (or the ItemStyle-Height property). You will probably find this less flexible than setting the width, since setting the height for one column sets it for all of them.
You can set the width in code at run time as well. One place to do so is in an ItemCreated event handler. The following example sets the width of the first two columns to 100 and 50 pixels, respectively:
' Visual Basic
Private Sub DataGrid1_ItemCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
Handles DataGrid1.ItemCreated
e.Item.Cells(0).Width = New Unit(100)
e.Item.Cells(1).Width = New Unit(50)
End Sub
// C#
private void DataGrid1_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);
}
Of course, there is little sense in setting a fixed width in code that you could set at design time. You would normally do this only if you wanted to set the width based on a run-time value. You can set the width of a cell or control in units (typically pixels), but it is not straightforward to translate the length of data — which is simply a character count — into pixels. But the data is available for you to examine when you are creating the item.
Customizing Column Layout in Display and Edit Mode
By default, the grid displays data in pre-sized columns. When you put a row into edit mode, the control displays text boxes for all editable data, regardless of what data type the data is.
If you want to customize the content of a column, make the column a template column. Template columns work like item templates in the DataList or Repeater control, except that you are defining the layout of a column rather than a row.
When you define a template column, you can specify the following template types:
The ItemTemplate allows you to customize the normal display of the data.
The EditItemTemplate allows you to specify what shows up in the column when a row is put into edit mode. This is how you can specify a control other than the default text box for editing.
A HeaderTemplate and FooterTemplate allow you to customize the header and footer, respectively. (The footer is only displayed if the grid's ShowFooter property is true.)
The following example shows the HTML syntax for a template column that displays Boolean data. Both the ItemTemplate and EditItemTemplate use a check box to display the value. In the ItemTemplate, the check box is disabled so that users do not think they can check it. In the EditItemTemplate, the check box is enabled.
<Columns>
<asp:TemplateColumn HeaderText="Discontinued">
<ItemTemplate>
<asp:Checkbox runat="server" enabled= false name ="Checkbox2"
ID="Checkbox2"
Checked = '<%# DataBinder.Eval(Container,
"DataItem.Discontinued") %>' >
</asp:Checkbox>
</ItemTemplate>
<Ed
上一个:使用ASP与javascript配合实现多个复选框数据关联显示
下一个:自己写的一个简单ASP调用存储过程查询