废话不说先看图吧：
当鼠标放到标王的图标时，自动弹出该标签下标王的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;
}
}