Experience in tabstrip and multipage

Source: Internet
Author: User

There is a project at hand. One of the pages needs to display member information in the form of trees and tables respectively. After searching on the internet, I found a control package with a tabstrip and multipage, the combination of the two controls can achieve the multi-page box function. The following is an example:

Put a tabstrip on the page, add two tabs, respectively, and write the text: Member tree and member table. The targetid is set to the following 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 = "member Tree" id = "tabtree"> </iewc: tab>
<Iewc: tabseparator> </iewc: tabseparator>
<Iewc: tab text = "member table" id = "tablist"> </iewc: tab>
</Iewc: tabstrip> <iewc: multipage id = "multipage1" runat = "server">

Add a multipage with the ID of multipage1 and two pageview controls below:

<Iewc: multipage id = "multipage1" runat = "server">
<Iewc: pageview id = "pvtree">
<Table id = "Table2" cellspacing = "1" cellpadding = "1" width = "100%" border = "1">
<Tr>
& Lt; TD width = "50%" & gt;
<Asp: Label id = "lbltjrs" runat = "server" font-size = "smaller" forecolor = "blue" font-bold = "true"> all members </ASP: label> </TD>
& Lt; TD width = "50%" & gt;
<Asp: button id = "btndqhy" runat = "server" text = "current member" causesvalidation = "false"> </ASP: button>
<Asp: button id = "button1" runat = "server" text = "specified member"> </ASP: button>
<Asp: Label id = "label1" runat = "server" font-bold = "true" forecolor = "blue" font-size = "9"> member ID: </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 = "number can only be an integer"
Type = "integer" controltovalidate = "tbhybh" operator = "datatypecheck"> </ASP: comparevalidator>
</TD>
</Tr>
<Tr>
& Lt; TD valign = "TOP" width = "50%" & gt;
<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"> lower-level members </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"> upper-level members </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">
& Lt; table width = "100%" & gt;
<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"> <Footerstyle forecolor = "#330099" backcolor = "# ffffcc"> </footerstyle>
<Columns>
<Asp: boundcolumn datafield = "bh" headertext = "no."> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "XM" headertext = "name"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "DH" headertext = "tel"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "yhkh" headertext = "bank card number"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "nodeval" headertext = "consumption"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "ljgz" headertext = "accumulative salary"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "jrrq" headertext = "date added"> </ASP: boundcolumn>
<Asp: boundcolumn datafield = "Kl" headertext = "password"> </ASP: boundcolumn>
</Columns>
<Pagerstyle nextpagetext = "next page" prevpagetext = "Previous Page" horizontalalign = "center" forecolor = "#330099"
Backcolor = "# ffffcc"> </pagerstyle>
</ASP: DataGrid>
</TD>
</Tr>
</Table>
</TD>
</Tr>
</Table>
</Iewc: pageview>
</Iewc: multipage>

You can see the running effect.

Demo address: http: // 219.146.227.58/test log on with Administrator admin password 666666

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.