Question

我有一个可以通过jquery.sortable（）函数排序的表。目前，表中的所有行都是可排序的，rownumber存储在该行的隐藏元素中，并且每当移动行时都会更新。

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

我有以下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;
    }
    });

Answer 1

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

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

到目前为止似乎有效！

JQuery可排序使表行固定

1 个答案: