用gridview 可以解决的如下,是当时要做的一个权限控制的,你只需要了解一下gridview的edit模式如何实现就可以了
<asp:GridView ID="MasterGridView" runat="server" AutoGenerateColumns="false" Width="100%"
BorderWidth="1" DataKeyNames="MenuID" ShowHeader="false" OnRowDataBound="MasterGridView_RowDataBound" PageSize="3" AllowPaging="true" OnPageIndexChanging="MasterGridView_PageIndexChanging" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="width: 100%; padding: 2px; font-weight: bold; background-color: #34333;
float: left">
<span style="float: left" class="GdvCaption">页面名称:<%#Eval("MenuDes")%></span> <span style="float: right;
color:White; cursor: pointer" onclick="ShowHidden('<%#Eval("MenuID") %>',event)">
细节</span></div>
<div style="background-color: #FFF; padding-left: 20px; clear: both" id="div<%#Eval("MenuID") %>">
<asp:GridView ID="DetailGridView" runat="server" AutoGenerateColumns="false" ShowHeader="false"
HorizontalAlign="left" DataKeyNames="MenuID" Width="100%" OnRowCreated ="grdDetail_RowCreated">
<HeaderStyle BackColor="#AFE47B" />
<Columns>
<asp:TemplateField>
<ItemStyle Width="50px"/>
<ItemTemplate>
<%-- <asp:CheckBox ID="DetailSelect" runat="server" />--%>
<asp:CheckBox ID="DetailSelect" runat="server" ValidationGroup='<%#DataBinder.Eval(Container.DataItem, "MenuIDFunction").ToString() %>' OnCheckedChanged="Check_Clicked" AutoPostBack="true" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="功能名称" DataField="FunctionName"/>
<asp:BoundField HeaderText="功能描述" DataField="FunctionDes" ControlStyle-CssClass="Caption"/>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
function ShowHidden(MenuID,ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var oDiv = document.getElementById("div" + MenuID);
oDiv.style.display = oDiv.style.display == "none"?"block":"none";
target.innerHTML = oDiv.style.display == "none"?"细节":"页面";
}
</script>
主从关系的gridview repeater布局都行
也可以是联动关系的表格布局
參考,主
<html>
<head>
<title>test</title>
<style>
.tab
{
border:1px solid red;
}
.tab td
{
border:1px solid red;padding:10px;
}
.tab table
{
border:0px solid red;
}
</style>
</head>
<body>
<table border="0" cellpadding=0 cellspacing=0 width="100%" class="tab">
<tr>
<td bgcolor="#808000">ITEM</td>
<td bgcolor="#808000">NAME</td>
<td bgcolor="#808000">Description</td>
</tr>
<tr>
<td bgcolor="#00FFFF">1主表</td>
<td bgcolor="#00FFFF">woody</td>
<td bgcolor="#00FFFF">woody</td>
</tr>
<tr>
<td colspan="3">
從表
<table border="1" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td width="125" bgcolor="#C0C0C0">address</td>
<td bgcolor="#C0C0C0">shanghai</td>
</tr>
<tr>
<td width="125" bgcolor="#C0C0C0">e-mail</td>
<td bgcolor="#C0C0C0">test@mail.com</td>
</tr>
</table>
從表
</td>
</tr>
<tr>
<td bgcolor="#00FFFF">2</td>
<td bgcolor="#00FFFF">woody1</td>
<td bgcolor="#00FFFF">woody1</td>
</tr>
<tr>
<td colspan="3">
從表
<table border="1" width="100%" cellpadding=0 cellspacing=0>
<tr>
<td width="125" bgcolor="#C0C0C0">address</td>
<td bgcolor="#C0C0C0">shanghai</td>
</tr>
<tr>
<td width="125" bgcolor="#C0C0C0">e-mail</td>
<td bgcolor="#C0C0C0">test@mail.com</td>
</tr>
</table>
從表
</td>
</tr>
</table>
</body>
</html>
个人感觉用选项卡的那种表现模式能好一点吧