<!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>