From 0649f658feee960b629e569004f257a785f30dc9 Mon Sep 17 00:00:00 2001 From: Jason Gordon Date: Tue, 21 Mar 2017 10:07:20 -0500 Subject: [PATCH 1/2] multi row reorder enhancement - allow for multiple rows to be reordered at once - includes test html --- examples/test.html | 562 ++++++++++++++++++++++++++++++++++++ js/dataTables.rowReorder.js | 42 ++- 2 files changed, 598 insertions(+), 6 deletions(-) create mode 100644 examples/test.html diff --git a/examples/test.html b/examples/test.html new file mode 100644 index 0000000..70c7eb9 --- /dev/null +++ b/examples/test.html @@ -0,0 +1,562 @@ + + + + + + DataTables Multi RowReorder + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Seq.NamePositionOfficeStart dateSalary
Seq.NamePositionOfficeStart dateSalary
2Tiger NixonSystem ArchitectEdinburgh2011/04/25$320,800
22Garrett WintersAccountantTokyo2011/07/25$170,750
6Ashton CoxJunior Technical AuthorSan Francisco2009/01/12$86,000
41Cedric KellySenior Javascript DeveloperEdinburgh2012/03/29$433,060
55Airi SatouAccountantTokyo2008/11/28$162,700
21Brielle WilliamsonIntegration SpecialistNew York2012/12/02$372,000
46Herrod ChandlerSales AssistantSan Francisco2012/08/06$137,500
50Rhona DavidsonIntegration SpecialistTokyo2010/10/14$327,900
26Colleen HurstJavascript DeveloperSan Francisco2009/09/15$205,500
18Sonya FrostSoftware EngineerEdinburgh2008/12/13$103,600
13Jena GainesOffice ManagerLondon2008/12/19$90,560
23Quinn FlynnSupport LeadEdinburgh2013/03/03$342,000
14Charde MarshallRegional DirectorSan Francisco2008/10/16$470,600
12Haley KennedySenior Marketing DesignerLondon2012/12/18$313,500
54Tatyana FitzpatrickRegional DirectorLondon2010/03/17$385,750
37Michael SilvaMarketing DesignerLondon2012/11/27$198,500
32Paul ByrdChief Financial Officer (CFO)New York2010/06/09$725,000
35Gloria LittleSystems AdministratorNew York2009/04/10$237,500
48Bradley GreerSoftware EngineerLondon2012/10/13$132,000
45Dai RiosPersonnel LeadEdinburgh2012/09/26$217,500
17Jenette CaldwellDevelopment LeadNew York2011/09/03$345,000
57Yuri BerryChief Marketing Officer (CMO)New York2009/06/25$675,000
29Caesar VancePre-Sales SupportNew York2011/12/12$106,450
56Doris WilderSales AssistantSidney2010/09/20$85,600
36Angelica RamosChief Executive Officer (CEO)London2009/10/09$1,200,000
5Gavin JoyceDeveloperEdinburgh2010/12/22$92,575
51Jennifer ChangRegional DirectorSingapore2010/11/14$357,650
20Brenden WagnerSoftware EngineerSan Francisco2011/06/07$206,850
7Fiona GreenChief Operating Officer (COO)San Francisco2010/03/11$850,000
1Shou ItouRegional MarketingTokyo2011/08/14$163,000
39Michelle HouseIntegration SpecialistSidney2011/06/02$95,400
40Suki BurksDeveloperLondon2009/10/22$114,500
47Prescott BartlettTechnical AuthorLondon2011/05/07$145,000
52Gavin CortezTeam LeaderSan Francisco2008/10/26$235,500
8Martena MccrayPost-Sales supportEdinburgh2011/03/09$324,050
24Unity ButlerMarketing DesignerSan Francisco2009/12/09$85,675
38Howard HatfieldOffice ManagerSan Francisco2008/12/16$164,500
53Hope FuentesSecretarySan Francisco2010/02/12$109,850
30Vivian HarrellFinancial ControllerSan Francisco2009/02/14$452,500
28Timothy MooneyOffice ManagerLondon2008/12/11$136,200
34Jackson BradshawDirectorNew York2008/09/26$645,750
4Olivia LiangSupport EngineerSingapore2011/02/03$234,500
3Bruno NashSoftware EngineerLondon2011/05/03$163,500
31Sakura YamamotoSupport EngineerTokyo2009/08/19$139,575
11Thor WaltonDeveloperNew York2013/08/11$98,540
10Finn CamachoSupport EngineerSan Francisco2009/07/07$87,500
44Serge BaldwinData CoordinatorSingapore2012/04/09$138,575
42Zenaida FrankSoftware EngineerNew York2010/01/04$125,250
27Zorita SerranoSoftware EngineerSan Francisco2012/06/01$115,000
49Jennifer AcostaJunior Javascript DeveloperEdinburgh2013/02/01$75,650
15Cara StevensSales AssistantNew York2011/12/06$145,600
9Hermione ButlerRegional DirectorLondon2011/03/21$356,250
25Lael GreerSystems AdministratorLondon2009/02/27$103,500
33Jonas AlexanderDeveloperSan Francisco2010/07/14$86,500
43Shad DeckerRegional DirectorEdinburgh2008/11/13$183,000
16Michael BruceJavascript DeveloperSingapore2011/06/27$183,000
19Donna SniderCustomer SupportNew York2011/01/25$112,000
+ + \ No newline at end of file diff --git a/js/dataTables.rowReorder.js b/js/dataTables.rowReorder.js index 4aed29a..e172395 100644 --- a/js/dataTables.rowReorder.js +++ b/js/dataTables.rowReorder.js @@ -246,7 +246,11 @@ $.extend( RowReorder.prototype, { // Match the table and column widths - read all sizes before setting // to reduce reflows var tableWidth = target.outerWidth(); - var tableHeight = target.outerHeight(); + var tableHeight = 0; + target.each(function(i,n) { + tableHeight += $(n).outerHeight(); + }); + var sizes = target.children().map( function () { return $(this).width(); } ); @@ -342,6 +346,7 @@ $.extend( RowReorder.prototype, { var that = this; var dt = this.s.dt; var start = this.s.start; + dt.row($(target)).select(); var offset = target.offset(); start.top = this._eventToPage( e, 'Y' ); @@ -350,10 +355,19 @@ $.extend( RowReorder.prototype, { start.offsetLeft = offset.left; start.nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() ); + // this will obtain rows in the their sorted order, regardless of which row is actually being dragged + $.merge(target, target.siblings('.selected')); + $.uniqueSort(target); + //********************************** this._cachePositions(); this._clone( target ); this._clonePosition( e ); + // done after cloning so class doesn't get applied to it + if (this.c.placeholder) { + target.addClass( this.c.placeholder ); + } + this.dom.target = target; target.addClass( 'dt-rowReorder-moving' ); @@ -403,6 +417,7 @@ $.extend( RowReorder.prototype, { var insertPoint = null; var dt = this.s.dt; var body = dt.table().body(); + var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() ); // Determine where the row should be inserted based on the mouse // position @@ -423,13 +438,24 @@ $.extend( RowReorder.prototype, { this.dom.target.prependTo( body ); } else { - var nodes = $.unique( dt.rows( { page: 'current' } ).nodes().toArray() ); - if ( insertPoint > this.s.lastInsert ) { - this.dom.target.insertAfter( nodes[ insertPoint-1 ] ); + var buffer = this.dom.target.length-1; + + if (!nodes[ insertPoint+buffer ]) { + // reached end of table + this.dom.target.appendTo( body ); + } else if ( $(nodes[ insertPoint ]).hasClass('dt-rowReorder-moving') ) { + this.dom.target.insertBefore( nodes[ insertPoint+buffer ] ); + } else { + this.dom.target.insertAfter( nodes[ insertPoint+buffer-1 ] ); + } } else { - this.dom.target.insertBefore( nodes[ insertPoint ] ); + if ( $(nodes[ insertPoint ]).hasClass('dt-rowReorder-moving') ) { + // do nothing + } else { + this.dom.target.insertBefore( nodes[ insertPoint ] ); + } } } @@ -460,6 +486,10 @@ $.extend( RowReorder.prototype, { this.dom.clone = null; this.dom.target.removeClass( 'dt-rowReorder-moving' ); + dt.rows( $(this.dom.target) ).deselect(); + if (this.c.placeholder) { + this.dom.target.removeClass( this.c.placeholder ); + } //this.dom.target = null; $(document).off( '.rowReorder' ); @@ -504,7 +534,7 @@ $.extend( RowReorder.prototype, { dataSrc: dataSrc, nodes: diffNodes, values: idDiff, - triggerRow: dt.row( this.dom.target ) + triggerRow: dt.rows( this.dom.target ) } ]; // Emit event From 03168edda46a77f163ec4a926ff4a15c1cc7f1c8 Mon Sep 17 00:00:00 2001 From: Jason Gordon Date: Tue, 21 Mar 2017 10:11:20 -0500 Subject: [PATCH 2/2] forgot added default option --- js/dataTables.rowReorder.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/dataTables.rowReorder.js b/js/dataTables.rowReorder.js index e172395..8c93294 100644 --- a/js/dataTables.rowReorder.js +++ b/js/dataTables.rowReorder.js @@ -726,7 +726,14 @@ RowReorder.defaults = { * * @type {Boolean} */ - update: true + update: true, + + /** + * This mimics jQuery UI sortable placeholder. Provide a class to be applied to tr. + * + * @type {String} + */ + placeholder: false };