• 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>
  • 相关阅读:
    HTTP Status 500
    响应式导航页面
    Http状态码的种类及含义
    实时监听输入框值变化的完美方案:oninput & onpropertychange
    运动框架
    图片循环轮播
    html页面加载和解析流程
    js和jquery实现tab选项卡
    js遇到这样基础题,看你能不能作对呢
    sql统计重复数据
  • 原文地址:https://www.cnblogs.com/libingql/p/3784195.html
Copyright © 2020-2023  润新知