I am using redips.js to drag and drop elements in tables.
I need to duplicate some td, th to other row(tr). So I made those script
function copyCells(x, y){
if((y == null || typeof y == 'undefined')
|| (x == null || typeof x == 'undefined')){
console.log('(' + x + ' ,' + y + ') : wrong variables.');
return;
}
console.log('I recieved ' + x + ', ' + y);
if(y < 1 || x < 1) {
console.log('(' + x + ', ' + y + ') : This cell is not proper target.');
return;
}
var target_tbody = $('#table2').find('tbody');
target_tbody.find('tr').each(function(idx){
var rowIdx = idx;
if(rowIdx != y) return;
$(this).find('th, td').each(function(idx2){
var colIdx = idx2;
if(colIdx > x - 1) return;
var oRow = rowIdx - 1;
var tRow = rowIdx;
console.log(target_tbody.children('tr').eq(oRow));
var originCell = target_tbody.children('tr').eq(oRow).children('td, th').eq(colIdx);
var contentsOfOriginCell = originCell.html();
var targetCell = target_tbody.children('tr').eq(tRow).children('td, th').eq(colIdx);
targetCell.html(contentsOfOriginCell);
try{
var originSelectedVal = originCell.children('.doselect').eq(0).val();
targetCell.children('select').eq(0).val(originSelectedVal);
}catch(ex){
console.log('can not copy cell.');
}
});
});
}
And follow is part of html
<!-- left container -->
<div id="left">
<table id="table1">
<colgroup>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody id='process_body'>
</tbody>
</table>
</div><!-- left container -->
<!-- right container -->
<div id="right">
<table id="table2">
<colgroup>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody>
<!--
table cells marked with class name "redips-mark" as special
DIV element cannot be placed to this cells except if there is exception
see myhandler_cloned how to make exception for cloned "e" elements
-->
<tr>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="upper-right redips-mark last"><input type="hidden" name='observer'></td>
</tr>
<tr>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<th class="redips-mark"><input type="hidden" name='observer'></th>
</tr>
<tr>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<th class="redips-mark last"><input type="hidden" name='observer'></th>
</tr>
<tr>
<td class="lower-left"><input type="hidden" name='observer'></td>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
</tr>
</tbody>
</table>
</div><!-- right container -->
I was suspicious about cell id. copied cell has same id with original one. But after I edit id in browser, it does not looks like.
Current status
- copied cell and original cell has same HTML code.
- original cell has still work with drag event, while copied one does not.
rd.init()only called atonloadevent.
Is there anything I can try? I am sorry to upload fiddle since this code is not mine. Thanks :D
- Maybe, if there is a way to copy td, th to other td, th with redips API. It would be the most wonderful solution that I expecting.
Aucun commentaire:
Enregistrer un commentaire