类似京东商城筛选模块
最近做了个类似京东商城筛选模块的功能,在网上找了些资料,再加了些自己的思路做了这样一个功能,在这里分享一下,主要针对新手,希望大家共同探讨
前台是两个repeater嵌套
<asp:Repeater ID="rptList" runat="server" onitemdatabound="rptList_ItemDataBound"><ItemTemplate> <tr><td><%# Eval("PropertyName")%></td><td><asp:Literal ID="litPropertyValueAll" runat="server" /></td><td><asp:Repeater ID="rptValue" runat="server" OnItemDataBound="rptValue_ItemDataBound"><ItemTemplate> <asp:Label ID="lblHidden" runat="server" Visible="false" /><span style="color:#ccc;">|</span> <asp:Literal ID="litPropertyValue" runat="server" /></ItemTemplate></asp:Repeater> </td></tr></ItemTemplate></asp:Repeater>
后台
/// <summary>/// 属性数据绑定/// </summary>/// <param name="sender"></param>/// <param name="e"></param> protected void rptList_ItemDataBound(object sender, RepeaterItemEventArgs e) {if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Repeater rpt = (Repeater)e.Item.FindControl("rptValue");int id = ((ProductCategorySearchPropertyModel)e.Item.DataItem).ID; rpt.DataSource = Product_Category_SearchProperty_ValueBLL.GetPropertyValue(id); rpt.DataBind();
#region 所有属性 //所有条件 string allProperty = "";foreach (RepeaterItem item in rpt.Items) { Label lab = (Label)item.FindControl("lblHidden"); allProperty = lab.Text; } Literal litPropertyValue = (Literal)e.Item.FindControl("litPropertyValueAll"); litPropertyValue.Text = allProperty; #endregion } }
/// <summary>/// 属性值数据绑定/// </summary>/// <param name="sender"></param>/// <param name="e"></param> protected void rptValue_ItemDataBound(object sender, RepeaterItemEventArgs e) {#region 解析Url属性参数 //解析Url传的属性参数 if (!string.IsNullOrEmpty(searchPropertyIDReq)) { ArrayList tempSearchPropertyValueIDArrayList = new ArrayList();string[] tempSearchPropertyValueIDArray = searchPropertyIDReq.Split('-');foreach (string item in tempSearchPropertyValueIDArray) {if (string.IsNullOrEmpty(item)) {continue; } try { Convert.ToInt32(item); }catch {continue; } tempSearchPropertyValueIDArrayList.Add(Convert.ToInt32(item)); } searchPropertyValueIDArray = (int[])tempSearchPropertyValueIDArrayList.ToArray(typeof(int)); } #endregion #region 绑定商品列表 this.rptProductList.DataSource = ProductBLL.SearchProduct(searchPropertyValueIDArray);this.rptProductList.DataBind(); #endregion #region rptValue 数据绑定 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {string curPropertyName = DataBinder.Eval(e.Item.DataItem, "PropertyName").ToString();string curPropertyValue = DataBinder.Eval(e.Item.DataItem, "PropertyValue").ToString();//当前RUL string curPropertyValueID = DataBinder.Eval(e.Item.DataItem, "ID").ToString();string cNo = DataBinder.Eval(e.Item.DataItem, "cNo").ToString(); bool isHasCurrentPropertyName = false;int? urlPropertyValueID = null;if (searchPropertyValueIDArray != null) {foreach (int searchPropertyValueID in searchPropertyValueIDArray) { ProductCategorySearchPropertyValueModel properValue = Product_Category_SearchProperty_ValueBLL.GetPropertyValueA(searchPropertyValueID);int searchPropertyID = properValue.SearchPropertyID; ProductCategorySearchPropertyModel searchProperty = Product_Category_SearchPropertyBLL.GetSearchPropertyA(searchPropertyID); if (searchProperty.PropertyName == curPropertyName) { urlPropertyValueID = searchPropertyValueID; isHasCurrentPropertyName = true;break; } } } //原始URL string searchPropertyIDUrl = "";if (searchPropertyValueIDArray != null) {foreach (int searchPropertyValueID in searchPropertyValueIDArray) {if (searchPropertyValueID != urlPropertyValueID) { searchPropertyIDUrl += "-" + searchPropertyValueID.ToString(); } } } //具体属性 Literal litPropertyValue = (Literal)e.Item.FindControl("litPropertyValue"); Label hiddenValue = (Label)e.Item.FindControl("lblHidden"); if (isHasCurrentPropertyName) {if (urlPropertyValueID != null && urlPropertyValueID.ToString() == curPropertyValueID) { litPropertyValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".aspx\" class=\"curSearchProperty\" isCurrent=\"true\">" + curPropertyValue + "</a>"; }else { litPropertyValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".aspx\" class=\"normal\">" + curPropertyValue + "</a>"; } }else { litPropertyValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".aspx\" class=\"normal\">" + curPropertyValue + "</a>"; } hiddenValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + ".aspx\" class=\"allProperty\" isCurrent=\"true\">全部</a>"; } #endregion }
这样的基本效果就实现了
转载于:https://www.cnblogs.com/Kiss920Zz/archive/2011/12/20/2294225.html
类似京东商城筛选模块相关推荐
- 类似京东商城客户端应用iOS源码
IOS商城,电商开源APP,类似京东商城,天猫商城,淘宝,去年开发的一个项目,现在把它分享出来.服务端是java 商城,对应项目是Shop-for-JavaWeb1.App使用MVC框架完成开发.2. ...
- swift 组件化_京东商城订单模块基于 Swift 的改造方案与实践
ABI Stability & Module Stability 以及Swift优势 2019年Swift 5发布,标志这门语言迎来了一个重大的里程碑.与之前的版本相比除了一些基础语法的改变, ...
- 京东商城陷翻新门 揭了谁的丑
京东商城陷"翻新门" 揭了谁的丑 文/朱帅 京东商城最近惹上了丑闻,事件起源于11月15日<劳动报>记者王晓晔刊发的一篇文章,该媒体报道:"上海市的余先生今年 ...
- 基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app ...
- 基于vue开发的多条件联动筛选特效(类似京东/淘宝/中国移动)
基于vue实现的多条件联动筛选功能(类似中国移动商城),选中,反选,删除功能. UI库用的ivew 先来张实现的效果图 展开时候的效果 收起时候的效果 代码如下: 1. html(用了iview的UI ...
- 仿手机端京东商城html源码_web前端入门到实战:制作仿京东商城-商品列表商品筛选功能...
这次实现一个仿京东商城-商品列表商品筛选的功能 一.html代码 已选条件: 品牌: 全部 惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕 戴尔 三星 索尼 东芝 ...
- 商城 商品模块 数据库 表设计
商城 商品模块 数据库 表设计 要实现一个商城,对于商品模块中的数据库表设计不懂,主要是:相同类别的产品的产品参数相同,不同类别的不同,这里就不懂要怎么设计了,所以上网找几篇博客了解. 什么是SPU. ...
- Scrapy练习——爬取京东商城商品信息
刚刚接触爬虫,花了一段时间研究了一下如何使用scrapy,写了一个比较简单的小程序,主要用于爬取京东商城有关进口牛奶页面的商品信息,包括商品的名称,价格,店铺名称,链接,以及评价的一些信息等.简单记录 ...
- 【CTO论道】京东商城李大学:京东研发团队管理经验谈
摘要:在今年SDCC的CTO论道特色论坛上,京东商城高级副总裁李大学与二十多位受邀参会的国内一线技术管理者一起做了交流,并发表主题演讲.演讲中,李大学分享了京东研发团队的组织架构以及自己的研发团队管理 ...
- 基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)
网上购物商城系统以弥补传统购物方式的弊端.在目前的商城里,如果采用网上商城方式,用户购物时就不需要到店里面排队,这样不仅能实时地了解商品的特色,而且方便了顾客,同时也减轻了商城的服务压力.随着WLAN ...
最新文章
- 一些JSON相关的函数
- JQuery eval函数
- Linux下cat命令各种用法
- jsp项目开发案例_Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)life...
- 思科CCNA第一学期期末考试答案
- Java文档阅读笔记-JPA Tutorial
- java中 银行存款取款_java银行存款取款
- 物联网核心安全系列——智能家居与数据安全问题
- 第29章:字符串编辑距离
- c/c++再学习:C与Python相互调用
- 产品经理数据分析入门
- linux安装Java环境
- 部分PTA自测题答案(仅参考)
- 关于中英文等宽字体的设置
- Q 语言初学者系列:(2)基本数据类型
- VM虚拟机的安装及安装操作系统
- UT000054: The maximum size 1048576 for an individual file in a multipart req
- 全球创业新趋势:私域流量+DTC,蜂巢跨境私域课堂
- Android 进阶笔记,包含常用的技术框架、博客社区、书籍等。
- 利用requests库抓取猫眼电影排行