zoukankan      html  css  js  c++  java
  • KendoUI系列:MultiSelect

      1、基本使用

      1>、创建Input

    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
    <input class="city" />
    <script type="text/javascript">
        $(function () {
            $(".city").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "北京", value: "1" },
                    { text: "上海", value: "2" },
                    { text: "深圳", value: "3" },
                    { text: "厦门", value: "4" }
                ]
            });
        });
    </script>

      效果预览:

      获取选中项Value:

    var city = $("#city").data("kendoMultiSelect");
    city.value();

      设置加载完成后选中项:

    <script type="text/javascript">
        $(function () {
            $("#city").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "北京", value: "1" },
                    { text: "上海", value: "2" },
                    { text: "深圳", value: "3" },
                    { text: "厦门", value: "4" }
                ],
                value: [
                    { text: "厦门", value: "4" },
                    { text: "深圳", value: "3" }
                ]
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            var dataSource = new kendo.data.DataSource({
                data: [{
                    text: "北京",
                    value: "1"
                }, {
                    text: "上海",
                    value: "2"
                }, {
                    text: "深圳",
                    value: "3"
                }, {
                    text: "厦门",
                    value: "4"
                }]
            });
    
            $("#city").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: dataSource,
                value: [
                    { text: "厦门", value: "4" },
                    { text: "深圳", value: "3" }
                ]
            });
        });
    </script>

      2>、创建select

    <select id="city" multiple="multiple" data-placeholder="Select Cities...">
        <option>北京</option>
        <option selected>上海</option>
        <option>深圳</option>
        <option selected>厦门</option>
    </select>
    <script type="text/javascript">
        $(function () {
            $("#city").kendoMultiSelect();
        });
    </script>

      2、加载远程数据

    <input id="city" />
    <script type="text/javascript">
        $(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Province/GetProvinceList",
                        dataType: "json"
                    }
                }
            });
    
            $("#city").kendoMultiSelect({
                placeholder: "Select Cities...",
                dataTextField: "ProvinceName",
                dataValueField: "ProvinceID",
                autoBind: false,
                dataSource: dataSource
            });
        });
    </script>
    }

      3、参考资料

      http://demos.telerik.com/kendo-ui/multiselect/index

  • 相关阅读:
    js 注意
    JS学习大作业-Excel
    js继承
    转载:margin外边距合并问题以及解决方式
    CSS属性选择器和部分伪类
    HTML使用CSS样式的方法
    link元素 rel src href属性
    【2020.01.06】SDN大作业
    【2019.12.11】SDN上机第7次作业
    【2019.12.04】SDN上机第6次作业
  • 原文地址:https://www.cnblogs.com/libingql/p/3778541.html
Copyright © 2011-2022 走看看