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

      1、加载本地数据

    <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>
    <div id="treeView"></div>
    <script type="text/javascript">
        $(function () {
            var dataSource = new kendo.data.HierarchicalDataSource({
                data: [{
                    id: "110000",
                    text: "北京市"
                }, {
                    id: "310000",
                    text: "上海市"
                }, {
                    id: "350000",
                    text: "福建省",
                    expanded: true,
                    items: [{
                        id: "350100",
                        text: "福州市"
                    }, {
                        id: "350200",
                        text: "厦门市"
                    }, {
                        id: "350500",
                        text: "泉州市"
                    }]
                }, {
                    id: "440000",
                    text: "广东省",
                    expanded: true,
                    items: [{
                        id: "440100",
                        text: "广州市"
                    }, {
                        id: "440300",
                        text: "深圳市"
                    }]
                }]
            });
    
            $("#treeView").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
                dataSource: dataSource
            });
        });
    </script>

      效果预览:

    <script type="text/javascript">
        $(function () {
            var dataSource = new kendo.data.HierarchicalDataSource({
                data: [{
                    ProvinceID: "110000",
                    ProvinceName: "北京市"
                }, {
                    ProvinceID: "310000",
                    ProvinceName: "上海市"
                }, {
                    ProvinceID: "350000",
                    ProvinceName: "福建省",
                    expanded: true,
                    Cities: [{
                        CityID: "350100",
                        CityName: "福州市"
                    }, {
                        CityID: "350200",
                        CityName: "厦门市"
                    }, {
                        CityID: "350500",
                        CityName: "泉州市"
                    }]
                }, {
                    ProvinceID: "440000",
                    ProvinceName: "广东省",
                    expanded: true,
                    Cities: [{
                        CityID: "440100",
                        CityName: "广州市"
                    }, {
                        CityID: "440300",
                        CityName: "深圳市"
                    }]
                }],
                schema: {
                    model: {
                        children: "Cities"
                    }
                }
            });
    
            $("#treeView").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
                dataSource: dataSource,
                dataValueField: ["ProvinceID", "CityID"],
                dataTextField: ["ProvinceName", "CityName"]
            });
        });
    </script>
  • 相关阅读:
    k8s官网 基础知识入门教程
    Mac安装minikube
    docker下创建crontab定时任务失败
    docker save提示no space left on device错误
    cx_Oracle读写clob
    Ossec添加Agent端流程总结
    ossec变更alert等级及配置邮件预警
    linux安全配置检查脚本_v0.5
    linux命令返回值的妙用
    Shell脚本判断内容为None的方式
  • 原文地址:https://www.cnblogs.com/libingql/p/3784195.html
Copyright © 2011-2022 走看看