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

  • 相关阅读:
    MYSQL的基本语法
    如何实现SQL Server临时表的创建?
    计算时间 相加,相减 的方法,TimeSpan 数据转换
    sql server 拆分字符串,拆分两次(:和;)
    SQL group by分组查询(转)
    转: sqlserver常用sql语句,更改字段,建立唯一键,多个字段去重复等
    asp.net,CSS设置<TableListView>的title居左,居左,居上
    linq to sql ,将var 类型转为 IList 类型
    Open XML的上传、下载 、删除 ......文件路径
    C#操作office进行Excel图表创建,保存本地,word获取
  • 原文地址:https://www.cnblogs.com/libingql/p/3778541.html
Copyright © 2011-2022 走看看