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,如需转载请自行联系原作者

 

相关文章
|
13天前
|
JSON JavaScript 前端开发
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
|
17天前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
18 1
|
23天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
21 2
|
3天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
26天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
107 2
|
1月前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
14天前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
|
14天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法