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