diff options
Diffstat (limited to 'examples/example9-row-reordering.html')
| -rw-r--r-- | examples/example9-row-reordering.html | 150 |
1 files changed, 122 insertions, 28 deletions
diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html index b2e3ac4..827015d 100644 --- a/examples/example9-row-reordering.html +++ b/examples/example9-row-reordering.html @@ -17,6 +17,18 @@ cursor: move; background: url("../images/drag-handle.png") no-repeat center center; } + + .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; + } </style> </head> <body> @@ -31,7 +43,14 @@ <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 to reorder. + 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> </div> </div> @@ -40,6 +59,7 @@ <script language="JavaScript" src="../lib/jquery-1.4.2.min.js"></script> <script language="JavaScript" src="../lib/jquery-ui-1.8.2.custom.min.js"></script> <script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script> + <script language="JavaScript" src="../lib/jquery.event.drop-2.0.min.js"></script> <script language="JavaScript" src="../slick.editors.js"></script> <script language="JavaScript" src="../slick.grid.js"></script> @@ -48,32 +68,36 @@ var grid; var data = []; - var columns = [{ - id: "#", - name: "", - width: 40, - behavior: "selectAndMove", - unselectable: true, - resizable: false, - cssClass: "cell-reorder" - }, { - id: "name", - name: "Name", - field: "name", - width: 500, - cssClass: "cell-title", - editor: TextCellEditor, - validator: requiredFieldValidator - }, { - id: "complete", - name: "Complete", - width: 60, - cssClass: "cell-effort-driven", - field: "complete", - cannotTriggerInsert: true, - formatter: BoolCellFormatter, - editor: YesNoCheckboxCellEditor - }]; + var columns = [ + { + id: "#", + name: "", + width: 40, + behavior: "selectAndMove", + unselectable: true, + resizable: false, + cssClass: "cell-reorder dnd" + }, + { + id: "name", + name: "Name", + field: "name", + width: 500, + cssClass: "cell-title", + editor: TextCellEditor, + validator: requiredFieldValidator + }, + { + id: "complete", + name: "Complete", + width: 60, + cssClass: "cell-effort-driven", + field: "complete", + cannotTriggerInsert: true, + formatter: BoolCellFormatter, + editor: YesNoCheckboxCellEditor + } + ]; var options = { editable: true, @@ -107,7 +131,77 @@ grid = new Slick.Grid($("#myGrid"), data, columns, options); - grid.onAddNewRow = function addItem(newItem,columnDef) { + $("#myGrid") + .bind("draginit", function(e,dd) { + var cell = grid.getCellFromEvent(e); + if (!cell) + return false; + + dd.row = cell.row; + if (!data[dd.row]) + return false; + + if (Slick.GlobalEditorLock.isActive() && !Slick.GlobalEditorLock.cancelCurrentEdit()) + return false; + }) + .bind("dragstart", function(e,dd) { + 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; + }) + .bind("drag", function(e,dd) { + dd.helper.css({top: e.pageY + 5, left: e.pageX + 5}); + }) + .bind("dragend", function(e,dd) { + dd.helper.remove(); + $(dd.available).css("background","beige"); + }); + + + $("#dropzone") + .bind("dropstart", function(e,dd) { + $(this).css("background","yellow"); + }) + .bind("dropend", function(e,dd) { + $(dd.available).css("background","pink"); + }) + .bind("drop", function(e,dd) { + 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 = function(newItem,columnDef) { var item = {name:"New task", complete: false}; $.extend(item,newItem); data.push(item); |