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，而当鼠标离开时需要判断当前选中的值是否是传过来的值，如果是，则样式不变，否则去掉样式，这样每次只能选中一个；