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.

dataTables.rowGroup.js 10KB

2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
  1. /*! RowGroup 1.1.3
  2. * ©2017-2021 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary RowGroup
  6. * @description RowGrouping for DataTables
  7. * @version 1.1.3
  8. * @file dataTables.rowGroup.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact datatables.net
  11. * @copyright Copyright 2017-2021 SpryMedia Ltd.
  12. *
  13. * This source file is free software, available under the following license:
  14. * MIT license - http://datatables.net/license/mit
  15. *
  16. * This source file is distributed in the hope that it will be useful, but
  17. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  18. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  19. *
  20. * For details please refer to: http://www.datatables.net
  21. */
  22. (function( factory ){
  23. if ( typeof define === 'function' && define.amd ) {
  24. // AMD
  25. define( ['jquery', 'datatables.net'], function ( $ ) {
  26. return factory( $, window, document );
  27. } );
  28. }
  29. else if ( typeof exports === 'object' ) {
  30. // CommonJS
  31. module.exports = function (root, $) {
  32. if ( ! root ) {
  33. root = window;
  34. }
  35. if ( ! $ || ! $.fn.dataTable ) {
  36. $ = require('datatables.net')(root, $).$;
  37. }
  38. return factory( $, root, root.document );
  39. };
  40. }
  41. else {
  42. // Browser
  43. factory( jQuery, window, document );
  44. }
  45. }(function( $, window, document, undefined ) {
  46. 'use strict';
  47. var DataTable = $.fn.dataTable;
  48. var RowGroup = function ( dt, opts ) {
  49. // Sanity check that we are using DataTables 1.10 or newer
  50. if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.8' ) ) {
  51. throw 'RowGroup requires DataTables 1.10.8 or newer';
  52. }
  53. // User and defaults configuration object
  54. this.c = $.extend( true, {},
  55. DataTable.defaults.rowGroup,
  56. RowGroup.defaults,
  57. opts
  58. );
  59. // Internal settings
  60. this.s = {
  61. dt: new DataTable.Api( dt )
  62. };
  63. // DOM items
  64. this.dom = {
  65. };
  66. // Check if row grouping has already been initialised on this table
  67. var settings = this.s.dt.settings()[0];
  68. var existing = settings.rowGroup;
  69. if ( existing ) {
  70. return existing;
  71. }
  72. settings.rowGroup = this;
  73. this._constructor();
  74. };
  75. $.extend( RowGroup.prototype, {
  76. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  77. * API methods for DataTables API interface
  78. */
  79. /**
  80. * Get/set the grouping data source - need to call draw after this is
  81. * executed as a setter
  82. * @returns string~RowGroup
  83. */
  84. dataSrc: function ( val )
  85. {
  86. if ( val === undefined ) {
  87. return this.c.dataSrc;
  88. }
  89. var dt = this.s.dt;
  90. this.c.dataSrc = val;
  91. $(dt.table().node()).triggerHandler( 'rowgroup-datasrc.dt', [ dt, val ] );
  92. return this;
  93. },
  94. /**
  95. * Disable - need to call draw after this is executed
  96. * @returns RowGroup
  97. */
  98. disable: function ()
  99. {
  100. this.c.enable = false;
  101. return this;
  102. },
  103. /**
  104. * Enable - need to call draw after this is executed
  105. * @returns RowGroup
  106. */
  107. enable: function ( flag )
  108. {
  109. if ( flag === false ) {
  110. return this.disable();
  111. }
  112. this.c.enable = true;
  113. return this;
  114. },
  115. /**
  116. * Get enabled flag
  117. * @returns boolean
  118. */
  119. enabled: function ()
  120. {
  121. return this.c.enable;
  122. },
  123. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  124. * Constructor
  125. */
  126. _constructor: function ()
  127. {
  128. var that = this;
  129. var dt = this.s.dt;
  130. var hostSettings = dt.settings()[0];
  131. dt.on( 'draw.dtrg', function (e, s) {
  132. if ( that.c.enable && hostSettings === s ) {
  133. that._draw();
  134. }
  135. } );
  136. dt.on( 'column-visibility.dt.dtrg responsive-resize.dt.dtrg', function () {
  137. that._adjustColspan();
  138. } );
  139. dt.on( 'destroy', function () {
  140. dt.off( '.dtrg' );
  141. } );
  142. },
  143. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  144. * Private methods
  145. */
  146. /**
  147. * Adjust column span when column visibility changes
  148. * @private
  149. */
  150. _adjustColspan: function ()
  151. {
  152. $( 'tr.'+this.c.className, this.s.dt.table().body() ).find('td:visible')
  153. .attr( 'colspan', this._colspan() );
  154. },
  155. /**
  156. * Get the number of columns that a grouping row should span
  157. * @private
  158. */
  159. _colspan: function ()
  160. {
  161. return this.s.dt.columns().visible().reduce( function (a, b) {
  162. return a + b;
  163. }, 0 );
  164. },
  165. /**
  166. * Update function that is called whenever we need to draw the grouping rows.
  167. * This is basically a bootstrap for the self iterative _group and _groupDisplay
  168. * methods
  169. * @private
  170. */
  171. _draw: function ()
  172. {
  173. var dt = this.s.dt;
  174. var groupedRows = this._group( 0, dt.rows( { page: 'current' } ).indexes() );
  175. this._groupDisplay( 0, groupedRows );
  176. },
  177. /**
  178. * Get the grouping information from a data set (index) of rows
  179. * @param {number} level Nesting level
  180. * @param {DataTables.Api} rows API of the rows to consider for this group
  181. * @returns {object[]} Nested grouping information - it is structured like this:
  182. * {
  183. * dataPoint: 'Edinburgh',
  184. * rows: [ 1,2,3,4,5,6,7 ],
  185. * children: [ {
  186. * dataPoint: 'developer'
  187. * rows: [ 1, 2, 3 ]
  188. * },
  189. * {
  190. * dataPoint: 'support',
  191. * rows: [ 4, 5, 6, 7 ]
  192. * } ]
  193. * }
  194. * @private
  195. */
  196. _group: function ( level, rows ) {
  197. var fns = Array.isArray( this.c.dataSrc ) ? this.c.dataSrc : [ this.c.dataSrc ];
  198. var fn = DataTable.ext.oApi._fnGetObjectDataFn( fns[ level ] );
  199. var dt = this.s.dt;
  200. var group, last;
  201. var data = [];
  202. var that = this;
  203. for ( var i=0, ien=rows.length ; i<ien ; i++ ) {
  204. var rowIndex = rows[i];
  205. var rowData = dt.row( rowIndex ).data();
  206. var group = fn( rowData );
  207. if ( group === null || group === undefined ) {
  208. group = that.c.emptyDataGroup;
  209. }
  210. if ( last === undefined || group !== last ) {
  211. data.push( {
  212. dataPoint: group,
  213. rows: []
  214. } );
  215. last = group;
  216. }
  217. data[ data.length-1 ].rows.push( rowIndex );
  218. }
  219. if ( fns[ level+1 ] !== undefined ) {
  220. for ( var i=0, ien=data.length ; i<ien ; i++ ) {
  221. data[i].children = this._group( level+1, data[i].rows );
  222. }
  223. }
  224. return data;
  225. },
  226. /**
  227. * Row group display - insert the rows into the document
  228. * @param {number} level Nesting level
  229. * @param {object[]} groups Takes the nested array from `_group`
  230. * @private
  231. */
  232. _groupDisplay: function ( level, groups )
  233. {
  234. var dt = this.s.dt;
  235. var display;
  236. for ( var i=0, ien=groups.length ; i<ien ; i++ ) {
  237. var group = groups[i];
  238. var groupName = group.dataPoint;
  239. var row;
  240. var rows = group.rows;
  241. if ( this.c.startRender ) {
  242. display = this.c.startRender.call( this, dt.rows(rows), groupName, level );
  243. row = this._rowWrap( display, this.c.startClassName, level );
  244. if ( row ) {
  245. row.insertBefore( dt.row( rows[0] ).node() );
  246. }
  247. }
  248. if ( this.c.endRender ) {
  249. display = this.c.endRender.call( this, dt.rows(rows), groupName, level );
  250. row = this._rowWrap( display, this.c.endClassName, level );
  251. if ( row ) {
  252. row.insertAfter( dt.row( rows[ rows.length-1 ] ).node() );
  253. }
  254. }
  255. if ( group.children ) {
  256. this._groupDisplay( level+1, group.children );
  257. }
  258. }
  259. },
  260. /**
  261. * Take a rendered value from an end user and make it suitable for display
  262. * as a row, by wrapping it in a row, or detecting that it is a row.
  263. * @param {node|jQuery|string} display Display value
  264. * @param {string} className Class to add to the row
  265. * @param {array} group
  266. * @param {number} group level
  267. * @private
  268. */
  269. _rowWrap: function ( display, className, level )
  270. {
  271. var row;
  272. if ( display === null || display === '' ) {
  273. display = this.c.emptyDataGroup;
  274. }
  275. if ( display === undefined || display === null ) {
  276. return null;
  277. }
  278. if ( typeof display === 'object' && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
  279. row = $(display);
  280. }
  281. else if (display instanceof $ && display.length && display[0].nodeName.toLowerCase() === 'tr') {
  282. row = display;
  283. }
  284. else {
  285. row = $('<tr/>')
  286. .append(
  287. $('<td/>')
  288. .attr( 'colspan', this._colspan() )
  289. .append( display )
  290. );
  291. }
  292. return row
  293. .addClass( this.c.className )
  294. .addClass( className )
  295. .addClass( 'dtrg-level-'+level );
  296. }
  297. } );
  298. /**
  299. * RowGroup default settings for initialisation
  300. *
  301. * @namespace
  302. * @name RowGroup.defaults
  303. * @static
  304. */
  305. RowGroup.defaults = {
  306. /**
  307. * Class to apply to grouping rows - applied to both the start and
  308. * end grouping rows.
  309. * @type string
  310. */
  311. className: 'dtrg-group',
  312. /**
  313. * Data property from which to read the grouping information
  314. * @type string|integer|array
  315. */
  316. dataSrc: 0,
  317. /**
  318. * Text to show if no data is found for a group
  319. * @type string
  320. */
  321. emptyDataGroup: 'No group',
  322. /**
  323. * Initial enablement state
  324. * @boolean
  325. */
  326. enable: true,
  327. /**
  328. * Class name to give to the end grouping row
  329. * @type string
  330. */
  331. endClassName: 'dtrg-end',
  332. /**
  333. * End grouping label function
  334. * @function
  335. */
  336. endRender: null,
  337. /**
  338. * Class name to give to the start grouping row
  339. * @type string
  340. */
  341. startClassName: 'dtrg-start',
  342. /**
  343. * Start grouping label function
  344. * @function
  345. */
  346. startRender: function ( rows, group ) {
  347. return group;
  348. }
  349. };
  350. RowGroup.version = "1.1.3";
  351. $.fn.dataTable.RowGroup = RowGroup;
  352. $.fn.DataTable.RowGroup = RowGroup;
  353. DataTable.Api.register( 'rowGroup()', function () {
  354. return this;
  355. } );
  356. DataTable.Api.register( 'rowGroup().disable()', function () {
  357. return this.iterator( 'table', function (ctx) {
  358. if ( ctx.rowGroup ) {
  359. ctx.rowGroup.enable( false );
  360. }
  361. } );
  362. } );
  363. DataTable.Api.register( 'rowGroup().enable()', function ( opts ) {
  364. return this.iterator( 'table', function (ctx) {
  365. if ( ctx.rowGroup ) {
  366. ctx.rowGroup.enable( opts === undefined ? true : opts );
  367. }
  368. } );
  369. } );
  370. DataTable.Api.register( 'rowGroup().enabled()', function () {
  371. var ctx = this.context;
  372. return ctx.length && ctx[0].rowGroup ?
  373. ctx[0].rowGroup.enabled() :
  374. false;
  375. } );
  376. DataTable.Api.register( 'rowGroup().dataSrc()', function ( val ) {
  377. if ( val === undefined ) {
  378. return this.context[0].rowGroup.dataSrc();
  379. }
  380. return this.iterator( 'table', function (ctx) {
  381. if ( ctx.rowGroup ) {
  382. ctx.rowGroup.dataSrc( val );
  383. }
  384. } );
  385. } );
  386. // Attach a listener to the document which listens for DataTables initialisation
  387. // events so we can automatically initialise
  388. $(document).on( 'preInit.dt.dtrg', function (e, settings, json) {
  389. if ( e.namespace !== 'dt' ) {
  390. return;
  391. }
  392. var init = settings.oInit.rowGroup;
  393. var defaults = DataTable.defaults.rowGroup;
  394. if ( init || defaults ) {
  395. var opts = $.extend( {}, defaults, init );
  396. if ( init !== false ) {
  397. new RowGroup( settings, opts );
  398. }
  399. }
  400. } );
  401. return RowGroup;
  402. }));