mercredi 1 juillet 2015

redips - copied cell 'td/th' does not interact with drag event

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 at onload event.

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