我们如何在 Kendo MultiselectFor 中实现全选选项答案

【问题标题】：How can we implement select All option in Kendo MultiselectFor我们如何在 Kendo MultiselectFor 中实现全选选项
【发布时间】：2015-03-28 06:18:30
【问题描述】：

我们如何在 Kendo Multiselect For 中实现全选选项？

        @(Html.Kendo().MultiSelectFor(model => model.TestData)
                    .DataTextField("DataText")                        
                    .DataValueField("DataValue")
                    .Placeholder("Select..")
                    .Events(e => e.DataBound("CheckIfEmpty"))                        
                    .AutoBind(false)                        
                    .Enable(false)                                                
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Action", "Controller").Data("filterData");
                        })                            
                        .ServerFiltering(false);
                    })
                    )

【问题讨论】：

能否提供更多细节或代码？

标签： asp.net-mvc kendo-ui telerik kendo-asp.net-mvc

【解决方案1】：

请检查下面的代码 sn-p。

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

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

</head>
<body>
    <div class="demo-section k-header">
        <select id="TestData" data-placeholder="Select movie..."></select>
    </div>
    <div>
        <button type="button" onclick="SelectAllClick();">Select All</button>
    </div>
    <script>
        $(document).ready(function () {
            var data = [
            { text: "12 Angry Men", value: "1" },
            { text: "Il buono, il brutto, il cattivo.", value: "2" },
            { text: "Inception", value: "3" },
            { text: "One Flew Over the Cuckoo's Nest", value: "4" },
            { text: "Pulp Fiction", value: "5" },
            { text: "Schindler's List", value: "6" },
            { text: "The Dark Knight", value: "7" },
            { text: "The Godfather", value: "8" },
            { text: "The Godfather: Part II", value: "9" },
            { text: "The Shawshank Redemption", value: "10" },
            { text: "The Shawshank Redemption 2", value: "11" }
            ];

            $("#TestData").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data
            });

        });
        function SelectAllClick() {
            var multiSelect = $("#TestData").data("kendoMultiSelect");
            var selectedValues = "";
            var strComma = "";
            for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
                var item = multiSelect.dataSource.data()[i];
                selectedValues += strComma + item.value;
                strComma = ",";
            }
            multiSelect.value(selectedValues.split(","));
        }

    </script>
</body>
</html>

如果有任何问题，请告诉我。

【讨论】：

看起来它的Jayaesh不错，但是如何实现动态数据源。即 .DataSource(source => { source.Read(read => { read.Action("Action", "Controller").Data("filterData"); }) .ServerFiltering(false); })
以上代码适用于所有数据源。您需要在页面中添加函数“SelectAllClick()”和“全选”按钮代码。在函数中，我没有在函数内的任何地方使用我的静态数据源“数据”，因此它适用于所有类型的数据源，此外，这个控件是由 MVC 或 PHP 或 JSP 创建的并不重要。
嗨 Jayesh，这个语句有问题 selectedValues += strComma + item.value;这里 item.value 显示为未定义。
嗨，jayesh ...终于按照你的代码得到了...谢谢。但我正在使用 MultiSelectFor（没有“选择”）和你的 JavaScript 函数 SelectAllClick（）。谢谢杰伊什...
它可以与 BindTo 一起使用吗？我尝试使用 BindTo，它将添加选定的值，但不会将它们从可用的值列表中删除。允许人们多次选择相同的值。

【解决方案2】：

这样的事情应该可以工作：

<script>
    $('#selectAll').click(function(){
        var ctl = $('#TestData').data('kendoMultiSelect');
        var opts = ctl.dataSource.data();
        var selected = [];
        for (var idx = 0; idx < opts.length; idx++) {
          selected.push(opts[idx].value);
        }
        ctl.value(selected);
      });
</script>

如果您使用underscore 之类的东西，我可以通过执行以下操作让您更轻松：

<script>
    $('#selectAll').click(function(){
        var ctl = $('#TestData').data('kendoMultiSelect');
        var opts = ctl.dataSource.data();
        var selected = _.pluck(opts, 'value');

        ctl.value(selected);
      });
</script>

【讨论】：

谦虚的建议，您也可以使用 Array.map，例如 opts.map(p=> p.value) 但我不确定是否所有浏览器版本都支持它。顺便说一句，这个答案对我有帮助！谢谢！！