树格指导
通过使用Angular和Bootstrap在树结构中显示数据的网格。
它是开源（麻省理工学院许可证）
随时可以做任何您想做的事情。
demo :: http：//khan4019.github.io/tree-grid-diractive/test/treegrid.html
最小的小型
＃＃＃＃任何一个：
与鲍尔安装
$ bower install angular-bootstrap-grid-tree
使用NPM安装
$ npm install angular-bootstrap-grid-tree
####或：在Bootstrap和Angular之后，在HTML文件中包含src/treeGrid.css和src/tree-grid-directive.js 。
＃＃＃＃然后
只需添加以下内容
<tree-grid tree-data="tree_data"></tree-grid>
将模块作为您的应用程序中的依赖性：
angular.module('myApp', ['treeGrid'])
tree_data：是对象的数组。如果对象有孩子，将它们放在对象的children阵列中。树数据的一个例子看起来像：
$scope.tree_data = [
{Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
children:[
{Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
children:[
{Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
{Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
]
},
{Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
children:[
{Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
]
}
]
},
{Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];
如果您的数组按主键和父键排序，则可以在temp文件夹中使用getTree方法。
更多选项
如果需要更多自定义，则可以使用以下选项：
<tree-grid
tree-data = "tree_data"
col-defs = "col_defs"
expand-on = "expanding_property"
tree-control = "my_tree"
icon-leaf = "icon-file"
icon-expand = "icon-plus-sign"
icon-collapse = "icon-minus-sign"
on-select = "my_tree_handler(branch)"
on-click = "my_tree_handler(branch)"
template-url = "path/to/treegrid/template.html"
expand-level = "2"
expand-to = "expand_to">
</tree-grid>
col_defs：是一系列对象，使您可以自定义列标题。如果未提供displayName ，则将field （对象属性）用作displayName 。
有效属性是：
field: Hook to the field to know the column position in the table.
displayName: Text that will be used in the column header.
cellTemplate: Template that will be used to show the value. Useful if
you want to show images, for instance.
cellTemplateScope: Used to pass the controllers methods you want to be
used inside the cell template.
sortable: The user can sort by the values of this field
sortingType: The type of the field, for sorting or filtering purposes.
Possible values are "number", for numeric sorting, or
"string" for alphabetic sorting (this is the default)
filterable: This field will be searched when filtering
例子：
$scope.col_defs = [
{ field: "Description" },
{
field: "DemographicId",
displayName: "Demographic Id",
sortable : true,
filterable : true
},
{
field: "ParentId",
displayName: "Parent Id"
},
{ field: "Area",
sortable : true,
sortingType : "number",
filterable : true
},
{ field: "Population" },
{
field: "image",
displayName: "Image",
cellTemplate: "<img ng-click='cellTemplateScope.click(\'example\')' ng-src='{{ row.branch[col.field] }}' />",
cellTemplateScope: {
click: function(data) { // this works too: $scope.someMethod;
console.log(data);
}
}
}
];
如果您希望动态定义col_defs（例如，如果列名来自服务），则可以按照[本期]中指定的说明（＃51）。
Expanding_property：这是tree_data中对象的属性，您需要在其中放置扩展和折叠的能力。这接受与col_defs相同格式的数组，可以在扩展字段上进行分类和过滤。现在，这包括提供CellTemplate的能力（但不提供CellTemplateScope）。
my_tree：您可以使用tree-control使用全部扩展并崩溃。在“演示”提供的链接中查看。
图标：定义字体很棒，引导镜头宽带膨胀，塌陷和叶子。
template-url：用于使用自定义模板的URL。
扩展级别：树的深度，您需要在加载时展开 - 默认值现在将其设置为0 IE树。请注意，一旦设置，您就不能折叠在此深度下方的树。
扩展到： $rootscope字段该指令将注意编程扩展。当更改时，指令将在树上搜索具有相同值的展开property，并将树扩展到该点。所有其他分支将崩溃。
选择：单击+/-图标时，请单击处理程序。
$scope.my_tree_handler = function(branch){
console.log('you clicked on', branch)
}
单击：单击处理程序在单击扩展属性时，如果选择分支，则需要重定向时。
$scope.my_tree_handler = function(branch){
console.log('you clicked on', branch)
}
每行设置图标
如果数据包含不同的类型，则使用不同的图标区分它们可能很有用。每行都可以以下三个图标设置：
- 如果行是叶子，偶像的图标将显示
- 图标崩溃了，如果行有孩子并扩展，将显示的图标将显示
- 如果该行有孩子并崩溃，将显示的图标将显示
如果没有定义，则每个不是Overriden的图标都将是在树格指令或默认指令上定义的图标。
例子：
< tree-grid
tree-data = " tree_data "
icon-leaf = " icon-file "
icon-expand = " icon-plus-sign "
icon-collapse = " icon-minus-sign "
</ tree-grid > $scope . tree_data = [
{ Name : "USA" , Area : 9826675 , Population : 318212000 , TimeZone : "UTC -5 to -10" ,
children : [
{ Name : "California" , Area : 423970 , Population : 38340000 , TimeZone : "Pacific Time" ,
children : [
{ Name : "San Francisco" , Area : 231 , Population : 837442 , TimeZone : "PST" } ,
{ Name : "Los Angeles" , Area : 503 , Population : 3904657 , TimeZone : "PST" }
]
icons : {
iconLeaf : " fa fa - sun - o "
}
} ,
{ Name : "Illinois" , Area : 57914 , Population : 12882135 , TimeZone : "Central Time Zone" ,
children : [
{ Name : "Chicago" , Area : 234 , Population : 2695598 , TimeZone : "CST" }
]
}
] ,
icons : {
iconLeaf : "fa fa-flag" ,
iconCollapse : "fa fa-folder-open" ,
iconExpand : "fa fa-folder"
}
} ,
{ Name : "Texas" , Area : 268581 , Population : 26448193 , TimeZone : "Mountain" }
] ;搜索后膨胀树
如果需要在（成功）搜索后展开树，则需要修改模板并为滤波器参数添加true 。
<tr ng-repeat="row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions: true track by row.branch.uid">完整示例（基于原始模板）：
< div class =" table-responsive " >
< table class =" table tree-grid " >
< thead >
< tr >
< th > < a ng-if =" expandingProperty.sortable " ng-click =" sortBy(expandingProperty) " > {{expandingProperty.displayName || expandingProperty.field || expandingProperty}} </ a > < span ng-if =" !expandingProperty.sortable " > {{expandingProperty.displayName || expandingProperty.field || expandingProperty}} </ span > < i ng-if =" expandingProperty.sorted " class =" {{expandingProperty.sortingIcon}} pull-right " > </ i > </ th >
< th ng-repeat =" col in colDefinitions " > < a ng-if =" col.sortable " ng-click =" sortBy(col) " > {{col.displayName || col.field}} </ a > < span ng-if =" !col.sortable " > {{col.displayName || col.field}} </ span > < i ng-if =" col.sorted " class =" {{col.sortingIcon}} pull-right " > </ i > </ th >
</ tr >
</ thead >
< tbody >
< tr ng-repeat =" row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions:true track by row.branch.uid "
ng-class =" 'level-' + {{ row.level }} + (row.branch.selected ? ' active':'') " class =" tree-grid-row " >
< td > < a ng-click =" user_clicks_branch(row.branch) " > < i ng-class =" row.tree_icon "
ng-click =" row.branch.expanded = !row.branch.expanded "
class =" indented tree-icon " > </ i > </ a > < span class =" indented tree-label " ng-click =" on_user_click(row.branch) " >
{{row.branch[expandingProperty.field] || row.branch[expandingProperty]}} </ span >
</ td >
< td ng-repeat =" col in colDefinitions " >
< div ng-if =" col.cellTemplate " compile =" col.cellTemplate " cell-template-scope =" col.cellTemplateScope " > </ div >
< div ng-if =" !col.cellTemplate " > {{row.branch[col.field]}} </ div >
</ td >
</ tr >
</ tbody >
</ table >
</ div >指定模板
有两种方法可以指定分页控制指令的模板：
-
使用应用程序配置块中的“ TreeGridTemplateProvider”为应用程序设置全局模板：
myApp.config(function(treegridTemplateProvider) { treegridTemplateProvider.setPath('path/to/treegrid/template.html'); }); -
使用每个TreeGrid指令上的
template-url属性覆盖一个特定的实例：<tree-grid tree-data="treegrid" col-defs="col_defs" template-url="path/to/treegrid/template.html"></tree-grid>
从REST API（或某些外部资源）加载树数据。
首先，将tree_data设置为一个空数组：
$scope.tree_data = [];
稍后，使用承诺执行查询，并使用已解决的对象更新tree_data值：
APIEndpoint
.find()
.then(function(objects){
$scope.tree_data = prepareDataForTreegrid(objects);
});
自定义单元模板
如果出于任何原因，您要使用自定义的HTML显示特定的单元格，以显示图像，颜色点或其他内容，则可以在col-defs阵列中使用cellTemplate选项，只需将{{ row.branch[col.field] }}用作占位符的占位符，以便将其置于html -html -field -field {{ row.branch[expandingProperty.field] }} rofferapt field.field {扩展属性的模板。
例子：
$scope.col_defs = [
{
field: "DemographicId",
displayName: "Demographic Id",
cellTemplate: "<img ng-src="{{ row.branch[col.field] }}" />"
}
];
您可以使用所需的任何HTML，所有角指令都可以按预期工作。
另外，如果您需要使用单元格模板中的范围中的范围中的某些方法或变量，则可以将cellTemplate的引用传递为：
cellTemplateScope: {
click: function(data) { // this works too: $scope.someMethod;
console.log(data);
}
}
然后在cellTemplate中使用它为：
cellTemplate: "<img ng-click="cellTemplateScope.click(row.branch[col.field])" ng-src="{{ row.branch[col.field] }}" />",
并将按预期工作。
受ABN树的启发
发布历史
| 版本 | 日期 | 更改摘要 |
|---|---|---|
| 0.4.0 | 2016年7月6日 | 添加Expand_to功能 |
| 0.3.0 | 2016年5月30日 | 同步NPM并正确释放 |
| 0.2.0 | 2016年5月24日 | 各种代码修复 |
| 0.1.0 | 2016年5月13日 | 最初的NPM发布 |
下载源码
通过命令行克隆项目:
git clone https://github.com/khan4019/tree-grid-directive.git