tabstrip和multipage使用心得

时间:2022-06-17 14:50:26

手头有一个项目,其中一个页面需要分别用树和表的形式来显示会员信息,在网上搜索了一下,找到了一个控件包,其中有一个  tabstrip 和 multipage,这两个控件相结合就能达到 多页框功能,下面是一个例子:

在页面上放一个  tabstrip,再加两个tab ,text分别写:会员树和会员表,TargetID设为 下面的MultiPage1

     <iewc:tabstrip id="TabStrip1" runat="server" TabSelectedStyle="background-color:#ffffff;color:#000000"
TabHoverStyle="background-color:#777777" TabDefaultStyle="background-color:#000000;font-family:verdana;font-weight:bold;font-size:8pt;color:#ffffff;width:79;height:21;text-align:center"
Font-Size="X-Small" TargetID="MultiPage1">
<iewc:Tab Text="会员树" ID="tabTree"></iewc:Tab>
<iewc:TabSeparator></iewc:TabSeparator>
<iewc:Tab Text="会员表" ID="tabList"></iewc:Tab>
</iewc:tabstrip><iewc:multipage id="MultiPage1" runat="server">

在下面加上一个 multipage,ID为multipage1和两个 pageView 控件:

<iewc:multipage id="MultiPage1" runat="server">
<iewc:pageview id="PVTree">
<TABLE id="Table2" cellSpacing="1" cellPadding="1" width="100%" border="1">
<TR>
<TD width="50%">
<asp:label id="lblTJRS" runat="server" Font-Size="Smaller" ForeColor="Blue" Font-Bold="True">所有会员</asp:label></TD>
<TD width="50%">
<asp:button id="btnDQHY" runat="server" Text="当前会员" CausesValidation="False"></asp:button>
<asp:Button id="Button1" runat="server" Text="指定会员"></asp:Button>
<asp:label id="Label1" runat="server" Font-Bold="True" ForeColor="Blue" Font-Size="9">会员编号:</asp:label>
<asp:TextBox id="tbHYBH" runat="server" Width="40px"></asp:TextBox>
<asp:CompareValidator id="CompareValidator1" runat="server" Font-Bold="True" Font-Size="9" ErrorMessage="编号只能是整数"
Type="Integer" ControlToValidate="tbHYBH" Operator="DataTypeCheck"></asp:CompareValidator>
</TD>
</TR>
<TR>
<TD vAlign="top" width="50%">
<iewc:treeview id="TreeView1" runat="server" ImageUrl="./images/nodclose2.gif" BorderStyle="Inset"
Width="100%">
<iewc:TreeNode Text="无会员"></iewc:TreeNode>
</iewc:treeview></TD>
<TD vAlign="top">
<TABLE id="Table3" cellSpacing="1" cellPadding="1" width="100%" border="1">
<TR>
<TD>
<asp:Label id="lblXCHY" runat="server" Font-Size="Smaller" ForeColor="Blue" Font-Bold="True">下层会员</asp:Label></TD>
</TR>
<TR>
<TD vAlign="top">
<iewc:treeview id="TreeView2" runat="server" ImageUrl="./images/nodclose2.gif" BorderStyle="Inset"
Width="100%">
<iewc:TreeNode Text="无会员"></iewc:TreeNode>
</iewc:treeview></TD>
</TR>
<TR>
<TD>
<asp:Label id="lblSCHY" runat="server" Font-Size="Smaller" ForeColor="Blue" Font-Bold="True">上层会员</asp:Label></TD>
</TR>
<TR>
<TD vAlign="top">
<iewc:TreeView id="TreeView3" runat="server" ImageUrl="./images/nodclose2.gif" BorderStyle="Inset"
Width="100%">
<iewc:TreeNode Text="无会员"></iewc:TreeNode>
</iewc:TreeView></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</iewc:pageview>
<iewc:pageview id="PVList">
<TABLE id="Table5" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD align="center" valign="top">
<table width="100%">
<tr>
<td>
<asp:DataGrid id="DataGrid1" runat="server" Font-Size="Smaller" BorderStyle="None" Width="100%"
AutoGenerateColumns="False" AllowPaging="True" BorderColor="#CC9966" BorderWidth="1px" BackColor="White"
CellPadding="4" PageSize="40">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<Columns>
<asp:BoundColumn DataField="BH" HeaderText="编号"></asp:BoundColumn>
<asp:BoundColumn DataField="XM" HeaderText="姓名"></asp:BoundColumn>
<asp:BoundColumn DataField="DH" HeaderText="电话"></asp:BoundColumn>
<asp:BoundColumn DataField="YHKH" HeaderText="银行卡号"></asp:BoundColumn>
<asp:BoundColumn DataField="NodeVal" HeaderText="消费额"></asp:BoundColumn>
<asp:BoundColumn DataField="LJGZ" HeaderText="累计工资"></asp:BoundColumn>
<asp:BoundColumn DataField="JRRQ" HeaderText="加入日期"></asp:BoundColumn>
<asp:BoundColumn DataField="KL" HeaderText="密码"></asp:BoundColumn>
</Columns>
<PagerStyle NextPageText="下一页" PrevPageText="上一页" HorizontalAlign="Center" ForeColor="#330099"
BackColor="#FFFFCC"></PagerStyle>
</asp:DataGrid>
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
</iewc:pageview>
</iewc:multipage>

可以看看运行效果了。

演示地址:http://219.146.227.58/test  用管理员 admin 密码 666666 登录