322 lines
8.0 KiB
HTML
322 lines
8.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
<title>SlickGrid example 9: Row reordering</title>
|
|
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
|
|
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
|
|
<link rel="stylesheet" href="examples.css" type="text/css"/>
|
|
<style>
|
|
.cell-effort-driven {
|
|
text-align: center;
|
|
}
|
|
|
|
.cell-reorder {
|
|
cursor: move;
|
|
background: url("../images/drag-handle.png") no-repeat center center;
|
|
}
|
|
|
|
.cell-selection {
|
|
border-right-color: silver;
|
|
border-right-style: solid;
|
|
background: #f5f5f5;
|
|
color: gray;
|
|
text-align: right;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.slick-row.selected .cell-selection {
|
|
background-color: transparent; /* show default selected row background */
|
|
}
|
|
|
|
.recycle-bin {
|
|
width: 120px;
|
|
border: 1px solid gray;
|
|
background: beige;
|
|
padding: 4px;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
color: black;
|
|
text-align: center;
|
|
-moz-border-radius: 10px;
|
|
}
|
|
|
|
.red {
|
|
background: red;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="position:relative">
|
|
<div style="width:600px;">
|
|
<div class="grid-header" style="width:100%">
|
|
<label>Santa's TODO list:</label>
|
|
</div>
|
|
<div id="myGrid" style="width:100%;height:500px;"></div>
|
|
</div>
|
|
<div class="options-panel">
|
|
<b>Tips:</b>
|
|
<hr/>
|
|
<div style="padding:6px;">
|
|
Click to select, Ctrl-click to toggle selection, Shift-click to select a range.<br/>
|
|
Drag one or more rows by the handle to reorder.<br/>
|
|
Drag one or more rows to the recycle bin to delete.
|
|
|
|
<br/>
|
|
<br/>
|
|
|
|
<div id="dropzone" class="recycle-bin">
|
|
Recycle Bin
|
|
</div>
|
|
<h2>View Source:</h2>
|
|
<ul>
|
|
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html" target="_sourcewindow"> View the source for this example on Github</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../lib/firebugx.js"></script>
|
|
|
|
<script src="../lib/jquery-1.7.min.js"></script>
|
|
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
|
|
<script src="../lib/jquery.event.drag-2.2.js"></script>
|
|
<script src="../lib/jquery.event.drop-2.2.js"></script>
|
|
|
|
<script src="../slick.core.js"></script>
|
|
<script src="../plugins/slick.cellrangeselector.js"></script>
|
|
<script src="../plugins/slick.cellselectionmodel.js"></script>
|
|
<script src="../plugins/slick.rowselectionmodel.js"></script>
|
|
<script src="../plugins/slick.rowmovemanager.js"></script>
|
|
<script src="../slick.formatters.js"></script>
|
|
<script src="../slick.editors.js"></script>
|
|
<script src="../slick.grid.js"></script>
|
|
|
|
<script>
|
|
var grid;
|
|
var data = [];
|
|
var columns = [
|
|
{
|
|
id: "#",
|
|
name: "",
|
|
width: 40,
|
|
behavior: "selectAndMove",
|
|
selectable: false,
|
|
resizable: false,
|
|
cssClass: "cell-reorder dnd"
|
|
},
|
|
{
|
|
id: "name",
|
|
name: "Name",
|
|
field: "name",
|
|
width: 500,
|
|
cssClass: "cell-title",
|
|
editor: Slick.Editors.Text,
|
|
validator: requiredFieldValidator
|
|
},
|
|
{
|
|
id: "complete",
|
|
name: "Complete",
|
|
width: 60,
|
|
cssClass: "cell-effort-driven",
|
|
field: "complete",
|
|
cannotTriggerInsert: true,
|
|
formatter: Slick.Formatters.Checkmark,
|
|
editor: Slick.Editors.Checkbox
|
|
}
|
|
];
|
|
|
|
var options = {
|
|
editable: true,
|
|
enableAddRow: true,
|
|
enableCellNavigation: true,
|
|
forceFitColumns: true,
|
|
autoEdit: false
|
|
};
|
|
|
|
function requiredFieldValidator(value) {
|
|
if (value == null || value == undefined || !value.length) {
|
|
return {valid: false, msg: "This is a required field"};
|
|
} else {
|
|
return {valid: true, msg: null};
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
data = [
|
|
{ name: "Make a list", complete: true},
|
|
{ name: "Check it twice", complete: false},
|
|
{ name: "Find out who's naughty", complete: false},
|
|
{ name: "Find out who's nice", complete: false}
|
|
];
|
|
|
|
grid = new Slick.Grid("#myGrid", data, columns, options);
|
|
|
|
grid.setSelectionModel(new Slick.RowSelectionModel());
|
|
|
|
var moveRowsPlugin = new Slick.RowMoveManager({
|
|
cancelEditOnDrag: true
|
|
});
|
|
|
|
moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
|
|
for (var i = 0; i < data.rows.length; i++) {
|
|
// no point in moving before or after itself
|
|
if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) {
|
|
e.stopPropagation();
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
|
|
moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
|
|
var extractedRows = [], left, right;
|
|
var rows = args.rows;
|
|
var insertBefore = args.insertBefore;
|
|
left = data.slice(0, insertBefore);
|
|
right = data.slice(insertBefore, data.length);
|
|
|
|
rows.sort(function(a,b) { return a-b; });
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
extractedRows.push(data[rows[i]]);
|
|
}
|
|
|
|
rows.reverse();
|
|
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var row = rows[i];
|
|
if (row < insertBefore) {
|
|
left.splice(row, 1);
|
|
} else {
|
|
right.splice(row - insertBefore, 1);
|
|
}
|
|
}
|
|
|
|
data = left.concat(extractedRows.concat(right));
|
|
|
|
var selectedRows = [];
|
|
for (var i = 0; i < rows.length; i++)
|
|
selectedRows.push(left.length + i);
|
|
|
|
grid.resetActiveCell();
|
|
grid.setData(data);
|
|
grid.setSelectedRows(selectedRows);
|
|
grid.render();
|
|
});
|
|
|
|
grid.registerPlugin(moveRowsPlugin);
|
|
|
|
grid.onDragInit.subscribe(function (e, dd) {
|
|
// prevent the grid from cancelling drag'n'drop by default
|
|
e.stopImmediatePropagation();
|
|
});
|
|
|
|
grid.onDragStart.subscribe(function (e, dd) {
|
|
var cell = grid.getCellFromEvent(e);
|
|
if (!cell) {
|
|
return;
|
|
}
|
|
|
|
dd.row = cell.row;
|
|
if (!data[dd.row]) {
|
|
return;
|
|
}
|
|
|
|
if (Slick.GlobalEditorLock.isActive()) {
|
|
return;
|
|
}
|
|
|
|
e.stopImmediatePropagation();
|
|
dd.mode = "recycle";
|
|
|
|
var selectedRows = grid.getSelectedRows();
|
|
|
|
if (!selectedRows.length || $.inArray(dd.row, selectedRows) == -1) {
|
|
selectedRows = [dd.row];
|
|
grid.setSelectedRows(selectedRows);
|
|
}
|
|
|
|
dd.rows = selectedRows;
|
|
dd.count = selectedRows.length;
|
|
|
|
var proxy = $("<span></span>")
|
|
.css({
|
|
position: "absolute",
|
|
display: "inline-block",
|
|
padding: "4px 10px",
|
|
background: "#e0e0e0",
|
|
border: "1px solid gray",
|
|
"z-index": 99999,
|
|
"-moz-border-radius": "8px",
|
|
"-moz-box-shadow": "2px 2px 6px silver"
|
|
})
|
|
.text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)")
|
|
.appendTo("body");
|
|
|
|
dd.helper = proxy;
|
|
|
|
$(dd.available).css("background", "pink");
|
|
|
|
return proxy;
|
|
});
|
|
|
|
grid.onDrag.subscribe(function (e, dd) {
|
|
if (dd.mode != "recycle") {
|
|
return;
|
|
}
|
|
dd.helper.css({top: e.pageY + 5, left: e.pageX + 5});
|
|
});
|
|
|
|
grid.onDragEnd.subscribe(function (e, dd) {
|
|
if (dd.mode != "recycle") {
|
|
return;
|
|
}
|
|
dd.helper.remove();
|
|
$(dd.available).css("background", "beige");
|
|
});
|
|
|
|
$.drop({mode: "mouse"});
|
|
$("#dropzone")
|
|
.bind("dropstart", function (e, dd) {
|
|
if (dd.mode != "recycle") {
|
|
return;
|
|
}
|
|
$(this).css("background", "yellow");
|
|
})
|
|
.bind("dropend", function (e, dd) {
|
|
if (dd.mode != "recycle") {
|
|
return;
|
|
}
|
|
$(dd.available).css("background", "pink");
|
|
})
|
|
.bind("drop", function (e, dd) {
|
|
if (dd.mode != "recycle") {
|
|
return;
|
|
}
|
|
var rowsToDelete = dd.rows.sort().reverse();
|
|
for (var i = 0; i < rowsToDelete.length; i++) {
|
|
data.splice(rowsToDelete[i], 1);
|
|
}
|
|
grid.invalidate();
|
|
grid.setSelectedRows([]);
|
|
});
|
|
|
|
|
|
grid.onAddNewRow.subscribe(function (e, args) {
|
|
var item = {name: "New task", complete: false};
|
|
$.extend(item, args.item);
|
|
data.push(item);
|
|
grid.invalidateRows([data.length - 1]);
|
|
grid.updateRowCount();
|
|
grid.render();
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|