| Constructor Attributes | Constructor Name and Description |
|---|---|
|
REDIPS.table Version 1.1.0.
REDIPS.table is a JavaScript library which enables dynamically merging and splitting table cells. |
| Field Attributes | Field Name and Description |
|---|---|
|
color.cell defines background color for marked table cell.
|
|
|
Enable / disable marking not empty table cells.
|
| Method Attributes | Method Name and Description |
|---|---|
|
cell_ignore(c)
Method removes attached onmousedown event listener.
|
|
|
cell_index(flag)
Method displays cellIndex for each cell in tables.
|
|
|
column(table, mode, index)
Method adds / deletes table column.
|
|
|
mark(flag, el, row, col)
Method sets or removes mark from table cell.
|
|
|
merge(mode, clear, table)
Method merges marked table cells horizontally or vertically.
|
|
|
onmousedown(el, flag, type)
Method attaches or removes onmousedown event listener on TD elements depending on second parameter value (default is true).
|
|
|
row(table, mode, index)
Method adds / deletes table row.
|
|
|
split(mode, table)
Method splits marked table cell only if cell has colspan/rowspan greater then 1.
|
Field Detail
{Object} color
color.cell defines background color for marked table cell. If not set then background color will not be changed.
// set "#9BB3DA" as color for marked cell REDIPS.table.color.cell = '#9BB3DA';
- Default Value:
- null
{Boolean} mark_nonempty
Enable / disable marking not empty table cells.
// allow marking only empty cells REDIPS.table.mark_nonempty = false;
- Default Value:
- true
Method Detail
cell_ignore(c)
Method removes attached onmousedown event listener. Sometimes is needed to manually ignore some cells in table after row/column were dynamically added.
- Parameters:
- {HTMLElement|String} c
- Cell id or cell reference of table that should be ignored (onmousedown event listener will be removed).
cell_index(flag)
Method displays cellIndex for each cell in tables. It is useful in debuging process.
- Parameters:
- {Boolean} flag
- If set to true then cell content will be replaced with cell index.
column(table, mode, index)
Method adds / deletes table column. Last column will be assumed if index is omitted.
- Parameters:
- {HTMLElement|String} table
- Table id or table reference.
- {String} mode
- Insert/delete table column
- {Integer} index Optional
- Index where column will be inserted or deleted. Last column will be assumed if index is not defined.
mark(flag, el, row, col)
Method sets or removes mark from table cell. It can be called on several ways: with direct cell address (cell reference or cell id) or with cell coordinates (row and column).
// set mark to the cell with "mycell" reference REDIPS.table.mark(true, mycell); // remove mark from the cell with id "a1" REDIPS.table.mark(false, "a1"); // set mark to the cell with coordinates (1,2) on table with reference "mytable" REDIPS.table.mark(true, mytable, 1, 2); // remove mark from the cell with coordinates (4,5) on table with id "t3" REDIPS.table.mark(false, "t3", 4, 5);
- Parameters:
- {Boolean} flag
- If set to true then TD will be marked, otherwise table cell will be cleaned.
- {HTMLElement|String} el
- Cell reference or id of table cell. Or it can be table reference or id of the table.
- {Integer} row Optional
- Row of the cell.
- {Integer} col Optional
- Column of the cell.
merge(mode, clear, table)
Method merges marked table cells horizontally or vertically.
- Parameters:
- {String} mode
- Merge type: h - horizontally, v - vertically. Default is "h".
- {Boolean} clear Optional
- true - cells will be clean (without mark) after merging, false - cells will remain marked after merging. Default is "true".
- {HTMLElement|String} table Optional
- Table id or table reference.
onmousedown(el, flag, type)
Method attaches or removes onmousedown event listener on TD elements depending on second parameter value (default is true). If third parameter is set to "classname" then tables will be selected by class name (named in first parameter). All found tables will be saved in internal array. Sending reference in this case will not be needed when calling merge or split method. Table cells marked with class name "ignore" will not have attached onmousedown event listener (in short, these table cells will be ignored).
// activate onmousedown event listener on cells within table with id="mainTable"
REDIPS.table.onmousedown('mainTable', true);
// activate onmousedown event listener on cells for tables with class="blue"
REDIPS.table.onmousedown('blue', true, 'classname');
- Parameters:
- {String|HTMLElement} el
- Container Id. TD elements within container will have added onmousewdown event listener.
- {Boolean} flag Optional
- If set to true then onmousedown event listener will be attached to every table cell.
- {String} type Optional
- If set to "class name" then all tables with a given class name (first parameter is considered as class name) will be initialized. Default is container/table reference or container/table id.
{HTMLElement} row(table, mode, index)
Method adds / deletes table row. If index is omitted then index of last row will be set.
- Parameters:
- {HTMLElement|String} table
- Table id or table reference.
- {String} mode
- Insert/delete table row
- {Integer} index Optional
- Index where row will be inserted or deleted. Last row will be assumed if index is not defined.
- Returns:
- {HTMLElement} Returns reference of inserted row or NULL (in case of deleting row).
split(mode, table)
Method splits marked table cell only if cell has colspan/rowspan greater then 1.
- Parameters:
- {String} mode
- Split type: h - horizontally, v - vertically. Default is "h".
- {HTMLElement|String} table Optional
- Table id or table reference.
Thank you for pointing this out -I am very impressed how this is achieved now. It would be great to be able to initiate each tables.I really want to know extending the multi-select capabilities.I must say you done incredibly flexible and very friendly to visual customizations!
Thanks for sharing.
@error 1079 - I'm glad you like my work. REDIPS.table has been created to allow dynamically merge/split table cells and to add/delete table rows and columns. After loading redips-table.js is possible to mark table cells (with a mouse click) and to call REDIPS.table.merge() method. So, multiselect of table cells exists and you can select table cells in several rows or columns and to call merge() method.
@Dbunic: I try to merge vertical cells by changing your example 02. But it isn't successful. Can you help me?
function merge1() { REDIPS.table.mark(true, 'table1', 2, 1); REDIPS.table.mark(true, 'table1', 2, 2); REDIPS.table.merge('v', true, 'table1'); }Thank you.
@Phuong Tran Tuan - Example02 has only 2 rows: row 0 and row 1. Here is how to merge cells in 3rd column:
function merge1() { REDIPS.table.mark(true, 'table1', 0, 2); REDIPS.table.mark(true, 'table1', 1, 2); REDIPS.table.merge('v', true, 'table1'); }So, don't forget that first row and first column starts width index 0. Next, you can comment last line and set mark color to see which cells will be marked (before merging):
function merge1() { REDIPS.table.color.cell = 'lime'; REDIPS.table.mark(true, 'table1', 0, 2); REDIPS.table.mark(true, 'table1', 1, 2); // REDIPS.table.merge('v', true, 'table1'); }How can i call a function when a div is moved and how to get the data for where it is moved to?
@jesper - I suppose that your question is related to REDIPS.drag library (this post is documentation for REDIPS.table). Both libraries can be combined to dynamically merge/split cells and drag DIV elements across tables. Anyway, if some code should be executed after DIV element is moved then define myhandler_moved() event handler and place custom JS code inside (demos in redips2.tar.gz contain a lot of examples how to use event handlers).
And please see documentation for get_position() method how to obtain source and target positions for the dropped DIV element.
Is there a re-load option or load data option for example 24, The data is displayed and I can save, I can't see a function to reload and continue with the edit?
@Kevin - The easiest way is to generate HTML table with server side script. All client side logic is prepared and you will have to write simple PHP/ASPX/JSP loop to create TR/TD with filled DIV elements. This is the similar to the example03 where you can see how it's done with PHP. Hope this will not be a problem for you.
Hi,
Your code is very helpful.
I would like to select (mark) two columns, one after another and merge them such that the each row will be individually merged.
Could you please suggest some code?
Thanks,
Daniel
@Dan - Here is source from example02/script.js file (complete redips12.tar.gz package can be download from link below post title).
// mark cells for merging (cells should be marked in a sequence) REDIPS.table.mark(true, 'table1', 1, 1); REDIPS.table.mark(true, 'table1', 1, 2); REDIPS.table.mark(true, 'table1', 1, 3); // merge cells: // 'h' - horizontally // true - clear mark after merging // 'table1' - table id REDIPS.table.merge('h', true, 'table1');In this example, cells are marked one by one, but in your case you can create loop that will go through each row and select cells in desired column. After cells are marked, just call merge() method (in "horizontal" mode).