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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM