堆栈内存溢出
  简体   繁体   English

Kendo UI multi选择带有过滤器的下拉列表，然后选择所有选项

[英]Kendo UI multi select drop down with filter and select all options

 原文  2016-11-10 09:44:31  6   2    javascript/ jquery/ kendo-ui/ multi-select

问题描述

I need a kendo ui dropdown list with the following features. 我需要具有以下功能的kendo ui下拉列表。

  1. Multi select dropdown with a select check box to check multiple options at at time. 带选择复选框的多选下拉菜单可一次检查多个选项。
  2. Select all checkbox as a header template, on which when I click on it, all the filtered search results of the option is selected. 选择所有复选框作为标题模板，当我单击它时，将选中该选项的所有过滤后的搜索结果。

所需的解决方案

I have gone through many references and find a close solution from telrik. 我浏览了许多参考资料，并找到了telrik的详细解决方案。 In which my first requirement is satisfied. 我的第一个要求得到满足。 I have attached the code snippet here with. 我已经在这里附上了代码片段。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="example" role="application">
        <div class="demo-section k-header">
            <h2>Invite Attendees</h2>
            <label for="required">Required</label>
            <select id="required" multiple="multiple" data-placeholder="Select attendees...">
                <option selected>Steven White</option>
                <option>Nancy King</option>
                <option>Nancy Davolio</option>
                <option>Robert Davolio</option>
                <option>Michael Leverling</option>
                <option>Andrew Callahan</option>
                <option>Michael Suyama</option>
                <option selected>Anne King</option>
                <option>Laura Peacock</option>
                <option>Robert Fuller</option>
                <option>Janet White</option>
                <option>Nancy Leverling</option>
                <option>Robert Buchanan</option>
                <option>Margaret Buchanan</option>
                <option selected>Andrew Fuller</option>
                <option>Anne Davolio</option>
                <option>Andrew Suyama</option>
                <option>Nige Buchanan</option>
                <option>Laura Fuller</option>
            </select>
        </div>
        <style>
            .k-list .k-item {}

            .k-item input {}
        </style>
        <script>
            $(document).ready(function () {
                var checkInputs = function (elements) {
                    elements.each(function () {
                        var element = $(this);
                        var input = element.children("input");

                        input.prop("checked", element.hasClass("k-state-selected"));
                    });
                };
                // create MultiSelect from select HTML element
                var required = $("#required").kendoMultiSelect({
                    itemTemplate: "<input type='checkbox'/> #:data.text#",
                    autoClose: false,
                    dataBound: function () {
                        var items = this.ul.find("li");
                        setTimeout(function () {
                            checkInputs(items);
                        });
                    },
                    change: function () {
                        var items = this.ul.find("li");
                        checkInputs(items);
                    }
                }).data("kendoMultiSelect");
            });
        </script>
    </div>
</body>

</html>

How can I achieve my second requirement, select all option that selects my filtered search result. 如何满足我的第二个要求，请选择所有选项，以选择过滤的搜索结果。 I'm looking foe the kend ui Multi Select option itself. 我在寻找kend ui Multi Select选项本身。 I'm not interested in jQuery multi select drop downs. 我对jQuery多选下拉列表不感兴趣。 Looking forward for help. 期待获得帮助。 Thanks in advance. 提前致谢。

2 个解决方案

解决方案1
 3 已采纳  2016-11-10 13:38:10

Thanks for the solution Vispan good work. 感谢您的解决方案Vispan的出色工作。 I have developed the solution from the code that you have posted. 我已经根据您发布的代码开发了解决方案。 I'm here sharing this code since this might be very helpful for some of you. 我在这里共享此代码，因为这对某些人可能非常有帮助。 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(function () {



            var data = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"},{"name":"American Samoa"},{"name":"Andorra"},{"name":"Angola"},{"name":"Anguilla"},{"name":"Antarctica"},{"name":"Antigua and Barbuda"},{"name":"Argentina"},{"name":"Armenia"},{"name":"Aruba"},{"name":"Australia"},{"name":"Austria"},{"name":"Azerbaijan"},{"name":"Bahamas"},{"name":"Bahrain"},{"name":"Bangladesh"},{"name":"Barbados"},{"name":"Belarus"},{"name":"Belgium"},{"name":"Belize"},{"name":"Benin"},{"name":"Bermuda"},{"name":"Bhutan"},{"name":"Bolivia"},{"name":"Bonaire"},{"name":"Bosnia and Herzegovina"},{"name":"Botswana"},{"name":"Bouvet Island"},{"name":"Brazil"},{"name":"British Indian Ocean Territory"},{"name":"British Virgin Islands"},{"name":"Brunei"},{"name":"Bulgaria"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cambodia"},{"name":"Cameroon"},{"name":"Canada"},{"name":"Cape Verde"},{"name":"Cayman Islands"},{"name":"Central African Republic"},{"name":"Chad"},{"name":"Chile"},{"name":"China"},{"name":"Christmas Island"},{"name":"Cocos (Keeling) Islands"},{"name":"Colombia"},{"name":"Comoros"},{"name":"Republic of the Congo"},{"name":"Democratic Republic of the Congo"},{"name":"Cook Islands"},{"name":"Costa Rica"},{"name":"Côte d'Ivoire"},{"name":"Croatia"},{"name":"Cuba"},{"name":"Curaçao"},{"name":"Cyprus"},{"name":"Czech Republic"},{"name":"Denmark"},{"name":"Djibouti"},{"name":"Dominica"},{"name":"Dominican Republic"},{"name":"Ecuador"},{"name":"Egypt"},{"name":"El Salvador"},{"name":"Equatorial Guinea"},{"name":"Eritrea"},{"name":"Estonia"},{"name":"Ethiopia"},{"name":"Falkland Islands"},{"name":"Faroe Islands"},{"name":"Fiji"},{"name":"Finland"},{"name":"France"},{"name":"French Guiana"},{"name":"French Polynesia"},{"name":"French Southern and Antarctic Lands"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Georgia"},{"name":"Germany"},{"name":"Mali"},{"name":"Malta"},{"name":"Marshall Islands"},{"name":"Martinique"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Mayotte"},{"name":"Mexico"},{"name":"Micronesia"},{"name":"Moldova"},{"name":"Monaco"},{"name":"Mongolia"},{"name":"Montenegro"},{"name":"Montserrat"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Myanmar"},{"name":"Namibia"},{"name":"Nauru"},{"name":"Nepal"},{"name":"Netherlands"},{"name":"New Caledonia"},{"name":"New Zealand"},{"name":"Nicaragua"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Niue"},{"name":"Norfolk Island"},{"name":"North Korea"},{"name":"Northern Mariana Islands"},{"name":"Norway"},{"name":"Oman"},{"name":"Pakistan"},{"name":"Palau"},{"name":"Palestine"},{"name":"Panama"},{"name":"Papua New Guinea"},{"name":"Paraguay"},{"name":"Peru"},{"name":"Philippines"},{"name":"Pitcairn Islands"},{"name":"Poland"},{"name":"Portugal"},{"name":"Turks and Caicos Islands"},{"name":"Tuvalu"},{"name":"Uganda"},{"name":"Ukraine"},{"name":"United Arab Emirates"},{"name":"United Kingdom"},{"name":"United States"},{"name":"United States Minor Outlying Islands"},{"name":"United States Virgin Islands"},{"name":"Uruguay"},{"name":"Uzbekistan"},{"name":"Vanuatu"},{"name":"Venezuela"},{"name":"Vietnam"},{"name":"Wallis and Futuna"},{"name":"Western Sahara"},{"name":"Yemen"},{"name":"Zambia"},{"name":"Zimbabwe"}];

            var ds = new kendo.data.DataSource({
                data: data
            });

            var checkInputs = function (elements) {
                elements.each(function () {
                    var element = $(this);
                    var input = element.children("input");

                    input.prop("checked", element.hasClass("k-state-selected"));
                });
            };

            $("#items").kendoMultiSelect({
                dataValueField: "name",
                dataTextField: "name",
                dataSource: ds,
                dataBound: function () {
                    var items = this.ul.find("li");
                    setTimeout(function () {
                        checkInputs(items);
                    });
                },
                itemTemplate: "<input type='checkbox'/> #:data.name#",
                headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>",
                autoClose: false,
                change: function () {
                    var items = this.ul.find("li");
                    checkInputs(items);
                }
            });

            $('#Header').click(function () {
                if ($(this).is(':checked')) {
                    $('#items_listbox').find("li").each(function () {
                        $(this).trigger("click");
                        //$(this).find("input").prop("checked",true);
                    });
                } else {
                    $('#items_listbox').find("li").each(function () {
                        $(this).trigger("click");
                        //$(this).find("input").prop("checked", false);
                    });
                }
            });

            $('#containerDiv').keydown(function (e) {
                $("#Header").attr("checked", false);
            });

        });
    </script>
</head>

<body>

    <div id="example" role="application">
        Type a country name:
        <div id="containerDiv"><div id="items"></div></div>
    </div>
</body>

</html>

解决方案2
 0  2016-11-10 11:43:26

As per understanding from the question it seems that you want a separate header which performs selection on the filtered list. 从问题的理解来看，您似乎想要一个单独的标头，该标头在过滤后的列表上执行选择。 Use this Code: 使用此代码： 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="example" role="application">
        <div class="demo-section k-header">
            <h2>Invite Attendees</h2>
            <label for="required">Required</label>
            <input type="checkbox" id="Header" value="Header"  />
            <select id="required" multiple="multiple" data-placeholder="Select attendees...">
                <option >Steven White</option>
                <option>Nancy King</option>
                <option>Nancy Davolio</option>
                <option>Robert Davolio</option>
                <option>Michael Leverling</option>
                <option>Andrew Callahan</option>
                <option>Michael Suyama</option>
                <option >Anne King</option>
                <option>Laura Peacock</option>
                <option>Robert Fuller</option>
                <option>Janet White</option>
                <option>Nancy Leverling</option>
                <option>Robert Buchanan</option>
                <option>Margaret Buchanan</option>
                <option>Andrew Fuller</option>
                <option>Anne Davolio</option>
                <option>Andrew Suyama</option>
                <option>Nige Buchanan</option>
                <option>Laura Fuller</option>
            </select>
        </div>
        <style>
            .k-list .k-item {
            }

            .k-item input {
            }
        </style>
        <script>
            $(document).ready(function () {
                var checkInputs = function (elements) {
                    elements.each(function () {
                        var element = $(this);
                        var input = element.children("input");

                        input.prop("checked", element.hasClass("k-state-selected"));
                    });
                };
                // create MultiSelect from select HTML element
                var required = $("#required").kendoMultiSelect({
                    itemTemplate: "<input type='checkbox'/> #:data.text#",
                    autoClose: false,
                    dataBound: function () {
                        var items = this.ul.find("li");
                        setTimeout(function () {
                            checkInputs(items);
                        });
                    },
                    change: function () {
                        var items = this.ul.find("li");
                        checkInputs(items);
                    }
                }).data("kendoMultiSelect");


                $('#Header').click(function () {
                    if ($(this).is(':checked')) {
                        $('#required_listbox').find("li").each(function () {
                            $(this).trigger("click");
                            //$(this).find("input").prop("checked",true);
                        });
                    }
                    else {
                        $('#required_listbox').find("li").each(function () {
                            $(this).trigger("click");
                            //$(this).find("input").prop("checked", false);
                        });
                    }
                });
            });
        </script>
    </div>
</body>

</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jquery将选项添加到jquery多选择过滤器下拉列表中 - How to add options into jquery multi-select-filter drop down using jquery 根据在另一个 Select 中选择的值过滤 Select（下拉）选项 - Filter Select (Drop Down) Options Based on Value Selected in another Select 如何 select 多选 Kendo UI 下拉列表中的所有选项？ - How to select all options in multiselect Kendo UI dropdown? 选择标签，没有下拉选项 - Select tag with no drop down options 多选下拉过滤器AngularJS Logic - Multi-select Drop-down filter AngularJS Logic 使用loadUrl在下拉框中获取所有选择选项 - Using loadUrl to get all select options in a drop down box 如何在不使用php javascript提交的情况下输出多选下拉列表中所有选定选项的文本 - how to output the text of all selected options in a multi select drop-down list without submitting using php javascript Kendo UI自动完成全选 - Kendo UI Autocomplete Select all 将项目数组添加到kendo ui multi select中 - Add array of items into kendo ui multi select 选择下拉列表在Firefox中提供空白选项 - Select drop down gives blank options in firefox
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM