日期:2014-05-17  浏览次数:20970 次

类似京东筛选商品效果
我想要实现的是类似京东筛选商品属性的效果,我现在做到的如下图:

当我点击品牌时,点击的这一项到了已选条件中,现在问题是我在点击其他属性时,就会把已选条件中的品牌这一选项替代,但我想要的是,在点击其他属性,比如价格,那价格就会排到已选条件品牌的后面,品牌在前面保持不变,请问要怎么实现?

protected void DataList2_ItemCommand(object source, DataListCommandEventArgs e)
    {
        int cs_id = Convert.ToInt32(e.CommandArgument);
        if (e.CommandName == "go")
        {
            Panel1.Visible = true;
            List<Comgezi_ShuxingInfo> list1 = new List<Comgezi_ShuxingInfo>();
            List<Comgezi_ShuxingInfo> list2 = Comgezi_ShuxingBiz.SelectListByCsId(cs_id);
            foreach (Comgezi_ShuxingInfo com in list2)
            {
                Comgezi_ShuxingInfo shuxing = Comgezi_ShuxingBiz.SelectByCsId(com.Parent_id);
                list1.Add(shuxing);
            }
            DataList3.DataSource = list1;
            DataList3.DataBind();
            for (int i = 0; i < DataList3.Items.Count; i++)
            {
                LinkButton lbtn = (LinkButton)DataList3.Items[i].FindControl("LinkButton2");
                Comgezi_ShuxingInfo name = Comgezi_ShuxingBiz.SelectByCsId(cs_id);
                lbtn.Text = name.Cs_name;
            }
        }
    }

DataList2是绑定的是所有属性,当点击某个属性后就绑定到DataList3显示
------解决方案--------------------
前台用JS直接拼出URL条件,这类示例网上很多吧
------解决方案--------------------
可以用传递URL来控制显示已选项和具体的SQL拼接
比如品牌的每一项Id为Bi
尺寸的每一项Id为Si
价格的每一项的Id为Pi

你页面的参数形式为s=b1-p2
表示选择了联想和6000-8999的价格,
假如我此时点击三星(SumSung),则用javascript判断当前已选项中的b前缀的项,发现已经有b1了,则替换成b2
,再进行URL跳转,此时页面传值为s=b2-p2

这样应该比较容易实现吧
------解决方案--------------------
这不就是Sql语句拼接嘛!
------解决方案--------------------
这种东西明显用ajax才友好,不管你是通过ajax插件,还是自己手写js

思路非常简单,如果用Jquery的话

假定上面显示的是sp_Title
下面的所有超链接选项都有一个自定义attr比如品牌哪里就有 t="品牌",选定项都有一个特定的class比如.selected

那么最终js就是
var h='';
var sels = $('a.selected');
for(var i=0;i<sels.length;i++)
{
   h+=