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的資料篩選，最後貼出整體效果吧。

本文轉自HDDevTeam 51CTO部落格，原文連結：http://blog.51cto.com/hddev/869523，如需轉載請自行聯系原作者