tree grid directive

树格指导

通过使用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 >

指定模板

有两种方法可以指定分页控制指令的模板：

1. 使用应用程序配置块中的“ TreeGridTemplateProvider”为应用程序设置全局模板：

    myApp.config(function(treegridTemplateProvider) {
       treegridTemplateProvider.setPath(\'path/to/treegrid/template.html\');
   });
   

2. 使用每个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树的启发

发布历史