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="-" onclick='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了。