asp.net控件的另类用法之 DataGrid的另类用法一

    去年做项目的时候，发现需要用一个类似于Devexpress的GridView控件（http://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx），也就是相当于DataGrid/GridView控件的一行加上一个空白行，然后显示Detail信息。
    于是后来就想到了下面的一个办法：
    1.第一步
aspx代码
<asp:DataGrid ID="dgList" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundColumn HeaderText="Text" DataField="Text"></asp:BoundColumn>
<asp:BoundColumn HeaderText="Value" DataField="Value"></asp:BoundColumn>
<asp:BoundColumn HeaderText="Selected" DataField="Selected"></asp:BoundColumn>
<asp:BoundColumn HeaderText="Enabled" DataField="Enabled"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="...">
<ItemTemplate>
<%#Eval("Value").ToString()+":"+Eval("Text").ToString() %></td></tr>
<tr>
<td colspan="5" style="height:50px;">
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
cs代码
List<ListItem> list = new List<ListItem>();
for (int i = 0; i < 23; i++)
{
ListItem li = new ListItem(i.ToString(), i.ToString());
list.Add(li);
}
dgList.DataSource = list;
dgList.DataBind(); 
效果如下
2.第二步，实现控制Detail的显示
这个可以用两种方法
第一种用Js实现，只需更改aspx代码
<mce:script language="javascript"><!--
function Show(bt,index) {
var detail = document.getElementById("tr_" + index);
if (detail) {
if (detail.style.display == "none") {
detail.style.display = "block";
bt.value = "-";
}