Add 'sortable' attribute to grid.

Set it to an AJAX (PHP) callback to enable, and it will be passed the grid ID & new row order whenever the user re-orders the grid rows.

etemplate/js/et2_widget_grid.js

@@ -46,6 +46,12 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
 		},
 		"padding": {
 			"ignore": true
+		},
+		"sortable": {
+			"name": "Sortable callback",
+			"type": "string",
+			"default": et2_no_init,
+			"description": "PHP function called when user sorts the grid.  Setting this enables sorting the grid rows.  The callback will be passed the ID of the grid and the new order of the rows."
 		}
 	},
 	
@@ -649,6 +655,47 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
 		return this.align;
 	},
 	
+	/**
+	 * Sortable allows you to reorder grid rows using the mouse.
+	 * The new order is returned as part of the value of the 
+	 * grid, in 'sort_order'.
+	 * 
+	 * @param {boolean|function} sortable Callback or false to disable
+	 */	
+	set_sortable: function(sortable) {
+		if(!sortable)
+		{
+			this.tbody.sortable("destroy");
+			return;
+		}
+		
+		// Make sure rows have IDs, so sortable has something to return
+		$j('tr', this.tbody).each(function(index) {
+			var $this = $j(this);
+			
+			// Header does not participate in sorting
+			if($this.hasClass('th')) return;
+			
+			// If row doesn't have an ID, assign the index as ID
+			if(!$this.attr("id")) $this.attr("id", index);
+		});
+		
+		var self = this;
+		
+		// Set up sortable
+		this.tbody.sortable({
+			// Header does not participate in sorting
+			items: "tr:not(.th)",
+			distance: 15,
+			stop: function(event, ui) {
+				self.egw().jsonq(sortable,[self.id, self.tbody.sortable("toArray")],
+					null,
+					self
+				);
+			}
+		});
+	},
+
 	/**
 	 * Code for implementing et2_IDetachedDOM
 	 * This doesn't need to be implemented.
@@ -665,4 +712,3 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
 	}
 });
 et2_register_widget(et2_grid, ["grid"]);
-

etemplate/templates/default/etemplate2.css

@@ -725,6 +725,12 @@ table.et2_grid {
 .et2_grid td {
 /*	border: 1px dashed silver;*/
 }
+/**
+ * Sortable grid
+ */
+table.et2_grid tbody.ui-sortable > tr:not(.th)  {
+	cursor: ns-resize;
+}
 
 /**
  * Create some spacing for widgets inside labels