Row reorder is an extension to the components used for displaying tables that allows the order of rows to be changed, and optionally allows rows to be indented to build a hierarchical structure.
To switch on row reordering, add the class "rowreorder" to a <table> element along with the class "datatable" or "maTable". The row should have a first column for holding sequence numbers, though this need not be populated. Row reordering is then enabled.
The row reordering is controlled by a option coded into a JSON structure in the data-options attribute of the table. The following options are supported.
| rowReference | jQuery selector from which a unique reference for each row can be read. Defaults to "td:nth-child(2)", i.e. the value of the second column. In most cases, it would be easier to use a class, such as ".rowref", and then use a (perhaps hidden) span with this class to hold the row reference. |
| indent |
Set to true to support indenting the list. The indent will be set by adding padding to the left of the second row of the table. When indent is true, the logical children of a moved row will be moved with it. |
| indentMax |
When indent is true, how many levels of indent are supported. If set to 0, the default, an indefinite number of indents are supported. |
| indentWidth |
The width, in pixels, of the indent. |
| rowOrderEnable |
Set to false to disable row reordering. This can be useful to set the order of rows, but when reordering is not then required. |
| rowOrder |
A structure that describes the required order of the rows. This is described below. |
| rowOrderField |
A selector for a field (typically a textarea) from which the rowOrder will be read and which will be updated with the rowOrder when the row order is updated. The change event is fired when the field is updated (as it would be if the field was updated by the user). Use the Auto save option on this field to automatically save the new row order whenever it changes. |
In typical use, the rowOrderField with an autosave will be used to populate the row order and then save the updated order. For a read only table, the rowOrder propery in data-options can be used, together with rowOrderEnable set to false.
Row order
Each row on the table must have a unique reference. This is read from each row using the selector defined in the rowReference option.
The rowOrder structure is an array of row objects, each of which indicates the reference of one row. For example, if the rows had references of "A", "B" and "C", in that order, the rowOrder structure would be.
[
{ "reference": "A" },
{ "reference": "B" },
{ "reference": "C" }
]
If the indent option is used, the logical hierarchy is shown by nesting row objects inside a children array in their parent. For example, the hiearchy.
A
B
B1
B2
C
D
Would be represented as
[
{
"reference": "A",
"children": [
{
"reference": "B",
"children": [
{"reference": "B1"},
{"reference": "B2"}
]
},
{"reference": "C"}
]
},
{"reference": "D"}
]
Whitespace is not significant. The children array is optional - it can be omitted if empty.