1

我有一个可通过 jquery.sortable() 函数排序的表。目前,表中的所有行都是可排序的,行号存储在该行的隐藏元素中,并在行移动时更新。

问题是我现在有几个表需要前半部分行是可排序的,但后半部分是固定的。除了将它们分成两个单独的表之外,还有其他解决方案吗?

我有以下 HTML:

<table cellspacing="0" cellpadding="5px" class="content" id="sort">
  <thead>   
    <tr>
        <td>ID</td>
        <td>Title</td>
        <td>Created By</td>
        <td>Last Modified By</td>
        <td>Visiblity</td>
        <td>Edit</td>
        <td>Copy</td>
        <td>Delete</td>
        <td>Display Order</td>
    </tr>
  </thead>
  <tbody class="ui-sortable">
   <tr class="contentbody">
    <td>1</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <input type="hidden" class="order" id="order_1" name="order_1" value="1">
   </tr>
   <tr>
     More Content
   </tr>
 </tbody>
</table>

我在文档就绪函数中有以下 JQuery:

/* table sorting */
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());                  
        });
        return ui;
    };
    var sortable = $("#sort tbody").sortable({
        helper: fixHelper,
        stop: function(event, ui) {
         //create an array with the new order
        order = {}
        $(this).find('input.order').map(function(index, obj)
          { 
            return order[this.id] = index;
          }
        );
        $.ajax({
            type: 'POST',
            url: location.href,
            data: order,
            error: function() {
                console.log("Theres an error with AJAX sorting");
            },
            success: function() {
                /* reload table after sort*/ 
            $.get("indexpage_table.php", function(data) { 
                    $("#sort tbody").html(data); 
            }); 
                console.log("Saved.");      
            }
        });
        return true;
    }
    });
4

1 回答 1

0

我在想要移动的行中添加了一个类,如下所示: var sortable = $("#sort tbody .moveable").sortable({ ...

而且我只添加了隐藏的输入字段并将光标移动到具有该类的行。

到目前为止它似乎有效!

于 2012-10-03T16:54:45.000 回答