机场市场采购网（www.caigo365.com）亮点介绍—标王效果的实现

废话不说先看图吧：

当鼠标放到标王的图标时，自动弹出该标签下标王的List

首先看到要实现该List，对于机床的类别是三级

1.黑粗字体显示的类别

2.绿色字体显示的类别

3.和绿色字体并列的褐色字体的类别

对于某种类别的标王需要另外一个数据源：该标王下的标王公司信息

大家可以看 http://www.caigo365.com/ 看一下具体的效果。

为了实现类似的功能：

由于没时间去整理，代码比较乱，凑乎看吧：

Web 页面的代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uclSysCategoryListStyle6.ascx.cs" Inherits="ascx_global_uclSysCategoryListStyle6" %>
<script type="text/javascript">
    function hiddenDiv(strid, strlink) {
        if (document.getElementById(strid) != null) {
            document.getElementById(strid).style.display = "none";
            document.getElementById(strlink).style.display = "none";
        }
    }

    function showdiv(strid, strlink) {
        if (document.getElementById(strid) != null) {
            document.getElementById(strid).style.display = "block";
            document.getElementById(strlink).style.display = "block";
        }
    }

</script>  
<div class="productlist" style=" border-style:solid; border-color:#b7c5d9; border-1px; 660px;">
    <div class="listmain">
    <ul>
        <asp:Repeater ID="rpParent" runat="server" onitemdatabound="rpParent_ItemDataBound">
            <ItemTemplate>
                <li style="z-index: 9999; text-align:left ;">
                 <div class="pbiglist" style="z-index: 9999;">
                        <!-- 第1级类别-->
                        <h3><%# Eval("category_name")%></h3>
                        <div class="pkeyword-a">
                            <div class="pkeyword-b">
                            <!-- 第二级类带标王图标-->
                               <asp:Repeater ID="rpKing" runat="server" OnItemDataBound="rpKing_ItemDataBound">
                                    <ItemTemplate>
                                        <%# strRecmhtml%>
                                   </ItemTemplate>
                                 </asp:Repeater>
                            </div>
                        </div>
                        <a href="/gyxx/index.shtml" class="more" target="_blank">更多</a>
                  </div>
                 <div class="listname">
                    <!-- 第二级类别-->
                    <ul>
                    <asp:Repeater ID="rpSon" runat="server" OnItemDataBound="rpSon_ItemDataBound">
                        <ItemTemplate>
                       <li style='<%# Eval("category_id").ToString() =="14"|| Eval("category_id").ToString() =="17"|| Eval("category_id").ToString() =="15"|| Eval("category_id").ToString() =="19"
                           || Eval("category_id").ToString() =="22"|| Eval("category_id").ToString() =="23"|| Eval("category_id").ToString() =="20"|| Eval("category_id").ToString() =="32"
                           || Eval("category_id").ToString() =="37"|| Eval("category_id").ToString() =="39"|| Eval("category_id").ToString() =="40"|| Eval("category_id").ToString() =="41"
                           || Eval("category_id").ToString() =="42"|| Eval("category_id").ToString() =="12"|| Eval("category_id").ToString() =="13"|| Eval("category_id").ToString() =="78"
                           || Eval("category_id").ToString() =="79" ?660:330%>; float:left; text-align:left;'>
                      
                            <a href="/cpzx/index_<%# Eval("category_id")%>.shtml" class="sublist" target="_blank"><%# Eval("category_name")%></a>
                             <asp:Repeater ID="rpLevel3" runat="server" OnItemDataBound="rpLevel3_ItemDataBound">
                                <ItemTemplate>
                                    <%# strKinghtml%>
                                </ItemTemplate>
                              </asp:Repeater>
                         </li>
                         </ItemTemplate>
                       
                     </asp:Repeater> 
                     </ul>
                   </div>
      
                </li>
             </ItemTemplate>
         </asp:Repeater>
     </ul>
    </div>
</div>

--后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Dwfbenben.BLL;
using System.Data;
using System.Text;

public partial class ascx_global_uclSysCategoryListStyle6 : System.Web.UI.UserControl
{
    private Category bll = new Category();
    private int size = 10;
    public string Province { get; set; }
    public string CanShu { get; set; }
    public string GoToUrl { get; set; }
    public string strlever3king;
    public string categoryStr = "1,2,3";
    private DataTable myKingtable;
    private DataTable myKingcompanyTable;
    private DataTable myRecCategorytable;
    public string strKinghtml = "";//显示标王和一般的的类别，显示在第三级的机床类别里
    public string strRecmhtml = "";//显示标王和推荐的类别，显示在第二级的机床类别里
    public string CategoryStr
    {
        get
        {
            return this.categoryStr;
        }
        set
        {
            this.categoryStr = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if ((base.Request["province"] != null) && (base.Request.QueryString["province"] != ""))
            {
                this.Province = base.Server.UrlEncode(base.Request.QueryString["province"]);
            }
            getRecommandationCategoryInfo();
            getKingInfo();
            getBiddingKingCompany();
            this.myParentBind();
          
        }
    }

    protected void myParentBind()
    {
        this.rpParent.DataSource = this.bll.GetModelList(" category_parentid=0 and category_id in (" + CategoryStr + ")"," category_displayOrder,category_id");
        this.rpParent.DataBind();
    }
  
    private void getKingInfo()
    {
            //DataSet myds = new DataSet();
            //string filename = this.Server.MapPath("BiddingKing.xml");
            //myds.ReadXml(filename);
          
          
            //DataTable mytable=new DataTable();
            //mytable= myds.Tables[0];
            //myKingtable = mytable;
        //一共7大类，显示的标王信息都是7大类下面的子类，因此从7之后开始
        DataSet myds =this.bll.GetBiddingWithKing(10000, " category_parentid>7" , "");
        myKingtable = myds.Tables[0];
    }
    private void getRecommandationCategoryInfo()
    {
       
        DataSet myds = this.bll.GetBiddingListHightLight(1000, "", "");
        myRecCategorytable = myds.Tables[0];
    }
    private void getBiddingKingCompany()
    {
        Dwfbenben.BLL.Company companybll = new Company();

        DataSet myds = companybll.GetKingList(1000, "", "");
        myKingcompanyTable = myds.Tables[0];
    }

    protected void rpParent_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {
            int num;
            //string text = ((Literal)e.Item.FindControl("ltid")).Text;
            string text = DataBinder.Eval(e.Item.DataItem, "category_id").ToString();
            Repeater repeater = (Repeater)e.Item.FindControl("rpSon");
            repeater.DataSource = this.bll.GetList(this.size, 1, " category_parentid=" + text, out num);
            repeater.DataBind();
            if (num > this.size)
            {
                //((Literal)e.Item.FindControl("more")).Visible = true;
            }
            if (repeater.Items.Count < 1)
            {
                repeater.Visible = false;
            }

            Repeater repeater1 = (Repeater)e.Item.FindControl("rpKing");
            DataView dv = new DataView(myRecCategorytable);
            dv.RowFilter = "category_parentid=" + text;
            DataTable dt_New = dv.ToTable();
            //由于我们是在绑定数据的时候才赋值，所以，显示处理来的字串总是慢一个记录，所以添加了一个无用的临时记录，抵消这个问题
            DataRow temp=dt_New.NewRow();
            temp["category_id"] = -2;
            temp["category_name"] = "";
            temp["category_parentid"] = text;
            temp["isbiddingking"] = -2;
            //temp["website"] = "";
            dt_New.Rows.Add(temp);

            repeater1.DataSource = dt_New;
            repeater1.DataBind();
            if (dt_New.Rows.Count > this.size)
            {
                // ((Literal)e.Item.FindControl("more")).Visible = true;
            }
            if (dt_New.Rows.Count < 1)
            {
                repeater1.Visible = false;
            }

        }
    }
       protected void rpKing_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {
             string isBiddingKing = DataBinder.Eval(e.Item.DataItem, "isBiddingKing").ToString();
             string category_id = DataBinder.Eval(e.Item.DataItem, "category_id").ToString();
             string category_name = DataBinder.Eval(e.Item.DataItem, "category_name").ToString();
            if(isBiddingKing=="1")
            {
                #region 标王
                string divid1, divid2;
                 //<!--onmouseover自动弹出窗体的顶部标题(Id=35)和窗体内容(ID=45)-->
                 //   <div onmouseover="showdiv('35','45')" onmouseout="hiddenDiv('35','45')" style="position: relative; display: inline; z-index: 9998;" >
                 //       <a href="/product/t3906/searchproductlist.html" class="baoico1" >数控车床</a>
                       
                 //       <!--自动弹出的窗体标题样式和内容-->
                 //       <div class="mk-a" id="35" style="75px; left:-2px; display: none;">
                 //            <a href="/product/t3906/searchproductlist.html">数控车床</a>
                 //       </div>
                 //        <!--自动弹出的窗体的样式-->
                 //       <div class="king-a" id="45" style="left: -50px; display: none;">
                          
                 //     </div>
                 // </div>
                Random random = new Random();
               
                string strRadomid="rpKingdiv" + e.Item.ItemIndex.ToString()+ random.Next().ToString();
                divid1 = strRadomid + "a";
                divid2 = strRadomid + "b";
                StringBuilder strbuild = new StringBuilder();
              
                strbuild.Append("<div onmouseover=\"showdiv('" + divid1 + "','" + divid2 + "')\" onmouseout=\"hiddenDiv('" + divid1 + "','" + divid2 + "')\" style=\"position: relative; display: inline; z-index: 9998;\" >");
                strbuild.Append("   <a href='/cpzx/index_" +category_id+ ".shtml\' target='_blank' class=\"baoico1\" >"+category_name+"</a>");
                strbuild.Append("   <div class='mk-a' id='"+divid1+"' style='75px; left:-2px; display: none;'>");
                strbuild.Append("       <a href='/cpzx/index_" + category_id + ".shtml\' target='_blank'>" + category_name + "</a>");
                strbuild.Append("   </div>");
                strbuild.Append("   <div class='king-a' id='" + divid2 + "' style='left: -50px; display: none;'>");
                strbuild.Append("       <div class='kingtop'></div>");
                strbuild.Append("       <div class='kingbox'>");
                DataView dv = new DataView(myKingcompanyTable);
                dv.RowFilter = "category_id=" + category_id;
                DataTable dt_New = dv.ToTable();
              
                for(int k=0;k<dt_New.Rows.Count;k++)
                {
                    string companyName = dt_New.Rows[k]["companyName"].ToString();
                    string companyencode = Server.UrlEncode(companyName);
                    string website = dt_New.Rows[k]["website"].ToString();
                    if (website == "")
                    {
                        strbuild.Append("           <em><a href='/companysite/default.aspx?id=" + companyencode + "' target='_blank' rel='nofollow'>" + companyName + "</a></em>");
                    }
                    else
                    {
                        strbuild.Append("           <em><a href='" + website + "' target='_blank' rel='nofollow'>" + companyName + "</a></em>");
                    }
                    //strbuild.Append("           <em><a href='/companysite/default.aspx?id=" + companyencode + "' target='_blank' rel='nofollow'>" + companyName + "</a></em>");
                }

                strbuild.Append("       </div>");
                strbuild.Append("       <div class='kingbot'></div>");
                strbuild.Append("       <br class='clear' />");
                strbuild.Append("   </div>");
                 strbuild.Append("</div>");
                 strRecmhtml = strbuild.ToString();
                #endregion

            }
            else
            {
                  //第二级类没有带标王图标的书写方式
                  // 内容类似
                StringBuilder strbuild = new StringBuilder();
                strbuild.Append( "<a href='/cpzx/index_" + category_id + ".shtml' target='_blank'>" + category_name + "</a>");
                strRecmhtml = strbuild.ToString();
            }
         
           
        }
    }
    protected void rpLevel3_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {
            string isBiddingKing = DataBinder.Eval(e.Item.DataItem, "isBiddingKing").ToString();
            string category_id = DataBinder.Eval(e.Item.DataItem, "category_id").ToString();
            string category_name = DataBinder.Eval(e.Item.DataItem, "category_name").ToString();

            if (isBiddingKing == "1")
            {
                 //<!-- 第三级类别：加标王-->
                 //<div onmouseover="showdiv('40','50')" onmouseout="hiddenDiv('40','50')" style="position: relative; display: inline; z-index: 9994;">
                 //   <a href="/product/t3903/searchproductlist.html" class="baoico">立式车床</a>
                 //   <!-- 但鼠标放到第三级加标王的文字上面自动弹出的窗体-->
                 //   <!--自动弹出的窗体的标题-->
                 //       <div class="mk-a" id="40" style="70px; left:-2px; display: none;">
                 //       <a href="/product/t3903/searchproductlist.html">立式车床</a>
                 //   </div>
                 //       <div class="king-a" id="50" style="left: -50px; display: none;">
                 //       <!--自动弹出的窗体的顶部风格-->
                 //       <div class="kingtop"></div>
                 //       <!--自动弹出的窗体的内容-->
                 //       <div class="kingbox">
                 //           <!--em标将添加标王图片-->
                 //           <em><a href="http://www.jic35.cn/st8735" target="_blank" rel="nofollow">大连国丰机床有限公司</a></em>
                 //        </div>
                 //       <!--自动弹出的窗体的底部风格-->
                 //       <div class="kingbot"></div>
                 //       <br class="clear" />
                 //    </div>
                 //   </div>
                string divid1, divid2;

                //divid1 = "rpLevel3div" + e.Item.ItemIndex.ToString() + "a";
                //divid2 = "rpLevel3div" + e.Item.ItemIndex.ToString() + "b";
                Random random = new Random();
                string strRadomid = "rpLevel3div" + e.Item.ItemIndex.ToString() + random.Next().ToString();
                divid1 = strRadomid + "a";
                divid2 = strRadomid + "b";
                StringBuilder strbuild = new StringBuilder();
                strbuild.Append("<div onmouseover=\"showdiv('" + divid1 + "','" + divid2 + "')\" onmouseout=\"hiddenDiv('" + divid1 + "','" + divid2 + "')\" style=\"position: relative; display: inline; z-index: 9994;\" >");
                strbuild.Append("    <a href='/cpzx/index_" + category_id + ".shtml\' target='_blank' class=\"baoico\" >" + category_name + "</a>");
                strbuild.Append("   <div class='mk-a' id='" + divid1 + "' style='70px; left:-2px; display: none;'>");
                strbuild.Append("        <a href='/cpzx/index_" + category_id + ".shtml\' target='_blank'>" + category_name + "</a>");
                strbuild.Append("   </div>");
                strbuild.Append("   <div class='king-a' id='" + divid2 + "' style='left: -50px; display: none;'>");
                strbuild.Append("       <div class='kingtop'></div>");
                strbuild.Append("       <div class='kingbox'>");
                DataView dv = new DataView(myKingcompanyTable);
                dv.RowFilter = "category_id=" + category_id;
                DataTable dt_New = dv.ToTable();

                for (int k = 0; k < dt_New.Rows.Count; k++)
                {
                    string companyName = dt_New.Rows[k]["companyName"].ToString();
                    string companyencode = Server.UrlEncode(companyName);
                    string website = dt_New.Rows[k]["website"].ToString();
                    if (website == "")
                    {
                        strbuild.Append("           <em><a href='/companysite/default.aspx?id=" + companyencode + "' target='_blank' rel='nofollow'>" + companyName + "</a></em>");
                    }
                    else
                    {
                        strbuild.Append("           <em><a href='" + website + "' target='_blank' rel='nofollow'>" + companyName + "</a></em>");
                    }
                }
                strbuild.Append("       </div>");
                strbuild.Append("       <div class='kingbot'></div>");
                strbuild.Append("       <br class='clear' />");
                strbuild.Append("   </div>");
                strbuild.Append("</div>");
                strKinghtml = strbuild.ToString();

            }
            else if (isBiddingKing == "0")
            {
                // 推荐的类别
                strKinghtml = " <a href='/cpzx/index_" + category_id + ".shtml' target='_blank'> <img src='/images/v.gif'/>" + category_name + "</a>";
            }
            else
            {
                //一般的类别
                //<!-- 第三级类别：不加标王-->
                //<a href="/product/t3340/searchproductlist.html">普通车床</a>
                strKinghtml = " <a href='/cpzx/index_" + category_id + ".shtml' target='_blank'>" + category_name + "</a>";
            }

        }
    }
    protected void rpSon_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {

          
            string text = DataBinder.Eval(e.Item.DataItem, "category_id").ToString();

            Repeater repeater = (Repeater)e.Item.FindControl("rpLevel3");
            DataView dv = new DataView(myKingtable);
            dv.RowFilter = "category_parentid=" + text;
            DataTable dt_New = dv.ToTable();
            //由于我们是在绑定数据的时候才赋值，所以，显示处理来的字串总是慢一个记录，所以添加了一个无用的临时记录，抵消这个问题
            DataRow temp = dt_New.NewRow();
            temp["category_id"] = -2;
            temp["category_name"] = "";
            temp["category_parentid"] = text;
            temp["isbiddingking"] = -2;
            //temp["website"] = "";
            dt_New.Rows.Add(temp);
            repeater.DataSource = dt_New;
            repeater.DataBind();
            if (dt_New.Rows.Count > this.size)
            {
                // ((Literal)e.Item.FindControl("more")).Visible = true;
            }
            if (dt_New.Rows.Count < 1)
            {
                repeater.Visible = false;
            }
        }
    }
  
    protected string getPicByID(object category)
    {
        string imgStr = "0" + category.ToString() + ".gif";

        return imgStr;
    }
}