Databases Reference
In-Depth Information
Clone Rows
In one of my recent projects the customer had a requirement to easily clone rows in a tabular form. My
colleague and friend Linh Dinh helped me devise a solution, which you can read about in his blog at
http://www.dinh.de/wordpress/
We developed a small piece of code to clone rows. The goal was to clone one or more rows, change
them, and save them. Our solution allows for new rows to be added at any position in the table, not just
at the end .
You'll need to do the following to prepare a new page for a demonstration of this approach:
•
Copy page 1 to page 4 and remove all of the custom coding created earlier.
•
Change the SQL of the Tabular Form report.
•
Add a small bit of JavaScript code to the page header.
•
Modify the column holding the image/link for this process.
Following is the new SQL for the Tabular Form report:
SELECT empno, NULL clone, empno empno display, ename, job, mgr,
hiredate, sal, comm, deptno, valid
FROM emp
This SQL will create a new column
CLONE
, to hold the image for cloning the selected row. You will
need to move that new column right after the checkbox. You will edit the column properties and put a
link in the HTML Expression
<a href="#" onclick="javascript:fn CloneRow(this);">
<img src="#IMAGE PREFIX#copy.gif" alt=""></a>
You will also need to change the column properties from Display as Text… to Standard Report
Column.
Finally, you will add a small bit of JavaScript to the page header, as shown in Listing 3-18.
Listing 3-18.
Tabular Form—Javascript for Cloning Rows
<script type="text/javascript">
function fn delete(pThis)
{
var l tr=$x UpTill(pThis,'TR');
l tr.parentNode.removeChild(l tr);
}
function fn CloneRow(pThis) {
$(pThis).parent().parent().clone(true,false).insertAfter($(pThis).parent().parent());
newRow = $(pThis).parent().parent().next();
newRow.find('[type=hidden]').val('');
newRow.find('[name=fcs]').val('Z');
