可过滤的复选框列表

• 下载示例 - 52.6 KB

引言

在我们的所有 Web 项目中，我们都希望在尽可能小的空间内提供丰富的用户界面。 其中一项需求是提供可过滤的复选框列表。 这允许用户在文本框中输入一些字符来过滤复选框列表项。 下面的截图可以更好地理解我们将要检查的功能。

为了实现上述目标，我使用了 JQuery (https://jqueryjs.cn/) 和一个名为 uiTableFilter (http://plugins.jquery.com/project/uiTableFilter) 的插件。

必备组件

• 来自 https://jqueryjs.cn/ 的最新 Jquery 库
• Jquery 插件：http://plugins.jquery.com/project/uiTableFilter
• SDK：Visual Studio

使用代码 - ASPX 页面

我向 .aspx 页面添加了三个控件。

• 文本框，用户可以在其中输入内容以过滤复选框列表。
• 嵌套在表格中的 Repeater 控件。 这将显示与关联文本一起的复选框列表。 用户可以选择复选框列表项。 Repeater 控件将与代码隐藏页面中的产品列表绑定。
• “Go”按钮，将显示从复选框列表中选择的项目。

Filter:
<asp:TextBox ID="filter" CssClass="serach" runat="server" Text="" MaxLength="30">
</asp:TextBox>
<asp:Button runat="server" ID="btnSearch" Text="Go" OnClick="btnSearch_Click" />
<div id="dvProductsHolder">
    <table id="tableProducts" cellpadding="0" cellspacing="0">
        <tr style="background-color: #C5BBAF; padding-bottom: 20px">
            <td>
                <asp:CheckBox runat="server" ID="chkAll" />ALL
            </td>
        </tr>
        <asp:Repeater ID="GridView1" runat="server">
            <AlternatingItemTemplate>
                <tr style="background-color: White; padding: 2px">
                    <td>
                        <asp:CheckBox runat="server" ID="chkProduct" 
				Text='<%# Bind("Name")%>' />
                    </td>
                </tr>
            </AlternatingItemTemplate>
            <ItemTemplate>
                <tr style="background-color: #E3EAEB; padding: 2px">
                    <td>
                        <asp:CheckBox runat="server" ID="chkProduct" 
				Text='<%# Bind("Name")%>' />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>
</div>
<div id="Div1" runat="server">
    <asp:Label runat="server" ID="lblSelectedValues"></asp:Label>
</div>    

JQuery 集成

添加对 Jquery 库和插件脚本的引用。

<script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" src="JQuery/jquery.uitablefilter.js"></script>

这是用于启用上述讨论功能的 JavaScript 代码。 代码带有内联注释，易于理解。

 <script language="javascript">
        $(document).ready(function() {
            //Hide div that has the check box list
            $("#dvProductsHolder").hide();
            //Show check box list when user clicks on the textbox, just below the textbox.
            $("#filter").click(function() {
                $('#dvProductsHolder').css("top", $(this).offset().top + 
	       $(this).height() + 5);
                $('#dvProductsHolder').css("left", $(this).offset().left - 9);
                $("#dvProductsHolder").slideDown("slow");
            });
            //Get the instance of the table, on which you want to integrate 
            //the table filter
            var theTable = $("#tableProducts")
            //Invoke uiTableFilter plugin on keyup event of the filter textbox
            $("#filter").keyup(function() {
                $.uiTableFilter(theTable, this.value);
            })
            //Select/deselect all checkbox list when "ALL" is clicked
            $("#chkAll").click(function() {
                var obj = $(this);
                if (obj[0].checked == true) {
                    $("input[type='checkbox']").each(function() {
                        $(this)[0].checked = true;
                    });
                }
                else {
                    $("input[type='checkbox']").each(function() {
                        $(this)[0].checked = false;
                    });
                }
            });
            //Hide the filter list on mouse leave and populate the hidden variable with 
            //the values selected in the check box list
            $("#dvProductsHolder").mouseleave(
           function() {
               var selectedValues = '';
               $("input[type='checkbox']").each(function() {
                   if ($(this)[0].checked) {
                       selectedValues = selectedValues + $("#" + 
				$(this)[0].id).next().text() + ";";
                   }
               });
               $("#hdnSelectedValues").val(selectedValues);
               $("#dvProductsHolder").slideUp("slow");
           }
         );
        });
    </script>

摘要

我已在 Internet Explorer 8.0、Google Chrome 5.0、Firefox 3.0.3 版本中测试了该示例。 希望这能帮助那些正在寻找可过滤复选框列表功能的人。

历史

• 2011 年 3 月 8 日：初始发布