Built files from Bizgaze WebServer
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

data_tree.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  2. /* Tabulator v4.8.2 (c) Oliver Folkerd */
  3. var DataTree = function DataTree(table) {
  4. this.table = table;
  5. this.indent = 10;
  6. this.field = "";
  7. this.collapseEl = null;
  8. this.expandEl = null;
  9. this.branchEl = null;
  10. this.elementField = false;
  11. this.startOpen = function () {};
  12. this.displayIndex = 0;
  13. };
  14. DataTree.prototype.initialize = function () {
  15. var dummyEl = null,
  16. firstCol = this.table.columnManager.getFirstVisibileColumn(),
  17. options = this.table.options;
  18. this.field = options.dataTreeChildField;
  19. this.indent = options.dataTreeChildIndent;
  20. this.elementField = options.dataTreeElementColumn || (firstCol ? firstCol.field : false);
  21. if (options.dataTreeBranchElement) {
  22. if (options.dataTreeBranchElement === true) {
  23. this.branchEl = document.createElement("div");
  24. this.branchEl.classList.add("tabulator-data-tree-branch");
  25. } else {
  26. if (typeof options.dataTreeBranchElement === "string") {
  27. dummyEl = document.createElement("div");
  28. dummyEl.innerHTML = options.dataTreeBranchElement;
  29. this.branchEl = dummyEl.firstChild;
  30. } else {
  31. this.branchEl = options.dataTreeBranchElement;
  32. }
  33. }
  34. }
  35. if (options.dataTreeCollapseElement) {
  36. if (typeof options.dataTreeCollapseElement === "string") {
  37. dummyEl = document.createElement("div");
  38. dummyEl.innerHTML = options.dataTreeCollapseElement;
  39. this.collapseEl = dummyEl.firstChild;
  40. } else {
  41. this.collapseEl = options.dataTreeCollapseElement;
  42. }
  43. } else {
  44. this.collapseEl = document.createElement("div");
  45. this.collapseEl.classList.add("tabulator-data-tree-control");
  46. this.collapseEl.tabIndex = 0;
  47. this.collapseEl.innerHTML = "<div class='tabulator-data-tree-control-collapse'></div>";
  48. }
  49. if (options.dataTreeExpandElement) {
  50. if (typeof options.dataTreeExpandElement === "string") {
  51. dummyEl = document.createElement("div");
  52. dummyEl.innerHTML = options.dataTreeExpandElement;
  53. this.expandEl = dummyEl.firstChild;
  54. } else {
  55. this.expandEl = options.dataTreeExpandElement;
  56. }
  57. } else {
  58. this.expandEl = document.createElement("div");
  59. this.expandEl.classList.add("tabulator-data-tree-control");
  60. this.expandEl.tabIndex = 0;
  61. this.expandEl.innerHTML = "<div class='tabulator-data-tree-control-expand'></div>";
  62. }
  63. switch (_typeof(options.dataTreeStartExpanded)) {
  64. case "boolean":
  65. this.startOpen = function (row, index) {
  66. return options.dataTreeStartExpanded;
  67. };
  68. break;
  69. case "function":
  70. this.startOpen = options.dataTreeStartExpanded;
  71. break;
  72. default:
  73. this.startOpen = function (row, index) {
  74. return options.dataTreeStartExpanded[index];
  75. };
  76. break;
  77. }
  78. };
  79. DataTree.prototype.initializeRow = function (row) {
  80. var childArray = row.getData()[this.field];
  81. var isArray = Array.isArray(childArray);
  82. var children = isArray || !isArray && (typeof childArray === "undefined" ? "undefined" : _typeof(childArray)) === "object" && childArray !== null;
  83. if (!children && row.modules.dataTree && row.modules.dataTree.branchEl) {
  84. row.modules.dataTree.branchEl.parentNode.removeChild(row.modules.dataTree.branchEl);
  85. }
  86. if (!children && row.modules.dataTree && row.modules.dataTree.controlEl) {
  87. row.modules.dataTree.controlEl.parentNode.removeChild(row.modules.dataTree.controlEl);
  88. }
  89. row.modules.dataTree = {
  90. index: row.modules.dataTree ? row.modules.dataTree.index : 0,
  91. open: children ? row.modules.dataTree ? row.modules.dataTree.open : this.startOpen(row.getComponent(), 0) : false,
  92. controlEl: row.modules.dataTree && children ? row.modules.dataTree.controlEl : false,
  93. branchEl: row.modules.dataTree && children ? row.modules.dataTree.branchEl : false,
  94. parent: row.modules.dataTree ? row.modules.dataTree.parent : false,
  95. children: children
  96. };
  97. };
  98. DataTree.prototype.layoutRow = function (row) {
  99. var cell = this.elementField ? row.getCell(this.elementField) : row.getCells()[0],
  100. el = cell.getElement(),
  101. config = row.modules.dataTree;
  102. if (config.branchEl) {
  103. if (config.branchEl.parentNode) {
  104. config.branchEl.parentNode.removeChild(config.branchEl);
  105. }
  106. config.branchEl = false;
  107. }
  108. if (config.controlEl) {
  109. if (config.controlEl.parentNode) {
  110. config.controlEl.parentNode.removeChild(config.controlEl);
  111. }
  112. config.controlEl = false;
  113. }
  114. this.generateControlElement(row, el);
  115. row.element.classList.add("tabulator-tree-level-" + config.index);
  116. if (config.index) {
  117. if (this.branchEl) {
  118. config.branchEl = this.branchEl.cloneNode(true);
  119. el.insertBefore(config.branchEl, el.firstChild);
  120. if (this.table.rtl) {
  121. config.branchEl.style.marginRight = (config.branchEl.offsetWidth + config.branchEl.style.marginLeft) * (config.index - 1) + config.index * this.indent + "px";
  122. } else {
  123. config.branchEl.style.marginLeft = (config.branchEl.offsetWidth + config.branchEl.style.marginRight) * (config.index - 1) + config.index * this.indent + "px";
  124. }
  125. } else {
  126. if (this.table.rtl) {
  127. el.style.paddingRight = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-right')) + config.index * this.indent + "px";
  128. } else {
  129. el.style.paddingLeft = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-left')) + config.index * this.indent + "px";
  130. }
  131. }
  132. }
  133. };
  134. DataTree.prototype.generateControlElement = function (row, el) {
  135. var _this = this;
  136. var config = row.modules.dataTree,
  137. el = el || row.getCells()[0].getElement(),
  138. oldControl = config.controlEl;
  139. if (config.children !== false) {
  140. if (config.open) {
  141. config.controlEl = this.collapseEl.cloneNode(true);
  142. config.controlEl.addEventListener("click", function (e) {
  143. e.stopPropagation();
  144. _this.collapseRow(row);
  145. });
  146. } else {
  147. config.controlEl = this.expandEl.cloneNode(true);
  148. config.controlEl.addEventListener("click", function (e) {
  149. e.stopPropagation();
  150. _this.expandRow(row);
  151. });
  152. }
  153. config.controlEl.addEventListener("mousedown", function (e) {
  154. e.stopPropagation();
  155. });
  156. if (oldControl && oldControl.parentNode === el) {
  157. oldControl.parentNode.replaceChild(config.controlEl, oldControl);
  158. } else {
  159. el.insertBefore(config.controlEl, el.firstChild);
  160. }
  161. }
  162. };
  163. DataTree.prototype.setDisplayIndex = function (index) {
  164. this.displayIndex = index;
  165. };
  166. DataTree.prototype.getDisplayIndex = function () {
  167. return this.displayIndex;
  168. };
  169. DataTree.prototype.getRows = function (rows) {
  170. var _this2 = this;
  171. var output = [];
  172. rows.forEach(function (row, i) {
  173. var config, children;
  174. output.push(row);
  175. if (row instanceof Row) {
  176. config = row.modules.dataTree.children;
  177. if (!config.index && config.children !== false) {
  178. children = _this2.getChildren(row);
  179. children.forEach(function (child) {
  180. output.push(child);
  181. });
  182. }
  183. }
  184. });
  185. return output;
  186. };
  187. DataTree.prototype.getChildren = function (row) {
  188. var _this3 = this;
  189. var config = row.modules.dataTree,
  190. children = [],
  191. output = [];
  192. if (config.children !== false && config.open) {
  193. if (!Array.isArray(config.children)) {
  194. config.children = this.generateChildren(row);
  195. }
  196. if (this.table.modExists("filter") && this.table.options.dataTreeFilter) {
  197. children = this.table.modules.filter.filter(config.children);
  198. } else {
  199. children = config.children;
  200. }
  201. if (this.table.modExists("sort") && this.table.options.dataTreeSort) {
  202. this.table.modules.sort.sort(children);
  203. }
  204. children.forEach(function (child) {
  205. output.push(child);
  206. var subChildren = _this3.getChildren(child);
  207. subChildren.forEach(function (sub) {
  208. output.push(sub);
  209. });
  210. });
  211. }
  212. return output;
  213. };
  214. DataTree.prototype.generateChildren = function (row) {
  215. var _this4 = this;
  216. var children = [];
  217. var childArray = row.getData()[this.field];
  218. if (!Array.isArray(childArray)) {
  219. childArray = [childArray];
  220. }
  221. childArray.forEach(function (childData) {
  222. var childRow = new Row(childData || {}, _this4.table.rowManager);
  223. childRow.modules.dataTree.index = row.modules.dataTree.index + 1;
  224. childRow.modules.dataTree.parent = row;
  225. if (childRow.modules.dataTree.children) {
  226. childRow.modules.dataTree.open = _this4.startOpen(childRow.getComponent(), childRow.modules.dataTree.index);
  227. }
  228. children.push(childRow);
  229. });
  230. return children;
  231. };
  232. DataTree.prototype.expandRow = function (row, silent) {
  233. var config = row.modules.dataTree;
  234. if (config.children !== false) {
  235. config.open = true;
  236. row.reinitialize();
  237. this.table.rowManager.refreshActiveData("tree", false, true);
  238. this.table.options.dataTreeRowExpanded(row.getComponent(), row.modules.dataTree.index);
  239. }
  240. };
  241. DataTree.prototype.collapseRow = function (row) {
  242. var config = row.modules.dataTree;
  243. if (config.children !== false) {
  244. config.open = false;
  245. row.reinitialize();
  246. this.table.rowManager.refreshActiveData("tree", false, true);
  247. this.table.options.dataTreeRowCollapsed(row.getComponent(), row.modules.dataTree.index);
  248. }
  249. };
  250. DataTree.prototype.toggleRow = function (row) {
  251. var config = row.modules.dataTree;
  252. if (config.children !== false) {
  253. if (config.open) {
  254. this.collapseRow(row);
  255. } else {
  256. this.expandRow(row);
  257. }
  258. }
  259. };
  260. DataTree.prototype.getTreeParent = function (row) {
  261. return row.modules.dataTree.parent ? row.modules.dataTree.parent.getComponent() : false;
  262. };
  263. DataTree.prototype.getFilteredTreeChildren = function (row) {
  264. var config = row.modules.dataTree,
  265. output = [],
  266. children;
  267. if (config.children) {
  268. if (!Array.isArray(config.children)) {
  269. config.children = this.generateChildren(row);
  270. }
  271. if (this.table.modExists("filter") && this.table.options.dataTreeFilter) {
  272. children = this.table.modules.filter.filter(config.children);
  273. } else {
  274. children = config.children;
  275. }
  276. children.forEach(function (childRow) {
  277. if (childRow instanceof Row) {
  278. output.push(childRow);
  279. }
  280. });
  281. }
  282. return output;
  283. };
  284. DataTree.prototype.rowDelete = function (row) {
  285. var parent = row.modules.dataTree.parent,
  286. childIndex;
  287. if (parent) {
  288. childIndex = this.findChildIndex(row, parent);
  289. if (childIndex !== false) {
  290. parent.data[this.field].splice(childIndex, 1);
  291. }
  292. if (!parent.data[this.field].length) {
  293. delete parent.data[this.field];
  294. }
  295. this.initializeRow(parent);
  296. this.layoutRow(parent);
  297. }
  298. this.table.rowManager.refreshActiveData("tree", false, true);
  299. };
  300. DataTree.prototype.addTreeChildRow = function (row, data, top, index) {
  301. var childIndex = false;
  302. if (typeof data === "string") {
  303. data = JSON.parse(data);
  304. }
  305. if (!Array.isArray(row.data[this.field])) {
  306. row.data[this.field] = [];
  307. row.modules.dataTree.open = this.startOpen(row.getComponent(), row.modules.dataTree.index);
  308. }
  309. if (typeof index !== "undefined") {
  310. childIndex = this.findChildIndex(index, row);
  311. if (childIndex !== false) {
  312. row.data[this.field].splice(top ? childIndex : childIndex + 1, 0, data);
  313. }
  314. }
  315. if (childIndex === false) {
  316. if (top) {
  317. row.data[this.field].unshift(data);
  318. } else {
  319. row.data[this.field].push(data);
  320. }
  321. }
  322. this.initializeRow(row);
  323. this.layoutRow(row);
  324. this.table.rowManager.refreshActiveData("tree", false, true);
  325. };
  326. DataTree.prototype.findChildIndex = function (subject, parent) {
  327. var _this5 = this;
  328. var match = false;
  329. if ((typeof subject === "undefined" ? "undefined" : _typeof(subject)) == "object") {
  330. if (subject instanceof Row) {
  331. //subject is row element
  332. match = subject.data;
  333. } else if (subject instanceof RowComponent) {
  334. //subject is public row component
  335. match = subject._getSelf().data;
  336. } else if (typeof HTMLElement !== "undefined" && subject instanceof HTMLElement) {
  337. if (parent.modules.dataTree) {
  338. match = parent.modules.dataTree.children.find(function (childRow) {
  339. return childRow instanceof Row ? childRow.element === subject : false;
  340. });
  341. if (match) {
  342. match = match.data;
  343. }
  344. }
  345. }
  346. } else if (typeof subject == "undefined" || subject === null) {
  347. match = false;
  348. } else {
  349. //subject should be treated as the index of the row
  350. match = parent.data[this.field].find(function (row) {
  351. return row.data[_this5.table.options.index] == subject;
  352. });
  353. }
  354. if (match) {
  355. if (Array.isArray(parent.data[this.field])) {
  356. match = parent.data[this.field].indexOf(match);
  357. }
  358. if (match == -1) {
  359. match = false;
  360. }
  361. }
  362. //catch all for any other type of input
  363. return match;
  364. };
  365. DataTree.prototype.getTreeChildren = function (row, component, recurse) {
  366. var _this6 = this;
  367. var config = row.modules.dataTree,
  368. output = [];
  369. if (config.children) {
  370. if (!Array.isArray(config.children)) {
  371. config.children = this.generateChildren(row);
  372. }
  373. config.children.forEach(function (childRow) {
  374. if (childRow instanceof Row) {
  375. output.push(component ? childRow.getComponent() : childRow);
  376. if (recurse) {
  377. output = output.concat(_this6.getTreeChildren(childRow, component, recurse));
  378. }
  379. }
  380. });
  381. }
  382. return output;
  383. };
  384. DataTree.prototype.checkForRestyle = function (cell) {
  385. if (!cell.row.cells.indexOf(cell)) {
  386. cell.row.reinitialize();
  387. }
  388. };
  389. DataTree.prototype.getChildField = function () {
  390. return this.field;
  391. };
  392. DataTree.prototype.redrawNeeded = function (data) {
  393. return (this.field ? typeof data[this.field] !== "undefined" : false) || (this.elementField ? typeof data[this.elementField] !== "undefined" : false);
  394. };
  395. Tabulator.prototype.registerModule("dataTree", DataTree);