Jquery UI sorting multiple table row at once -
i have problem jqueryui sorting.
now have table sorting on tr , it's working, have sort 2 row @ once. in example below have sort row g1 or g2 or g3.
now after having beaten head against wall hours i'm here ask help.
queryui sort have option item, try use can't make itwork in table.
there way that? can me?
i try here https://jsfiddle.net/n29ekt42/
<table> <thead> <tr> <th>t1</th> <th>t1</th> <th>t1</th> </tr> </thead> <tbody> <tr> <td>g1</td> <td>g1</td> <td>g1</td> </tr> <tr> <td>g1</td> <td>g1</td> <td>g1</td> </tr> <tr> <td>g2</td> <td>g2</td> <td>g2</td> </tr> <tr> <td>g2</td> <td>g2</td> <td>g2</td> </tr> <tr> <td>g3</td> <td>g3</td> <td>g3</td> </tr> <tr> <td>g3</td> <td>g3</td> <td>g3</td> </tr> </tbody> </table> function assignsortattach() { $("table tbody").sortable({ start: function( event, ui ) { var aa = $this.attr('data-row'); } }) } // tr sortable $(function () { assignsortattach() });
i found more difficult anticipated, took stab @ it. forked fiddle , made updates.
working example: https://jsfiddle.net/twisty/n29ekt42/13/
i added handle column.
html
<table> <thead> <tr> <th></th> <th>t1</th> <th>t1</th> <th>t1</th> </tr> </thead> <tbody> <tr> <td><span class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td> <td>g1</td> <td>g1</td> <td>g1</td> </tr> ... lots of css, if like.
css
table { border-collapse: collapse; } table thead tr { margin-left: 20px; } table tbody tr { border: 1px solid #ccc; } tr.ui-selecting { background: #feca40; } tr.ui-selected { background: #f39814; color: white; } .hidden { display: none; } jquery
function assignsortattach() { $("table tbody").sortable({ axis: "y", cursor: "grabbing", handle: ".handle", opacity: 0.6, helper: function(e, item) { console.log("parent-helper: ", item); if (!item.hasclass("ui-selected")) { item.addclass("ui-selected"); } // clone selected elements var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone(); console.log("making helper: ", elements); // hide selected elements item.siblings(".ui-selected").addclass("hidden"); var helper = $("<table />"); helper.append(elements); console.log("helper: ", helper); return helper; }, start: function(e, ui) { var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder'); ui.item.data("items", elements); }, update: function(e, ui) { console.log("receiving: ", ui.item.data("items")); $.each(ui.item.data("items"), function(k, v) { console.log("appending ", v, " before ", ui.item); ui.item.before(v); }); }, stop: function(e, ui) { ui.item.siblings(".ui-selected").removeclass("hidden"); $("tr.ui-selected").removeclass("ui-selected"); } }) .selectable({ filter: "tr", cancel: ".handle" }) } $(function() { assignsortattach(); }); this adapted code here: jquery sortable - drag , drop multiple items , here: jquery ui sortable & selectable
credit using sort , select goes mhu. works well, since can drag-select or ctrl+click select rows like. can drag , select group or click unqiue items group ion drag. using drag handle, user can sort selected rows.
tj gives ability sort multiple items. demo designed move elements between separate lists, switched events receive update.
from flippant comment answer, hope helps.
updates after comments
working example: https://jsfiddle.net/twisty/lbu7ytbj/
i change html group rows:
<table> <thead> <tr> <th> </th> <th>t1</th> <th>t1</th> <th>t1</th> </tr> </thead> <tbody> <tr> <td rowspan="2"><span data-group="1" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td> <td>g1</td> <td>g1</td> <td>g1</td> </tr> <tr> <td>g1</td> <td>g1</td> <td>g1</td> </tr> </tbody> <tbody> <tr> <td rowspan="2"><span data-group="3" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td> <td>g2</td> <td>g2</td> <td>g2</td> </tr> <tr> <td>g2</td> <td>g2</td> <td>g2</td> </tr> </tbody> <tbody> <tr> <td rowspan="2"><span data-group="5" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td> <td>g3</td> <td>g3</td> <td>g3</td> </tr> <tr> <td>g3</td> <td>g3</td> <td>g3</td> </tr> </tbody> </table> now had adjust sortable use table , not use thead.
function assignsortattach() { $("table").sortable({ axis: "y", cursor: "grabbing", handle: ".handle", cancel: "thead", opacity: 0.6, placeholder: "two-place", helper: function(e, item) { if (!item.hasclass("selected")) { item.addclass("selected"); } console.log("selected: ", $(".selected")); var elements = $(".selected").not(".ui-sortable-placeholder").clone(); console.log("making helper from: ", elements); // hide selected elements $(".selected").not(".ui-sortable-placeholder").addclass("hidden"); var helper = $("<table />"); helper.append(elements); console.log("helper: ", helper); return helper; }, start: function(e, ui) { var elements = $(".selected.hidden").not('.ui-sortable-placeholder'); console.log("start: ", elements); ui.item.data("items", elements); }, update: function(e, ui) { console.log("receiving: ", ui.item.data("items")); ui.item.before(ui.item.data("items")[1], ui.item.data("items")[0]); }, stop: function(e, ui) { $('.selected.hidden').not('.ui-sortable-placeholder').removeclass('hidden'); $('.selected').removeclass('selected'); } }); } $(function() { assignsortattach(); $(".handle").attr("title", "use me drag , sort."); }); i added css placeholder:
.two-place { display: block; visibility: visible; height: 2.5em; width: 0; } .two-place::after { content: ""; border: 1px dashed #ccc; float: left; background-color: #eee; height: 2.5em; width: 100px; }
Comments
Post a Comment