KendoUI的MultiSelect 多选系列

最新推荐文章于 2021-03-29 16:15:45 发布

原创最新推荐文章于 2021-03-29 16:15:45 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在KendoUI的MultiSelect组件中实现动态数据获取，避免出现多个选项框的问题，并展示了如何配置autoBind和autoClose属性以控制选择事件和匹配值的设定。

从官网下载的例子

  <label for="optional">Optional</label>
     <select id="optionalselect"; name="contrycity" multiple="multiple" data-placeholder="Select attendees...">
      </select>
    <button class="k-button" id="get">search</button>

在js里面写死的是
 var optional = $("#optionalselect").kendoMultiSelect({
                autoClose: false
            }).data("kendoMultiSelect");

    $("#get").click(function () {
            alert(optional.value());
            countryValue = optional.value();
        });

如果改成动态获取数据那么

通过一个ajax获取返回的数据后，接着下面的代码

而且上面的代码还要改动，不然出现两个选项框

                   $(data).find('Table').each(function () {
                            var Country = $(this).find('Country').text();
                            mycity.push({
                                text: Country,
                                value: Country
                            });
                        });
                      //如果是常规加载就按这种方式，一次加载就可以了
                      $("#optionalselect").kendoMultiSelect({
                            placeholder: "-- 请选择country --",
                            dataTextField: "text",
                            dataValueField: "value",
                            autoBind: false,
                            dataSource: mycity
                            value: mycity[0]//默认选择选择第一个
                        }).data("kendoMultiSelect");     
///////////////////////////////////////////////////////////////////////////////           
                      //如果是多次加载，当时控件只能是初始化一次
                      //只是每次的数值更新，
                    success: function (data) {
                    if ($(data).find('Table').length > 0) {
                        $(data).find('Table').each(function () {
                            var Country = $(this).find('Country').text();
                            mycity.push({
                                text: Country,
                                value: Country
                            });
                        });
                        $("#idcountry").val( mycity[0].value);
                        countryValue = mycity[0].value;
                        var dataSource = new kendo.data.DataSource({
                            data: mycity
                        });
                        var multiselect = $("#optionalselect").data("kendoMultiSelect");
                        multiselect.setDataSource(dataSource);//给控件赋值
                        multiselect.value(mycity[0]);//给控件设置初始化值
                        timeHttpPost();//调用
                    }
                }
                 //在最外层值进行一次加载
                  //初始化下拉
                var kendoMultiSelect = $("#optionalselect").kendoMultiSelect({
                    placeholder: "-- Please Select Country --",
                    dataTextField: "text",
                    dataValueField: "value",
                    autoBind: false,
                    //dataSource: mycity,
                    //value: mycity[0]
                    }).data("kendoMultiSelect");



    $("#get").click(function () {
           var optional = $("#optionalselect").val();
            alert(optional.value());
            countryValue = optional.value();
        });

这样就可以了

对于选择触发事件，和触发时候如果和某个值匹配就设置对应的值，则用下面的例子

$.get('Home/GetAppsJson/', function (data) {
        var values = new Array();
        if (data[0] != null) {
            for (var i = 0; i < data.length; i++) {
                if (data[i] == null)
                    break;
                values[i]=data[i];
            }
        }
        var multiselect = $('#applications').data("kendoMultiSelect");
        multiselect.value(values);
    });

    //对option进行触发
        $("#optionalselect").data("kendoMultiSelect").setOptions(function () {
            var optional = $("#optionalselect").val();
            if (optional != null) {
                for (var t = 0; t < optional.length; t++) {
                    if ("TOP 10" == optional[t]) {
                        optional = {};
                        optional[0] = "TOP 10";
                        var cityOption = new Array();
                        cityOption.push({
                            text: optional[0],
                            value: optional[0]
                        });
                        $("#optionalselect").data("kendoMultiSelect").value(cityOption);
                        break;
                    }
                }
                $("#idcountry").val(optional);
                countryValue = optional;
            }
        });

 //初始化下拉
        var kendoMultiSelect = $("#optionalselect").kendoMultiSelect({
            placeholder: "-- Please Select Country --",
            dataTextField: "text",
            dataValueField: "value",
            autoBind: false,
            select: function(e){
                // 如果有top10就放弃其他操作
                if (this.value().indexOf('TOP 10') >= 0) {
                    e.preventDefault();
                }

                //如果选了其他在选top10,把其他的清空
                var item = e.item;
                var text = item.text();
                if (text === "TOP 10") {
                    this.value([]);
                }
                //如果选了其他在选top10,把其他的清空
                var optional = $("#optionalselect").val();
                if (optional != null&&optional.length==10) {
                    e.preventDefault();
                }
            }
        }).data("kendoMultiSelect");

autoBind: false,
autoClose: false,