Drap-n-drop HTML table columns (not rows)
I've found dragtable http://www.danvk.org/wp/dragta开发者_Python百科ble/ but I need a Jquery-based solution. May be I'm missing something?
The plugin jqGrid (latest versions at github repo) has a feature to re-order columns - the documentation is here. It does not appear to have drag/drop support for re-ordering columns however.
Here is a custom working sample of draggable table columns using only jQuery and jQuery UI sortable interaction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery-ui-1.8.1.custom.css">
<style type="text/css">
th
{
background-color: #e0e0e0;
cursor: pointer;
}
.ui-state-highlight
{
height: 1.5em;
line-height: 1.2em;
}
</style>
<script type="text/javascript">
$(function() {
var $table1 = $('#table1');
var $table1Thead = $table1.find('thead');
var $table1Tbody = $table1.find('tbody');
var maxCols = 10;
var maxRows = 50;
// populate fake data
for (var i = 1; i <= maxCols; i++) {
$table1Thead.append('<th id="column' + i + '">column ' + i + '</th>');
}
var rowHtml;
for (var x = 1; x <= maxRows; x++) {
rowHtml = '<tr>';
for (var i = 1; i <= maxCols; i++) {
//rowHtml += '<td>row ' + x + ', column ' + i + '</td>';
rowHtml += '<td>column ' + i + '</td>';
}
rowHtml += '</tr>';
$table1Tbody.append(rowHtml);
}
// set an index helper on each th element
$table1Thead.find('th').each(function() {
var thElement = $(this);
thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
});
$table1Thead.sortable({
items: 'th',
containment: 'parent',
helper: 'clone',
placeholder: 'ui-state-highlight',
update: function(event, ui) {
var prevPos = ui.item.data('columnIndex');
var newPos = $table1Thead.find('th').index(ui.item);
// adjust all the row elements
$table1Tbody.find('tr').find('td:eq(' + prevPos + ')').each(function() {
var tdElement = $(this);
var tdElementParent = tdElement.parent();
tdElement.remove();
tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);
});
// re-set an helper indexes
$table1Thead.find('th').each(function() {
var thElement = $(this);
thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
});
}
});
});
</script>
</head>
<body>
<table id="table1">
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
This JavaScript does drag-and-drop on columns. As it doesn't uses any framework you can combine it easily with any other framework.
Why do you nee a jQuery based solution when you can have one without the need of a specific framework.
Another approach to reorder columns with Jquery UI Sortable: http://jsfiddle.net/pg7wH/
Needs
- jQuery (tested with 1.7.2 - 2.0)
- jQuery UI (tested with 1.8.18 - 1.10.2)
HTML:
<button id="getSorting">Get sorting</button><input id="showSorting" />
<table id="table1">
<thead class="ui-state-default"></thead>
<tbody></tbody>
</table>
JS:
$(function() {
var $table1 = $('#table1');
var $table1Thead = $table1.find('thead');
var $table1Tbody = $table1.find('tbody');
var startPos;
var oldPos;
// populate fake data
var maxCols = 10;
var maxRows = 50;
for (var i = 1; i <= maxCols; i++) {
$table1Thead.append('<th sort="' + i + '" id="column[' + i + ']">column ' + i + '</th>');
}
var rowHtml;
for (var x = 1; x <= maxRows; x++) {
rowHtml = '<tr>';
for (var i = 1; i <= maxCols; i++) {
//rowHtml += '<td>' + i + ' - ' + x + '</td>';
rowHtml += '<td>col ' + i + '</td>';
}
rowHtml += '</tr>';
$table1Tbody.append(rowHtml);
}
// Show sorting
$("button#getSorting").click(function() {
$('#showSorting').val($table1Thead.sortable('toArray', { attribute: "sort" } ))
console.log($table1Thead.sortable('toArray', { attribute: "sort" } ))
})
// The sorting
$table1Thead.sortable({
axis: "x" ,
items: 'th',
containment: 'parent',
cursor: 'move',
helper: 'clone',
distance: 5,
opacity: 0.5,
placeholder: 'ui-state-highlight',
start: function(event, ui) {
startPos = $table1Thead.find('th').index(ui.item);
oldPos = startPos;
},
change: function(event, ui) {
// Get position of the placeholder
var newPos = $table1Thead.find('th').index($table1Thead.find('th.ui-state-highlight'));
// If the position is right of the original position, substract it by one in cause of the hidden th
if(newPos>startPos)newPos--;
// move all the row elements
//console.log('Move: 'oldPos+' -> '+newPos);
$table1Tbody.find('tr').find('td:eq(' + oldPos + ')').each(function() {
var tdElement = $(this);
var tdElementParent = tdElement.parent();
if(newPos>oldPos)// Move it the right
tdElementParent.find('td:eq(' + newPos + ')').after(tdElement);
else// Move it the left
tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);
});
oldPos = newPos;
}
});
});
Thanks to Nate Pinchot for his example.
加载中,请稍侯......
精彩评论