品牌显示

最新推荐文章于 2021-11-04 14:15:28 发布

别有滋味

最新推荐文章于 2021-11-04 14:15:28 发布

阅读量704

点赞数

分类专栏： Jquery 文章标签： insert dataset webform server class function

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

数据表：

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];
         
        }
    }

别有滋味

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
品牌显示

数据表：create table pingpai( pid int identity(1001,1) primary key, pname varchar(20), pcount int)goinsert into pingpai values('佳能',30440)insert into pingpai values('索尼',27220)insert i
复制链接

扫一扫