C#&JQ仿网上商城商品条件筛选功能

1.后台绑定：

一种案例：

根据第一级显示第二级，并带有每个二级的“全部”功能：

#region 绑定区域
#region 绑定一级区域
string strFirstAreas = "<a " + (string.IsNullOrEmpty(AreaID) || AreaID == "0" ? "class='sel_selected'" : "") + string.Format(" href='{0}'  onmouseout='MouseLeave(this,{1},{2})'>全部<font>({3})</font></a>", "FoodRestaurant.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=0&st=" + SortTypeID + strFilterConditions + strFilterConditions, AreaID, 0, 0);
DataTable dtAreas = HSSM_Public_DB.PblicQuery("ID,AreaName", "Area", "CityCode=330100"); //+ Navigat.CityCode);
int iArears = null != dtAreas ? dtAreas.Rows.Count : 0;

for (int i = 0; i < iArears; i++)
{
string strAreaID = dtAreas.Rows[i]["ID"].ToString();
string strAreaName = dtAreas.Rows[i]["AreaName"].ToString();

strFirstAreas += string.Format("<a href='{0}' " + (strAreaID == AreaID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodRestaurant.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + strAreaID + "&st=" + SortTypeID + strFilterConditions + strFilterConditions, AreaID, strAreaID, strAreaName, 0);//AreaID
}
divFirstArea.InnerHtml = strFirstAreas;
#endregion

#region 绑定二级区域
string strSecAreas = "<ul><li class='SX_C_r' style='padding:0px 10px;'>";
strSecAreas += "<a " + (string.IsNullOrEmpty(SecAreaID) || SecAreaID == "0" ? "class='sel_selected'" : "") + string.Format(" href='{0}' onmouseout='MouseLeave(this,{1},{2})'>全部</a>", "FoodRestaurant.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&sa=" + SecAreaID + "&st=" + SortTypeID + strFilterConditions, SecAreaID, 0);
DataTable dtSecAreas = HSSM_Public_DB.PblicQuery("ID,AreaName", "Area", "CityCode=330100"); //+ Navigat.CityCode);
int iSecArears = null != dtSecAreas ? dtSecAreas.Rows.Count : 0;

for (int i = 0; i < iSecArears; i++)
{
divSecArea.Visible = true;

string strSecAreaID = dtSecAreas.Rows[i]["ID"].ToString();
string strSecAreaName = dtSecAreas.Rows[i]["AreaName"].ToString();
strSecAreas += string.Format("<a href='{0}' " + (strSecAreaID == SecAreaID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodRestaurant.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&sa=" + strSecAreaID + "&st=" + SortTypeID + strFilterConditions, SecAreaID, strSecAreaID, strSecAreaName, 0);//AreaID
}
strSecAreas += "</li></ul>";

divSecArea.InnerHtml = strSecAreas;
#endregion

#endregion

效果图示例：



另一种案例：

根据第一级显示第二级，点击第一级的全部显示所有的数据，点击每个第一级条件名称分别显示每个第二级列表：

#region 绑定分类
string strClassifys = "<a " + (string.IsNullOrEmpty(ClassifyID) || ClassifyID == "0" ? "class='sel_selected'" : "") + string.Format(" href='{0}'   onmouseout='MouseLeave(this,{1},{2})'>全部<font>({3})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=0&ct=" + CategoryTwoID + "&st=" + SortTypeID + GetAttrAllParams,ClassifyID,0, 0);
DataTable dtClassifys = HSSM_Public_DB.PblicQuery("distinct Exp1,Exp2", "Product");
int iClassifys = null != dtClassifys ? dtClassifys.Rows.Count : 0;

for (int j = 0; j < iClassifys; j++)
{
string strClassifyID = dtClassifys.Rows[j]["Exp1"].ToString();
string strClassifyName = dtClassifys.Rows[j]["Exp2"].ToString();

strClassifys += string.Format("<a href='{0}' " + (strClassifyID == ClassifyID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=" + strClassifyID + "&st=" + SortTypeID + GetAttrAllParams, ClassifyID, strClassifyID, strClassifyName, 0);
}

divClassify.InnerHtml = strClassifys;

string strClass = string.Empty;

if (!string.IsNullOrEmpty(ClassifyID))
{
if (ClassifyID != "0")
{
divClass.Visible = true;

string strClassName = HSSM_Public_DB.OneFileds("Exp2", "Product", "Exp1=" + ClassifyID).ToString();

strClass += string.Format("<ul><li class='SX_C_l'>{0}：</li><li class='SX_C_r'>", strClassName);

DataTable dtClassifyClass = HSSM_Public_DB.PblicQuery("CategoryTwoID", "Product", "Exp1=" + ClassifyID);
string strTwoIDs = string.Empty;

for (int o = 0; o < dtClassifyClass.Rows.Count; o++)
{
if (o == dtClassifyClass.Rows.Count - 1)
strTwoIDs += dtClassifyClass.Rows[o]["CategoryTwoID"].ToString();
else
strTwoIDs += dtClassifyClass.Rows[o]["CategoryTwoID"].ToString() + ",";
}

DataTable dtClass = HSSM_Public_DB.PblicQuery("CategoryTwoID,CategoryTwoName", "CategoryTwo", "CategoryTwoID in (" + strTwoIDs + ")");
int iClass = null != dtClass ? dtClass.Rows.Count : 0;

for (int m = 0; m < iClass; m++)
{
string strCategoryTwoID = dtClass.Rows[m]["CategoryTwoID"].ToString();
string strCategoryTwoName = dtClass.Rows[m]["CategoryTwoName"].ToString();

strClass += string.Format("<a href='{0}'" + (strCategoryTwoID == CategoryTwoID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=" + ClassifyID + "&ct=" + strCategoryTwoID + "&st=" + SortTypeID + GetAttrAllParams, CategoryTwoID, strCategoryTwoID, strCategoryTwoName, 0);
}

strClass += "</li></ul>";
}
else
{
for (int p = 0; p < iClassifys; p++)
{
divClass.Visible = true;

string strClassID = dtClassifys.Rows[p]["Exp1"].ToString();
string strClassName = HSSM_Public_DB.OneFileds("Exp2", "Product", "Exp1=" + strClassID).ToString();

strClass += string.Format("<ul><li class='SX_C_l'>{0}：</li><li class='SX_C_r'>", strClassName);

DataTable dtClassifyClass = HSSM_Public_DB.PblicQuery("CategoryTwoID", "Product", "Exp1=" + strClassID);
string strTwoIDs = string.Empty;

for (int o = 0; o < dtClassifyClass.Rows.Count; o++)
{
if (o == dtClassifyClass.Rows.Count - 1)
strTwoIDs += dtClassifyClass.Rows[o]["CategoryTwoID"].ToString();
else
strTwoIDs += dtClassifyClass.Rows[o]["CategoryTwoID"].ToString() + ",";
}

DataTable dtClass = HSSM_Public_DB.PblicQuery("CategoryTwoID,CategoryTwoName", "CategoryTwo", "CategoryTwoID in (" + strTwoIDs + ")");
int iClass = null != dtClass ? dtClass.Rows.Count : 0;

for (int m = 0; m < iClass; m++)
{
string strCategoryTwoID = dtClass.Rows[m]["CategoryTwoID"].ToString();
string strCategoryTwoName = dtClass.Rows[m]["CategoryTwoName"].ToString();

strClass += string.Format("<a href='{0}'" + (strCategoryTwoID == CategoryTwoID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=" + strClassID + "&ct=" + strCategoryTwoID + "&st=" + SortTypeID + GetAttrAllParams, CategoryTwoID, strCategoryTwoID, strCategoryTwoName, 0);
}

strClass += "</li></ul>";
}
}
}

divClass.InnerHtml = strClass;
#endregion

效果图示例：

默认：



选中一个分类后：



以上是单属性的案例；

在商品选择中同一种商品可能需要提供各种属性选择，但是属性的个数是根据商品配置决定的，那么显示商品属性列表也需要根据具体情况而定：

#region 绑定属性列表
DataTable dtAttrs = HSSM_Public_DB.PblicQuery("ProductAttrbuteID,AttrbuteName", "ProductAttrbute", "CategoryOneID=" + CategoryOneID);
DataTable dtFilters = null;
string strFilters = string.Empty;

int iAttrs = null != dtAttrs ? dtAttrs.Rows.Count : 0;
string[] arrCurFilters = AttrFilterIDs;

for (int i = 0; i < iAttrs; i++)
{
string strCurAttrFilterID = arrCurFilters[i].ToString();
string strAttrID = dtAttrs.Rows[i]["ProductAttrbuteID"].ToString();
string strAttrName = dtAttrs.Rows[i]["AttrbuteName"].ToString();
dtFilters = HSSM_Public_DB.PblicQuery("ProductFilterID,FilterName", "ProductFilter", "ProductAttrbuteID=" + strAttrID);
string strCurAttrParams = string.Empty;

for (int h = 0; h < iAttrs; h++)
{
if (h == i)
{
strCurAttrParams += "&f" + (h + 1) + "=0";
}
else
{
strCurAttrParams += "&f" + (h + 1) + "=" + Server.HtmlEncode(arrCurFilters[h]);
}
}

dtFilters = HSSM_Public_DB.PblicQuery("ProductFilterID,FilterName", "ProductFilter", "ProductAttrbuteID=" + strAttrID);
int iFilters = null != dtFilters ? dtFilters.Rows.Count : 0;
strFilters += "<ul>";
strFilters += string.Format("<li class='F_C_l'>{0}：</li>", strAttrName);
strFilters += "<li class='F_C_r'>";
strFilters += "<a " + (string.IsNullOrEmpty(strCurAttrFilterID) || strCurAttrFilterID == "0" ? "class='sel_selected'" : "") + string.Format(" href='{0}' onmouseout='MouseLeave(this,{1},{2})'>全部<font>({3})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=" + ClassifyID + "&ct=" + CategoryTwoID + "&st=" + SortTypeID + strCurAttrParams, strCurAttrFilterID, 0, 0);

for (int k = 0; k < iFilters; k++)
{
string strFilterID = dtFilters.Rows[k]["ProductFilterID"].ToString();
string strFilterName = dtFilters.Rows[k]["FilterName"].ToString();
string strCurParams = string.Empty;

for (int j = 0; j < iAttrs; j++)
{
if (j == i)
{
strCurParams += "&f" + (j + 1) + "=" + Server.HtmlEncode(strFilterID);
}
else
{
strCurParams += "&f" + (j + 1) + "=" + Server.HtmlEncode(arrCurFilters[j]);
}
}

strFilters += string.Format("<a href='{0}' " + (strFilterID == strCurAttrFilterID ? "class='sel_selected'" : "") + " onmouseout='MouseLeave(this,{1},{2})'>{3}<font>({4})</font></a>", "FoodPackage.aspx?Page=" + ((PageIndex - 1) <= 0 ? 1 : (PageIndex - 1)) + "&v1=" + v1 + "&v2=" + v2 + "&co=" + CategoryOneID + "&a=" + AreaID + "&c=" + ClassifyID + "&ct=" + CategoryTwoID + "&st=" + SortTypeID + strCurParams, strCurAttrFilterID, strFilterID, strFilterName, 0);
}

strFilters += "</li>";
strFilters += "</ul>";
}

divFilter.InnerHtml = strFilters;
#endregion

采用的办法是根据属性个数传递相同个数的属性参数，然后绑定时获取参数情况决定该属性值是否选中：

strCurParams += "&f" + (j + 1) + "=" + Server.HtmlEncode(strFilterID);

而且如果当前选择的属性值是传过来的属性值，则指定该属性的参数值为当前被选择项的属性值；

当鼠标离开这个属性的时候，这个属性的值被指定为传来的属性值：

strCurParams += "&f" + (j + 1) + "=" + Server.HtmlEncode(arrCurFilters[j]);

效果图示例：

默认：



点击后：



2.前台：

部分界面代码：

<div class="F_Class">
<ul id="ulArea" style="border: none;">
<li class="F_C_l">区域：</li>
<li id="liArea" class="F_C_r" runat="server"></li>
</ul>
<ul id="ulClassify">
<li class="F_C_l">分类：</li>
<li id="liClassify" class="F_C_r" style="height: auto;" runat="server">
<div id="divClassify" runat="server">
</div>
<div id="divClass" class="SX_class" runat="server" visible="false">
</div>
</li>
</ul>
<div id="divFilter" runat="server">
</div>
</div>

Jquery代码：

<script type="text/javascript">
$(function () {
$("#liArea a").mouseover(function () {
$(this).addClass("sel_selected");
});

$("#divClassify a").mouseover(function () {
$(this).addClass("sel_selected");
});

$("#divClass a").mouseover(function () {
$(this).addClass("sel_selected");
});

$("#divFilter a").mouseover(function () {
$(this).addClass("sel_selected");
});
});

//鼠标离开属性时
function MouseLeave(obj, a, b) {
if ((a == 0 && a != b) || (a != 0 && a != b))
$(obj).removeClass("sel_selected");
}
</script>

当鼠标放上去时，追加选中的样式sel_selected，而当鼠标离开时需要判断当前选中的值是否是传过来的值，如果是，则样式不变，否则去掉样式，这样每次只能选中一个；