2

I have a dataTable which is populated by the a list of Sobject. I need to be able to drag the rows of the table and reorder them. I have a HTMl table code snippet which does this using jQuery.

  <script>
    $j = jQuery.noConflict();

    var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
            $j(this).width($originals.eq(index).width())
        });
        return $helper;
    };

    var updateIndex = function(e, ui) {
        $j('td.index', ui.item.parent()).each(function (i) {
            $j(this).html(i + 1);
        });
    };

    $j(document).ready(function() {
        $j("#sort tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
    });
</script>

 <table id="sort" class="grid" title="Kurt Vonnegut novels">
            <thead>
                <tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
            </thead>
            <tbody>
                <tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
                <tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
                <tr><td class="index">3</td><td>1963</td><td>Cats Cradle</td><td>A+</td></tr>
                <tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
                <tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
            </tbody>
        </table>

The rows of this table can be dragged up and down and it changes the order number of the row. I want the exact similar functionality.

I used the same html table but populated the rows using apex:repeat

      <table id="sort" class="grid" title="Kurt Vonnegut novels">
        <thead>
            <tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
        </thead>
        <tbody>
            <apex:repeat value="{!phaseWrapperList}" var="phase">
                <tr>
                    <td class="index">
                        <apex:outputText value="{!phase.phaseOrder}"/>
                    </td>
                    <td>
                        <apex:outputText value="{!phase.phaseName}"/>
                    </td>
                    <td>
                        <apex:outputText value="{!phase.phaseProbability}"/>
                    </td>
                    <td>
                        <apex:outputText value="{!phase.phaseDefaultState}"/>
                    </td>
                </tr>
            </apex:repeat>
        </tbody>
    </table>

It generates the table but the rows are no longer draggable. Is there any way I can perform the same functions on a table with a list from controller?

Thanks.

1 Answer 1

2

The apex:repeat tag generates a span tag with it. The documentation isn't very explicit about this, but their example shows it in action.

This update to your jQuery should resolve the issue. I just changed the selector to apply it to the direct span descendent of the tbody tag.

<script>
    $j = jQuery.noConflict();

    var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
            $j(this).width($originals.eq(index).width())
        });
        return $helper;
    };

    var updateIndex = function(e, ui) {
        $j('td.index', ui.item.parent()).each(function (i) {
            $j(this).html(i + 1);
        });
    };

    $j(document).ready(function() {
        $j("#sort tbody > span").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
    });
</script>

See the documentation for details:

http://www.salesforce.com/docs/developer/pages/Content/pages_compref_repeat.htm

From Docs

<apex:page controller="repeatCon" id="thePage">

    <apex:repeat value="{!strings}" var="string" id="theRepeat">

        <apex:outputText value="{!string}" id="theValue"/><br/>

    </apex:repeat>

</apex:page>


/*** Controller: ***/

public class repeatCon {

    public String[] getStrings() {
        return new String[]{'ONE','TWO','THREE'};
    }

}

The example above renders the following HTML:

<span id="thePage:theRepeat:0:theValue">ONE</span><br/>

<span id="thePage:theRepeat:1:theValue">TWO</span><br/>

<span id="thePage:theRepeat:2:theValue">THREE</span><br/>
1
  • Actually their example isn't even showing it. It shows the span wrappers for the outputText fields. But it does happen unfortunately.
    – drakored
    Commented Dec 30, 2014 at 16:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .