开发者社区> 科技小先锋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js实现DropDownList的数据筛选

简介:
+关注继续查看

     js实现DropDownList的数据筛选

  背景:

      前段时间做项目时遇到了在第三方控件中进行数据的筛选问题,但用到的第三方控件提供的筛选并不能很好的满足我们的需求,然后就自己想办法完善所需求的数据筛选,通过查找资料最后决定通过js并结合用到的第三方控件的属性和方法实现对DropDownList控件的数据筛选来完成,以前没怎么接写过js,对其还是比较陌生的,还好通过找资料,最终完成了功能的实现。

  具体实现:

      首先是根据需求确定筛选的列,并根据实际情况写出绑定的方法名及要触发的事件,代码如下:


  1. <telerik:RadComboBox ID="RadComboBox3" DataTextField="Rate" DataValueField="Rate" AppendDataBoundItems="true" 
  2.                             SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Rate").CurrentFilterValue %>' 
  3.                             runat="server" OnClientSelectedIndexChanged="RateListIndexChanged" Width="45px" 
  4.                             OnLoad="InitRateList" DropDownWidth="80"> 
  5.                             <Items> 
  6.                                 <telerik:RadComboBoxItem Text="全部" /> 
  7.                             </Items> 
  8.                         </telerik:RadComboBox> 

需要说明下,此第三方控件中的RadComboBox相当于Asp控件中的DropDownList,这里写好RadComboBox要触发的事件SelectedValue和方法名RateListIndexChanged。其中的InitRateList是初始化RadComboBox控件的后台方法一会会提到。

接下来是js实现部分,代码如下:

 


  1. <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server"> 
  2.                             <script type="text/javascript"> 
  3.                                 function RateListIndexChanged(sender, args) { 
  4.                                     var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); 
  5.                                     var filterVal = args.get_item().get_value(); 
  6.                                     if (filterVal == "") { 
  7.                                         tableView.filter("Rate", filterVal, "NoFilter"); 
  8.                                     } 
  9.                                     else if (filterVal == 0.6) { 
  10.                                         tableView.filter("Rate", 0.6, "GreaterThanOrEqualTo"); 
  11.                                     } 
  12.                                     else if (filterVal == "0.35 0.6") { 
  13.                                         tableView.filter("Rate", "0.35 0.6", "Between"); 
  14.                                     } 
  15.                                     else if (filterVal == "0.15 0.35") { 
  16.                                         tableView.filter("Rate", "0.15 0.35", "Between"); 
  17.                                     } 
  18.                                     else if (filterVal == 0.15) { 
  19.                                         tableView.filter("Rate", 0.15, "LessThan"); 
  20.                                     } 
  21.                                 } 
  22.                             </script> 
  23.                         </telerik:RadScriptBlock> 

这里是js实现RadComboBox筛选的功能,其中tableView调用的filter方法是RadComboBox内部提供的我们在此借用,具体不做讨论。

下面贴出上面提到的初始化RadComboBox的方法InitRateList的代码:

 


  1. //初始化利率列表 
  2.     public void InitRateList(object sender, EventArgs e) 
  3.     { 
  4.         RadComboBox droplist = (RadComboBox)sender; 
  5.         droplist.Items.Add(new RadComboBoxItem("大于0.6", "0.6")); 
  6.         droplist.Items.Add(new RadComboBoxItem("0.35-0.6", "0.35 0.6")); 
  7.         droplist.Items.Add(new RadComboBoxItem("0.15-0.35", "0.15 0.35")); 
  8.         droplist.Items.Add(new RadComboBoxItem("小于0.15", "0.15")); 
  9.     } 

到处处,整个功能就实现了,不过说到底还是用的第三方控件提供的js方法的借口,算不上真正的js实现DropDownList的数据筛选吧,大家有兴趣可以自己尝试封装js的方法实现DropDownList的数据筛选,最后贴出整体效果吧。

 

这里显示所有能筛选的数据范围,

 

这里是筛选后的结果,圆圈中的筛选条件是0.15-0.35由于格式的控制在此没有显示完全。



本文转自HDDevTeam 51CTO博客,原文链接:http://blog.51cto.com/hddev/869523,如需转载请自行联系原作者

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JavaScript】-------javaScript实现两个时间相差多少分钟! 实例代码
【JavaScript】-------javaScript实现两个时间相差多少分钟! 实例代码
120 0
js之如何在JavaScript中实现睡眠功能
js之如何在JavaScript中实现睡眠功能
4997 0
JavaScript使用Modbus协议实现RTU设备连云
在阿里云物联网平台下发物模型属性设置数据,HaaS600Kit 接收并解析云端数据后控制 Modbus 继电器设备进行开关动作。
707 0
使用JavaScript在HaaS EDU K1上实现文字显示
当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了,这块开发板带着OLED屏,而底层的AliOS Things已经支持图形库,所以可以通过轻应用的开发方式,尝试进行GUI相应的开发。
229 0
带你读《区块链开发实战: 基于JavaScript的公链与DApp开发》之一:自己动手实现一个区块链系统
本书用三个部分讲解了区块链技术以及Asch的相关实践,第一部分讲解了区块链技术的基本概念,并用300行代码实现了一个最小的、可运行的区块链;第二部分分析Asch的源码,讲解Asch的实现原理;第三部分介绍了基于Asch的侧链技术的DApp开发实战。
2436 0
javascript--实现购物车的实例分享
购物车对于大部分用户来说肯定都不陌生,每当双十一、双十二,我们都要把自己想要买的东西,提前加入购物车中,等到11月11号的凌晨抢时间抓紧下单。这对于用户来说,既可以管理自己想要购买的物品,又可以在购物车中进行选择。
2183 0
javascript教程:实现函数柯里化与反柯里化
下面来一起看看究竟什么是函数柯里化 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术。其由数学家Haskell Brooks Curry提出,并以curry命名。
1275 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS 语言在引擎级别的执行过程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载