Grid Drag and Drop reorder rows

来源：互联网发布：linux系统工程师职责编辑：程序博客网时间：2024/05/15 23:49

aspx

<%@ Page Language="C#" %><%@ Import Namespace="System.Collections.Generic"%><mce:script runat="server"></mce:script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .grid-row-insert-below { border-bottom:1px solid #3366cc; } .grid-row-insert-above { border-top:1px solid #3366cc; } </style> <mce:script type="text/javascript"></mce:script></head><body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server"> </ext:ResourceManager> <ext:Store ID="Store1" runat="server"> <Reader> <ext:JsonReader IDProperty="DataID"> <Fields> <ext:RecordField Name="DataID" Type="Int"></ext:RecordField> <ext:RecordField Name="DataName" /> <ext:RecordField Name="Archived" Type="Boolean"></ext:RecordField> </Fields> </ext:JsonReader> </Reader> <Listeners> <Load Fn="storeLoaded" /> </Listeners> </ext:Store> <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" EnableDragDrop="true" TrackMouseOver="true" StripeRows="true" Width="800" Height="400" Title="Drag row grid"> <TopBar> <ext:Toolbar ID="Toolbar2" runat="server"> <Items> <ext:Button ID="Button2" runat="server" Text="Submit Data"> <DirectEvents> <Click OnEvent="btnSave_Click"> <ExtraParams> <ext:Parameter Name="Before" Value="getStoreData(false)" Mode="Raw"></ext:Parameter> <ext:Parameter Name="After" Value="getStoreData(true)" Mode="Raw"></ext:Parameter> </ExtraParams> <EventMask ShowMask="true" Msg="Saving Data..." /> </Click> </DirectEvents> </ext:Button> <ext:ToolbarFill runat="server"></ext:ToolbarFill> <ext:Button runat="server" Text="Toggle Archived Rows"> <Listeners> <Click Fn="toggleArchivedRows" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar> <ColumnModel> <Columns> <ext:Column ColumnID="Name" Header="Record Name" Width="200" DataIndex="DataName" /> <ext:Column Header="Column 1" Width="200" DataIndex="DataID" /> <ext:Column Header="Archived?" DataIndex="Archived" Width="150"> <Editor> <ext:Checkbox runat="server"></ext:Checkbox> </Editor> </ext:Column> </Columns> </ColumnModel> <Listeners> <AfterEdit Fn="reapplyFilter" /> </Listeners> <Plugins> <ext:GenericPlugin ID="GenericPlugin2" runat="server" InstanceName="Ext.ux.dd.GridDragDropRowOrder"> <CustomConfig> <ext:ConfigItem Name="scrollable" Value="true"></ext:ConfigItem> </CustomConfig> </ext:GenericPlugin> </Plugins> <View> <ext:GridView runat="server"> </ext:GridView> </View> <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" /> </SelectionModel> </ext:GridPanel> <mce:script src="GridOrdering.js" mce_src="GridOrdering.js" type="text/javascript"></mce:script> </form> </body></html>

GridOrdering.js

Ext.namespace('Ext.ux.dd');Ext.ux.dd.GridDragDropRowOrder = Ext.extend(Ext.util.Observable,{ copy: false, scrollable: false, constructor : function(config) { if (config) Ext.apply(this, config); this.addEvents( { beforerowmove: true, afterrowmove: true, beforerowcopy: true, afterrowcopy: true }); Ext.ux.dd.GridDragDropRowOrder.superclass.constructor.call(this); }, init : function (grid) { this.grid = grid; grid.enableDragDrop = true; grid.on({ render: { fn: this.onGridRender, scope: this, single: true } }); }, onGridRender : function (grid) { var self = this; this.target = new Ext.dd.DropTarget(grid.getEl(), { ddGroup: grid.ddGroup || 'GridDD', grid: grid, gridDropTarget: this, insert : function (index, records) { var ds = this.grid.getStore(), unfilteredIndex; records = [].concat(records); var r = ds.data.itemAt(index); for (var i = 0, len = records.length; i < len; i++) { ds.data.insert(index, records[i]); records[i].join(ds); } if (ds.allData) { if(!Ext.isEmpty(r)){ unfilteredIndex = ds.allData.indexOf(r); for (var i = 0, len = records.length; i < len; i++) { ds.allData.insert(unfilteredIndex, records[i]); } } else{ ds.allData.addAll(records); } } if (ds.snapshot) { if(!Ext.isEmpty(r)){ unfilteredIndex = ds.snapshot.indexOf(r); for (var i = 0, len = records.length; i < len; i++) { ds.snapshot.insert(unfilteredIndex, records[i]); } } else{ ds.snapshot.addAll(records); } } ds.fireEvent("add", ds, records, index); }, notifyDrop: function(dd, e, data) { // Remove drag lines. The 'if' condition prevents null error when drop occurs without dragging out of the selection area if (this.currentRowEl) { this.currentRowEl.removeClass('grid-row-insert-below'); this.currentRowEl.removeClass('grid-row-insert-above'); } // determine the row var t = Ext.lib.Event.getTarget(e); var rindex = this.grid.getView().findRowIndex(t); if (rindex === false || rindex == data.rowIndex) { return false; } // fire the before move/copy event if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false) { return false; } // update the store var ds = this.grid.getStore(); // Changes for multiselction by Spirit var selections = new Array(); var keys = ds.data.keys; for (var key in keys) { for (var i = 0; i < data.selections.length; i++) { if (keys[key] == data.selections[i].id) { // Exit to prevent drop of selected records on itself. if (rindex == key) { return false; } selections.push(data.selections[i]); } } } // fix rowindex based on before/after move if (rindex > data.rowIndex && this.rowPosition < 0) { rindex--; } if (rindex < data.rowIndex && this.rowPosition > 0) { rindex++; } // fix rowindex for multiselection if (rindex > data.rowIndex && data.selections.length > 1) { rindex = rindex - (data.selections.length - 1); } // we tried to move this node before the next sibling, we stay in place if (rindex == data.rowIndex) { return false; } // fire the before move/copy event /* dupe - does it belong here or above??? if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false) { return false; } */ if (!self.copy) { for (var i = 0; i < data.selections.length; i++) { ds.remove(ds.getById(data.selections[i].id)); } } for (var i = selections.length - 1; i >= 0; i--) { var insertIndex = rindex; this.insert(insertIndex, selections[i]); } // re-select the row(s) var sm = this.grid.getSelectionModel(); if (sm) { sm.selectRecords(data.selections); } // fire the after move/copy event this.gridDropTarget.fireEvent(self.copy ? 'afterrowcopy' : 'afterrowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections); return true; }, notifyOver: function(dd, e, data) { var t = Ext.lib.Event.getTarget(e); var rindex = this.grid.getView().findRowIndex(t); // Similar to the code in notifyDrop. Filters for selected rows and quits function if any one row matches the current selected row. var ds = this.grid.getStore(); var keys = ds.data.keys; for (var key in keys) { for (var i = 0; i < data.selections.length; i++) { if (keys[key] == data.selections[i].id) { if (rindex == key) { if (this.currentRowEl) { this.currentRowEl.removeClass('grid-row-insert-below'); this.currentRowEl.removeClass('grid-row-insert-above'); } return this.dropNotAllowed; } } } } // If on first row, remove upper line. Prevents negative index error as a result of rindex going negative. if (rindex < 0 || rindex === false) { this.currentRowEl.removeClass('grid-row-insert-above'); return this.dropNotAllowed; } try { var currentRow = this.grid.getView().getRow(rindex); // Find position of row relative to page (adjusting for grid's scroll position) var resolvedRow = new Ext.Element(currentRow).getY() - this.grid.getView().scroller.dom.scrollTop; var rowHeight = currentRow.offsetHeight; // Cursor relative to a row. -ve value implies cursor is above the row's middle and +ve value implues cursor is below the row's middle. this.rowPosition = e.getPageY() - resolvedRow - (rowHeight/2); // Clear drag line. if (this.currentRowEl) { this.currentRowEl.removeClass('grid-row-insert-below'); this.currentRowEl.removeClass('grid-row-insert-above'); } if (this.rowPosition > 0) { // If the pointer is on the bottom half of the row. this.currentRowEl = new Ext.Element(currentRow); this.currentRowEl.addClass('grid-row-insert-below'); } else { // If the pointer is on the top half of the row. if (rindex - 1 >= 0) { var previousRow = this.grid.getView().getRow(rindex - 1); this.currentRowEl = new Ext.Element(previousRow); this.currentRowEl.addClass('grid-row-insert-below'); } else { // If the pointer is on the top half of the first row. this.currentRowEl.addClass('grid-row-insert-above'); } } } catch (err) { console.warn(err); rindex = false; } return (rindex === false)? this.dropNotAllowed : this.dropAllowed; }, notifyOut: function(dd, e, data) { // Remove drag lines when pointer leaves the gridView. if (this.currentRowEl) { this.currentRowEl.removeClass('grid-row-insert-above'); this.currentRowEl.removeClass('grid-row-insert-below'); } } }); if (this.targetCfg) { Ext.apply(this.target, this.targetCfg); } if (this.scrollable) { Ext.dd.ScrollManager.register(grid.getView().getEditorParent()); grid.on({ beforedestroy: this.onBeforeDestroy, scope: this, single: true }); } }, getTarget: function() { return this.target; }, getGrid: function() { return this.grid; }, getCopy: function() { return this.copy ? true : false; }, setCopy: function(b) { this.copy = b ? true : false; }, onBeforeDestroy : function (grid) { // if we previously registered with the scroll manager, unregister // it (if we don't it will lead to problems in IE) Ext.dd.ScrollManager.unregister(grid.getView().getEditorParent()); }});

<ext:GenericPlugin ID="GenericPlugin2" runat="server" InstanceOfAttribute="Ext.ux.dd.GridDragDropRowOrder" InstanceOf="Ext.ux.dd.GridDragDropRowOrder" InstanceName="Ext.ux.dd.GridDragDropRowOrder"> <CustomConfig>

<ext:ConfigItem Name="scrollable" Value="true"></ext:ConfigItem>
</CustomConfig>

</ext:GenericPlugin>

</Plugins>

source: http://www.coolite.com/forums/Topic23660-16-1.aspx#bm23684