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 = "-"; } else { detail.style.display = "none"; bt.value = "+"; } } } // --></mce:script> <asp:DataGrid ID="dgList" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateColumn> <ItemTemplate> <input type="button" value="-" οnclick='Show(this,"<%#Container.ItemIndex %>")' /> </ItemTemplate> </asp:TemplateColumn> <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 id='tr_<%#Container.ItemIndex%>'> <td colspan="6" style="height:50px; vertical-align:top;"> 这里可以显示详细信息 </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid> 

实现效果如下

第二种方式是把加的tr改为服务器控件，用DataGrid的Command做

两种方法各有各的好处，此处不多说了。

 

总结：服务器控件灵活运用，有时候很方便。在显示详细信息的新加行里面如果再套用DataGrid的话，还会实现很多想要的功能。

 

今天就这么多，接下来还会写关于DataGrid的另外一个非常规用法。第一段代码里面出现value会出很多csdn的代码改成了va1ue了。