Ignite UI for JavaScript的树网格以树状表格结构显示数据，但具有网格控件所期望的所有功能，例如筛选、排序和分页。
树网格与层次网格类似，但与父节点和子节点具有相同结构的数据组合时效果最佳。
在本文中，您将了解如何通过几行代码将Ignite UI for JavaScript树网格添加到HTML/jQuery应用程序中。
添加Ignite UI for JavaScript参考
要使用Ignite UI树网格，首先需要将Ignite UI引用添加到应用程序。为此，请将Ignite UI JS和CSS文件的引用添加到HTML中。阅读关于添加CSS和JavaScript引用的Ignite UI帮助主题， 了解有关此主题的更多信息。
在这篇文章中，我们将使用Ignite UI CDN选项添加引用。在HTML页面的head部分，添加Ignite UI引用，如下所示:
<link href = "http:// cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel = "stylesheet"/> <link: href = "http:// cdn-na.infragistics.com/ignteui/2016.2/latest/css/structure/infragistics.css" rel = "stylesheet"/>
创建数据源
绑定树网格所需的数据可以是JavaScript数组或JSON对象数组，并且可以是本地的或由REST服务提供。要创建树网格，您需要分层数据-这意味着数据应该嵌套。此外，与分层网格不同，树网格父节点和子节点数据应具有相同的结构。
下面的清单创建了一个数据源:
var projectData = [{"id": 0,"任务": "项目计划","开始": "6/2/2014","完成": "8/22/2014","持续时间": "60d","进度": "32%",“产品” [:{"id": 1,"任务": "计划","开始": "6/2/2014","完成": "6/4/2014","持续时间": "3d","进度": "100%"},{“id”: 2，“任务”: “编写规范”，“开始”: “6/5/2014”，“完成”: “6/6/2014”，"duration": "2d"，"progress": }， "100%"{"id": 3,"任务": "创建演示应用程序","开始": "6/9/2014","完成": "6/11/2014","持续时间": "3d","进度": "100%"},{"id": 4，"任务": "收集反馈"，"开始":，"6/12/2014":，"duration": "1d"，"progress": }， "100%"，{"id": 5,"任务": "设计","开始": "6/13/2014","完成": "6/19/2014","持续时间": "5d","进度": "60%",“产品” [:{“id”: 8，“任务”: “概念设计”，“开始”: “6/13/2014”，“完成”: “6/16/2014”，"duration": "2d"，"progress": }， "100%"{“id”: 9，“任务”: “初步设计”，“开始”: “6/17/2014”，“完成”: “6/18/2014”，"duration": "2d"，"progress": }， "65%"{“id”: 10，“任务”: “最终设计”，“开始”: “6/19/2014”，“完成”: “6/19/2014”，"duration": "1d"，"progress": "" 15% "]},{"id": 6,"任务": “发展”,"开始": "6/20/2014","完成": "8/20/2014","持续时间": "44d","进度": "5%",“产品” [:{"id": 11,"任务": "实施","开始": "6/20/2014","完成": "7/17/2014","持续时间": "20d","进度": "5%"},{"id": 12,"任务": "正在测试","开始": "7/18/2014","完成": "7/31/2014","持续时间": "10d","进度": "0%"},{“id”: 13，“任务”: “Bug修复”，“开始”: “8/1/2014”，“完成”: “8/14/2014”，"duration": "10d"，"progress": }， "0%"，{"id": 14,"任务": "记录","开始": "8/15/2014","完成": "8/20/2014","持续时间": "4d","进度": "0%"}]},{“id”: 7，“任务”: “项目完成”，“开始”: “8/21/2014”，“完成”: “8/22/2014”，"持续时间": "2d" "进度":} "0%"]}];
在上面的列表中，请注意，数据节点相互嵌套，每行都有一个 “产品” 节点。“产品” 节点的属性与父节点属性相同。请记住，您还可以使用REST服务或Web API从服务器获取JSON数据。
创建树网格
要创建树形网格，请在HTML中添加一个元素，如下所示:
<表 id ="checkboxModeTreeGrid">
通过在JavaScript中使用igTreeGrid函数，可以将HTML表转换为Ignite UI树网格。您需要将一个对象作为输入参数传递给igTreeGrid函数以创建树网格，如下所示:
$( "# checkboxModeTreeGrid" ).igTreeGrid({"100%" 宽度:数据源: projectData，autoGenerateColumns: false,primaryKey: "id",列: [{headerText: "ID" ，key: ，width: "10%" ，dataType: "number" ，hidden: true }，{headerText: "Tasks" ，key: ，width: "30%" ，dataType: }， "string"，{headerText: "开始",键: "开始",宽度: "20%",数据类型: "字符串"},{headerText: "完成",键: "完成",宽度: "20%",数据类型: "字符串"},{headerText: "持续时间",键: "持续时间",宽度: "20%",数据类型: "字符串"},{headerText: "Progress" ，key: ，width: "10%" ，dataType: "string"}],childDataKey: "产品" });
在上面的清单中，您将dataSource属性设置为projectData。您可能还记得，projectData是一个JSON对象数组，其中包含嵌套数据。
您还可以将autoGeneratedColumns的值设置为false，并通过在columns属性中传递数组来配置树网格的列。如果不想配置列，请将autoGeneratedColumns的值设置为true。树网格的主键值设置为数据源的id列。
在上面的清单中，最重要的属性之一是childDataKey。此属性确定每个父节点中的哪个字段将成为数据源中的子节点。在这里，您将其设置为属性 “products”，因此数据源中的 “products” 属性将充当子节点。如果任何父节点不具有 “products” 属性，则对于树网格中的特定行，将没有子行。
运行应用程序
在运行应用程序时，您将发现Ignite UI for JavaScript树网格呈现如下图所示:
您可以通过单击加号/减号按钮轻松展开和折叠行。
点燃UI树网格 ，支持网格的其他功能，如分页，过滤，排序等。您将学习在未来的博客文章中添加这些功能。同时，花几分钟时间了解更多信息， 试用Ignite UI免费
Dhananjay Kumar作为Infragistics的开发人员布道者。他是七次微软MVP。你可以在Twitter上找到他: @debug_mode。</p