js实现DropDownList的数据筛选

          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的数据筛选，最后贴出整体效果吧。

 

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

 

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