品牌显示

来源：互联网发布：软件的生命周期包括编辑：程序博客网时间：2024/04/27 03:32

数据表：

create table pingpai
(
pid int identity(1001,1) primary key,
pname varchar(20),
pcount int
)
go
insert into pingpai values('佳能',30440)
insert into pingpai values('索尼',27220)
insert into pingpai values('三星',20808)
insert into pingpai values('尼康',17821)
insert into pingpai values('松下',12289)
insert into pingpai values('卡西欧',8242)
insert into pingpai values('富士',14894)
insert into pingpai values('柯达',9520)
insert into pingpai values('宾得',2195)
insert into pingpai values('理光',4114)
insert into pingpai values('奥林巴斯',12205)
insert into pingpai values('明基',1466)
insert into pingpai values('爱国者',2569)
insert into pingpai values('其他品牌',null)
select * from pingpai

html代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-size: 12px;            text-align: center;        }        a        {            color: #04D;            text-decoration: none;        }        a:hover        {            color: #F50;            text-decoration: underline;        }        .SubCategoryBox        {            width: 600px;            margin: 0 auto;            text-align: center;            margin-top: 40px;        }        .SubCategoryBox ul        {            list-style: none;        }        .SubCategoryBox ul li        {            display: block;            float: left;            width: 200px;            line-height: 20px;        }        .showmore        {            clear: both;            text-align: center;            padding-top: 10px;        }        .showmore a        {            display: block;            width: 120px;            margin: 0 auto;            line-height: 24px;            border: 1px solid #AAA;        }        .showmore a span        {            padding-left: 15px;            background: url(img/down.gif) no-repeat 0 0;        }        .promoted a        {            color: #F50;        }    </style>    <script src="JS/jquery-1.3.2.js" type="text/javascript"></script>    <script type="text/javascript">        $(function() {     //  等待DOM加载完毕.            var $category = $('ul li:gt(5):not(:last)');         //  获得索引值大于5的品牌集合对象(除最后一条)            $category.hide();     //  隐藏上面获取到的jQuery对象。            var $toggleBtn = $('div.showmore > a');             //  获取“显示全部品牌”按钮            $toggleBtn.click(function() {                if ($category.is(":visible")) {                    $category.hide();                    //  隐藏$category                    $('.showmore a span').css("background", "url(img/down.gif) no-repeat 0 0").text("显示全部品牌");                  //改变背景图片和文本                    $('ul li').removeClass("promoted"); // 去掉高亮样式                } else {                    $category.show();                    //  显示$category                    $('.showmore a span').css("background", "url(img/up.gif) no-repeat 0 0").text("精简显示品牌");                  //改变背景图片和文本                    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted"); //添加高亮样式                }                return false;       //超链接不跳转            })        })    </script></head><body>    <form id="form1" runat="server">    <div class="SubCategoryBox">        <ul>            <%for (int i = 0; i < dt.Rows.Count; i++)              {%>            <li><a href="#">                <%=dt.Rows[i]["pname"] %></a><i>(<%=dt.Rows[i]["pcount"] %>)</i></li>            <%} %>        </ul>    </div>    <div class="showmore">        <a href="#"><span>显示全部品牌</span></a>    </div>    </form></body></html>

后台代码：

 public partial class WebForm2 : System.Web.UI.Page    {        public DataTable dt;        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                dt = GetAll();            }        }        public DataTable GetAll()        {            SqlConnection conn = new SqlConnection("server=.;database=Example;uid=sa;pwd=***");            string sql = "select *from pingpai";            SqlDataAdapter da = new SqlDataAdapter(sql, conn);            DataSet ds = new DataSet();            da.Fill(ds);            return ds.Tables[0];                 }    }