当前位置:编程学习 > JS >>

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.                   

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,