1.创建一个HTML文件并添加下面的模板到HTML文件里
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<link href=" http://cdn.
Syncfusion.com/13.3.0.7/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet"/>
<script src="http://cdn.
Syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.
Syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.
Syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="http://cdn.
Syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.
Syncfusion.com/13.3.0.7/js/web/ej.web.all.min.js" type="text/javascript"></script>
</head>
<body>
<!--Add TreeGrid control here -->
</body>
</html>
2.在<Body>标签下添加<div>元素
<body style="width:100%;height:100%;position:static;">
<!--Add TreeGrid control here-->
<div id="TreeGridContainer" style="width:60%;height:80%;position:absolute;"></div>
</body>
3.创一个空数据源的树型表格
$(function () {
$("#TreeGridContainer").ejTreeGrid({
columns: [
{ field: "taskName", headerText: "Task Name" },
{ field: "startDate", headerText: "Start date"},
{ field: "endDate", headerText: "End Date" },
{ field: "duration", headerText: "Duration"},
{ field: "progress", headerText: "Progress"}
]
});
});
4.为树型表格控件创建数据源
var treeGridDataSource = [
{
taskID: 2,
taskName: "Planning",
startDate: "02/03/2014",
endDate: "02/07/2014",
duration: 10,
progress: 56,
subtasks: [
{
taskID: 3,
taskName: "Plan timeline",
startDate: "02/03/2014",
endDate: "02/07/2014",
duration: 5,
progress: "100"
},
{
taskID: 4,
taskName: "Plan budget",
startDate: "02/03/2014",
endDate: "02/07/2014",
duration: 5,
progress: "100"
},
{
taskID: 5,
taskName: "Allocate resources",
startDate: "02/03/2014",
endDate: "02/07/2014",
duration: 5,
progress: "100"
},
{
taskID: 6,
taskName: "Planning complete",
startDate: "02/07/2014",
endDate: "02/07/2014",
duration: 0,
progress: 40
}
]
},
{
taskID: 7,
taskName: "Design",
startDate: "02/10/2014",
endDate: "02/14/2014",
duration: 10,
progress: 76,
subtasks: [
{
taskID: 8,
taskName: "Software Specification",
startDate: "02/10/2014",
endDate: "02/12/2014",
duration: 3,
progress: "60"
},
{
taskID: 9,
taskName: "Develop prototype",
startDate: "02/10/2014",
endDate: "02/12/2014",
duration: 3,
progress: "100"
},
{
taskID: 10,
taskName: "Get approval from customer",
startDate: "02/13/2014",
endDate: "02/14/2014",
duration: 2,
progress: "100"
},
{
taskID: 11,
taskName: "Design complete",
startDate: "02/14/2014",
endDate: "02/14/2014",
duration: 0,
predecessor: "10FF",
progress: 65
}
]
}
];
5.初始化树型表格，并附上数据
$(function () {
$("#TreeGridContainer").ejTreeGrid({
dataSource: treeGridDataSource,
//Map the child mapping to render the hierarchical data
childMapping: "subtasks",
columns: [
{ field: "taskName", headerText: "Task Name" },
{ field: "startDate", headerText: "Start Date"},
{ field: "endDate", headerText: "End Date" },
{ field: "duration", headerText: "Duration"},
{ field: "progress", headerText: "Progress"}
]
});
});
6.运行程序显示效果如下：
