Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Tablesorter + Drag Columns
Bonjour,
j'aimerais combiner le plugin Tablesorter avec un plugin permettant de faire un Drag&Drop pour deplacer les columns.
J'ai essayé avec le plugin Dragtable, malheureusement les 2 ne passent pas ensemble..
Est-ce-que quelqu'un aurait une solution rapide pour faire ca ?
Merci d'avance,
cordialement
Combiner deux plug-ins, c'est mission impossible. Chacun a son propre mode de fonctionnement.
Il faut faire ta propre version du plug-in ou en choisir un autre. Essaie toujours de demander à l'auteur du plug-in, peut-être qu'il implémentera la fonctionnalité.
ba au final j'ai combiné les 2 en modifiant légèrement le code de dragTable.
j'ai fait que le drag&drop se declanche apres un timeout, ce qui fait que quand l'utilisateur clique brievement sur un header, ca trie, s'il reste un peu plus longtemps ca enclenche le drag&drop
si ca interesse quelqu'un je veux bien donner mes modifications !
Ah ben bravoOui n'hésites pas à poster ton code, ça sera peut-être utile pour certains visiteurs
C'est vrai que le premier problème auquel j'ai pensé c'est l'action sur les headers de colonne. Par contre tu arrives à persister l'ordre ?
c'est pas forcément le plus propre, parce que la methode setTimeout ne s'utilise que avec un String, donc j'ai été obligé de sauvegarder plusieurs objets à l'intérieur même du plugin.
Si quelqu'un a une solution plus "propre" je suis preneur
Avant
Après (en gras les 10 ligne que j'ai rajouté)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157_create: function() { //console.log(this); //used start/end of drag this.startIndex = null; this.endIndex = null; this.currentColumnCollection = [];//the refferences to the table cells that are getting dragged //used on drag event to detect what direction the mouse is moving //init on drag start this.prevMouseX = 0; var self = this, o = self.options, el = self.element; //grab the ths and the handles and bind them el.find(o.items).mousedown(function(e) { self.myDragEvent = e; self.myDragElement = this; window.setTimeout("$('#myTablesorter').dragtable('makeEvent')",100); //############ }); $(document).mouseup(function() { self.myDragElement = null; }); }, myDragElement : null, myDragEvent : null, makeEvent: function() { if (this.myDragElement == null) return; var e = this.myDragEvent; var self = this, o = self.options, el = self.element; //el.delegate(o.items, 'mousedown.' + self.widgetEventPrefix, function(e){ var $handle = $(this.myDragElement), //position the drag dispaly to rel to the middle of the target co offsetLeft = this.myDragElement.offsetLeft; //make sure we are working with a th instead of a handle if( $handle.hasClass( o.handle ) ){ $handle = $handle.closest('th'); offsetLeft = $handle[0].offsetLeft; self._positionOffset = e.pageX + offsetLeft; //console.log( 'handle was clicked using th', $handle, offsetLeft) } var $dragDisplay = self.getCol( $handle.index() ); self._positionOffset = e.pageX - offsetLeft; //console.log( $handle.width(), $handle[0] ) var half = self.currentColumnCollection[0].clientWidth / 2, parentOffset = self._findElementPosition(el.parent()[0]); //figure out the width of the display and the top left of it //console.log( 'offsetLeft',offsetLeft, ' e.x',e.pageX ); $dragDisplay .attr( 'tabindex', -1 ) .focus() .disableSelection() .css({ top: el[0].offsetTop, //using the parentOff.set makes e.pageX reletive to the parent element. This fixes the issue of the drag display not showing up under cursor on drag. //left: ((e.pageX - parentOffset.x) + (parseInt('-' + half))) left: offsetLeft }) .insertAfter( self.element ) //get the colum count var colCount = self.element[ 0 ] .getElementsByTagName( 'thead' )[ 0 ] .getElementsByTagName( 'tr' )[ 0 ] .getElementsByTagName( 'th' ) .length - 1; //console.log( 'col count', colCount ); //drag the column around //TODO: make col switching relitvte to the silibing cols, not pageX self.prevMouseX = offsetLeft; //console.log(dragDisplay) //TODO: dep self._eventHelper('displayHelper', e ,{ 'draggable': $dragDisplay }); self._eventHelper('start',e,{ 'draggable': $dragDisplay }); $( document ) .disableSelection() .css( 'cursor', 'move') .bind('mousemove.' + self.widgetEventPrefix, function( e ){ var columnPos = self._findElementPosition(self.currentColumnCollection[0]), colHalfWidth = Math.floor( self.currentColumnCollection[0].clientWidth / 2 ); //console.log( $dragDisplay.css('left'),'e.pageX ',e.pageX,'postion offset ', self._positionOffset, 'colpos.x ', columnPos.x) //console.log( 'half width colHalfWidth ', colHalfWidth) $dragDisplay .css( 'left', ( e.pageX - self._positionOffset ) ) if(e.pageX < self.prevMouseX){ //move left var threshold = columnPos.x - colHalfWidth; //console.log( 'threshold ',threshold, e.pageX - self._positionOffset ) if(e.pageX - self._positionOffset < threshold ){ self._swapCol(self.startIndex-1); self._eventHelper('change',e); } }else{ //move right var threshold = columnPos.x + colHalfWidth * 2; //console.log('move right ', columnPos.x, threshold, e.pageX ); //move to the right only if x is greater than threshold and the current col isn' the last one if(e.pageX > threshold && colCount != self.startIndex ){ //console.info('move right'); self._swapCol( self.startIndex + 1 ); self._eventHelper('change',e); } } //update mouse position self.prevMouseX = e.pageX; }) .one( 'mouseup.dragtable',function(){ $( document ) .css({ cursor: 'auto' }) .enableSelection() .unbind( 'mousemove.' + self.widgetEventPrefix ); self._dropCol($dragDisplay); self.prevMouseX = 0; self._eventHelper('stop',e); }); },
c'est pas une fonctionalité prévue avec JQGrid ou dataTable ?
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Répondre avec citation
Partager