jquery UI 可排序的表格和 tr 宽度 [英] jquery UI Sortable with table and tr width

问题描述

我正在使用 jQuery UI 可排序来使我的表格网格可排序.该代码似乎工作正常，但因为我没有为 tds 添加宽度，所以当我拖动 tr 时它会缩小内容.

I am using jQuery UI sortable to make my table grid sortable. The code seems to work fine but because I am not adding width to tds, when I drag the tr it shrinks the content.

例如；如果我开始拖动时我的表格行是 500 像素，它会变成 300 像素.我认为这是因为网格中没有定义宽度.那是因为我为 td 使用了两个类(fix 和 liquid).

For example; if my table row is 500px when I start dragging, it becomes 300px. I assume that's happening because no width is defined in the grid. That's because I am using two classes for the tds (fix and liquid).

fix 类使 td 等于内容宽度，liquid 使 td 宽度为 100%.这是我的网格表方法，无需为 tds 分配宽度.

The fix class makes the td equal to the content width and liquid makes the td width 100%. It's my approach for grid table without having to assign width to tds.

知道如何使用我的方法进行可排序的工作吗?

Any idea how to make sortable work with my approach?

推荐答案

我找到了答案 此处.

我稍微修改了一下以克隆该行，而不是向原始行添加宽度:

I modified it slightly to clone the row, instead of adding widths to the original:

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },

这篇关于jquery UI 可排序的表格和 tr 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！