ui-grid.tree-view.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. /*!
  2. * ui-grid - v4.4.6 - 2018-04-06
  3. * Copyright (c) 2018 ; License: MIT
  4. */
  5. (function () {
  6. 'use strict';
  7. /**
  8. * @ngdoc overview
  9. * @name ui.grid.treeView
  10. * @description
  11. *
  12. * # ui.grid.treeView
  13. *
  14. * <div class="alert alert-warning" role="alert"><strong>Beta</strong> This feature is ready for testing, but it either hasn't seen a lot of use or has some known bugs.</div>
  15. *
  16. * This module provides a tree view of the data that it is provided, with nodes in that
  17. * tree and leaves. Unlike grouping, the tree is an inherent property of the data and must
  18. * be provided with your data array.
  19. *
  20. * Design information:
  21. * -------------------
  22. *
  23. * TreeView uses treeBase for the underlying functionality, and is a very thin wrapper around
  24. * that logic. Most of the design information has now moved to treebase.
  25. * <br/>
  26. * <br/>
  27. *
  28. * <div doc-module-components="ui.grid.treeView"></div>
  29. */
  30. var module = angular.module('ui.grid.treeView', ['ui.grid', 'ui.grid.treeBase']);
  31. /**
  32. * @ngdoc object
  33. * @name ui.grid.treeView.constant:uiGridTreeViewConstants
  34. *
  35. * @description constants available in treeView module, this includes
  36. * all the constants declared in the treeBase module (these are manually copied
  37. * as there isn't an easy way to include constants in another constants file, and
  38. * we don't want to make users include treeBase)
  39. *
  40. */
  41. module.constant('uiGridTreeViewConstants', {
  42. featureName: "treeView",
  43. rowHeaderColName: 'treeBaseRowHeaderCol',
  44. EXPANDED: 'expanded',
  45. COLLAPSED: 'collapsed',
  46. aggregation: {
  47. COUNT: 'count',
  48. SUM: 'sum',
  49. MAX: 'max',
  50. MIN: 'min',
  51. AVG: 'avg'
  52. }
  53. });
  54. /**
  55. * @ngdoc service
  56. * @name ui.grid.treeView.service:uiGridTreeViewService
  57. *
  58. * @description Services for treeView features
  59. */
  60. module.service('uiGridTreeViewService', ['$q', 'uiGridTreeViewConstants', 'uiGridTreeBaseConstants', 'uiGridTreeBaseService', 'gridUtil', 'GridRow', 'gridClassFactory', 'i18nService', 'uiGridConstants',
  61. function ($q, uiGridTreeViewConstants, uiGridTreeBaseConstants, uiGridTreeBaseService, gridUtil, GridRow, gridClassFactory, i18nService, uiGridConstants) {
  62. var service = {
  63. initializeGrid: function (grid, $scope) {
  64. uiGridTreeBaseService.initializeGrid( grid, $scope );
  65. /**
  66. * @ngdoc object
  67. * @name ui.grid.treeView.grid:treeView
  68. *
  69. * @description Grid properties and functions added for treeView
  70. */
  71. grid.treeView = {};
  72. grid.registerRowsProcessor(service.adjustSorting, 60);
  73. /**
  74. * @ngdoc object
  75. * @name ui.grid.treeView.api:PublicApi
  76. *
  77. * @description Public Api for treeView feature
  78. */
  79. var publicApi = {
  80. events: {
  81. treeView: {
  82. }
  83. },
  84. methods: {
  85. treeView: {
  86. }
  87. }
  88. };
  89. grid.api.registerEventsFromObject(publicApi.events);
  90. grid.api.registerMethodsFromObject(publicApi.methods);
  91. },
  92. defaultGridOptions: function (gridOptions) {
  93. //default option to true unless it was explicitly set to false
  94. /**
  95. * @ngdoc object
  96. * @name ui.grid.treeView.api:GridOptions
  97. *
  98. * @description GridOptions for treeView feature, these are available to be
  99. * set using the ui-grid {@link ui.grid.class:GridOptions gridOptions}
  100. *
  101. * Many tree options are set on treeBase, make sure to look at that feature in
  102. * conjunction with these options.
  103. */
  104. /**
  105. * @ngdoc object
  106. * @name enableTreeView
  107. * @propertyOf ui.grid.treeView.api:GridOptions
  108. * @description Enable row tree view for entire grid.
  109. * <br/>Defaults to true
  110. */
  111. gridOptions.enableTreeView = gridOptions.enableTreeView !== false;
  112. },
  113. /**
  114. * @ngdoc function
  115. * @name adjustSorting
  116. * @methodOf ui.grid.treeBase.service:uiGridTreeBaseService
  117. * @description Trees cannot be sorted the same as flat lists of rows -
  118. * trees are sorted recursively within each level - so the children of each
  119. * node are sorted, but not the full set of rows.
  120. *
  121. * To achieve this, we suppress the normal sorting by setting ignoreSort on
  122. * each of the sort columns. When the treeBase rowsProcessor runs it will then
  123. * unignore these, and will perform a recursive sort against the tree that it builds.
  124. *
  125. * @param {array} renderableRows the rows that we need to pass on through
  126. * @returns {array} renderableRows that we passed on through
  127. */
  128. adjustSorting: function( renderableRows ) {
  129. var grid = this;
  130. grid.columns.forEach( function( column ){
  131. if ( column.sort ){
  132. column.sort.ignoreSort = true;
  133. }
  134. });
  135. return renderableRows;
  136. }
  137. };
  138. return service;
  139. }]);
  140. /**
  141. * @ngdoc directive
  142. * @name ui.grid.treeView.directive:uiGridTreeView
  143. * @element div
  144. * @restrict A
  145. *
  146. * @description Adds treeView features to grid
  147. *
  148. * @example
  149. <example module="app">
  150. <file name="app.js">
  151. var app = angular.module('app', ['ui.grid', 'ui.grid.treeView']);
  152. app.controller('MainCtrl', ['$scope', function ($scope) {
  153. $scope.data = [
  154. { name: 'Bob', title: 'CEO' },
  155. { name: 'Frank', title: 'Lowly Developer' }
  156. ];
  157. $scope.columnDefs = [
  158. {name: 'name', enableCellEdit: true},
  159. {name: 'title', enableCellEdit: true}
  160. ];
  161. $scope.gridOptions = { columnDefs: $scope.columnDefs, data: $scope.data };
  162. }]);
  163. </file>
  164. <file name="index.html">
  165. <div ng-controller="MainCtrl">
  166. <div ui-grid="gridOptions" ui-grid-tree-view></div>
  167. </div>
  168. </file>
  169. </example>
  170. */
  171. module.directive('uiGridTreeView', ['uiGridTreeViewConstants', 'uiGridTreeViewService', '$templateCache',
  172. function (uiGridTreeViewConstants, uiGridTreeViewService, $templateCache) {
  173. return {
  174. replace: true,
  175. priority: 0,
  176. require: '^uiGrid',
  177. scope: false,
  178. compile: function () {
  179. return {
  180. pre: function ($scope, $elm, $attrs, uiGridCtrl) {
  181. if (uiGridCtrl.grid.options.enableTreeView !== false){
  182. uiGridTreeViewService.initializeGrid(uiGridCtrl.grid, $scope);
  183. }
  184. },
  185. post: function ($scope, $elm, $attrs, uiGridCtrl) {
  186. }
  187. };
  188. }
  189. };
  190. }]);
  191. })();