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

  • 相关阅读:
    WebDriverAgent入门篇-安装和使用
    5分钟了解TypeScript
    “软到不行”的WWDC2018
    IntelliJ idea 撤回(已经commit未push的)操作
    【java并发核心一】Semaphore 的使用思路
    Spring Boot 如何干掉 if else?
    到底什么是重入锁,拜托,一次搞清楚!
    mysql 递归查找菜单节点的所有子节点
    sql语句递归查询(start with)
    js实现对上传图片的路径转成base64编码,并且对图片进行压缩,实现预览功能1
  • 原文地址:https://www.cnblogs.com/libingql/p/3778541.html
Copyright © 2011-2022 走看看