JQuery 可排序使表行固定答案

【问题标题】：JQuery sortable making table rows fixedJQuery 可排序使表行固定
【发布时间】：2012-10-03 15:56:50
【问题描述】：

我有一个可通过 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;
    }
    });

【问题讨论】：

拆分表格有什么问题？您可以将它们拆分为两个表格 css 以便它们看起来仍然像一个。
我需要将列标题移动到 php 中，因为我正在动态加载内容，因此在使用 on() 函数加载后会引用 tbody 内的任何内容。我想我可以修改 sortable 函数看起来像这样：var sortable = $("#sort").on(live(),'tbody',.sortable({ ... 但如果我不需要的话，我真的宁愿不必尝试

标签： jquery html jquery-ui-sortable

【解决方案1】：

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

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

到目前为止它似乎有效！

【讨论】：