js实现DropDownList的数据筛选 推荐
2012-05-19 21:44
288 查看
js实现DropDownList的数据筛选
背景:前段时间做项目时遇到了在第三方控件中进行数据的筛选问题,但用到的第三方控件提供的筛选并不能很好的满足我们的需求,然后就自己想办法完善所需求的数据筛选,通过查找资料最后决定通过js并结合用到的第三方控件的属性和方法实现对DropDownList控件的数据筛选来完成,以前没怎么接写过js,对其还是比较陌生的,还好通过找资料,最终完成了功能的实现。
具体实现:
首先是根据需求确定筛选的列,并根据实际情况写出绑定的方法名及要触发的事件,代码如下:
<telerik:RadComboBox ID="RadComboBox3" DataTextField="Rate" DataValueField="Rate" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Rate").CurrentFilterValue %>' runat="server" OnClientSelectedIndexChanged="RateListIndexChanged" Width="45px" OnLoad="InitRateList" DropDownWidth="80"> <Items> <telerik:RadComboBoxItem Text="全部" /> </Items> </telerik:RadComboBox>
需要说明下,此第三方控件中的RadComboBox相当于Asp控件中的DropDownList,这里写好RadComboBox要触发的事件SelectedValue和方法名RateListIndexChanged。其中的InitRateList是初始化RadComboBox控件的后台方法一会会提到。
接下来是js实现部分,代码如下:
<telerik:RadScriptBlock ID="RadScriptBlock4" runat="server"> <script type="text/javascript"> function RateListIndexChanged(sender, args) { var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); var filterVal = args.get_item().get_value(); if (filterVal == "") { tableView.filter("Rate", filterVal, "NoFilter"); } else if (filterVal == 0.6) { tableView.filter("Rate", 0.6, "GreaterThanOrEqualTo"); } else if (filterVal == "0.35 0.6") { tableView.filter("Rate", "0.35 0.6", "Between"); } else if (filterVal == "0.15 0.35") { tableView.filter("Rate", "0.15 0.35", "Between"); } else if (filterVal == 0.15) { tableView.filter("Rate", 0.15, "LessThan"); } } </script> </telerik:RadScriptBlock>
这里是js实现RadComboBox筛选的功能,其中tableView调用的filter方法是RadComboBox内部提供的我们在此借用,具体不做讨论。
下面贴出上面提到的初始化RadComboBox的方法InitRateList的代码:
//初始化利率列表 public void InitRateList(object sender, EventArgs e) { RadComboBox droplist = (RadComboBox)sender; droplist.Items.Add(new RadComboBoxItem("大于0.6", "0.6")); droplist.Items.Add(new RadComboBoxItem("0.35-0.6", "0.35 0.6")); droplist.Items.Add(new RadComboBoxItem("0.15-0.35", "0.15 0.35")); droplist.Items.Add(new RadComboBoxItem("小于0.15", "0.15")); }
到处处,整个功能就实现了,不过说到底还是用的第三方控件提供的js方法的借口,算不上真正的js实现DropDownList的数据筛选吧,大家有兴趣可以自己尝试封装js的方法实现DropDownList的数据筛选,最后贴出整体效果吧。
![](http://blog.51cto.com/attachment/201205/214201553.jpg)
这里显示所有能筛选的数据范围,
![](http://blog.51cto.com/attachment/201205/214308293.jpg)
这里是筛选后的结果,圆圈中的筛选条件是0.15-0.35由于格式的控制在此没有显示完全。
相关文章推荐
- vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
- easyui的datagrid用js插入数据等编辑功能的实现
- JS留言功能的简单实现案例(推荐)
- 前端js 筛选json数据 可用框架 linq.js
- Vue.js——基于$.ajax实现数据的跨域增删查改
- JS数组去掉重复数据只保留一条的实现代码
- 推荐js实现商品分类到搜索栏友好提示(人机交互)第1/3页
- 用JAVA实现将execl表格中多行数据复制粘贴到现有页面上(js控制)
- 用js实现列表框数据对换的小例题
- DropDownList绑定Xml数据的实现
- JS实现页面数据无限加载
- java jsp js 实现地区表 三级联动,并修改时数据回显
- 使用SQL Server Analysis Services数据挖掘的关联规则实现商品推荐功能(六)
- python 实现斐波那契数列,动态删除历史数据demo,很久以前写的,分享给大家 推荐
- Vue.js与angular在数据实现的思考
- TextWatcher实现输入关键字筛选数据
- 用js实现层随着内容大小动态渐变改变 推荐
- 基于Zetta(Node.js)的数据接收端server中,可接收数量不定传感数据的IoT APP实现
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- Asp.Net Ajax+WCF Service+ADO.NET Entity Framework实现数据列表,数据筛选,分页,排序,删除