jQuery UI可以用表格和tr的宽度sorting

我正在使用jQuery UIsorting,使我的表网格sorting。 代码似乎工作正常,但因为我没有添加宽度的td s,当我拖动tr缩小内容。

例如; 如果我的表格行是500px,当我开始拖动,它变成300px。 我认为这是因为在网格中没有定义宽度。 那是因为我使用了两个课程( fixliquid )。

fix类使td等于内容宽度, liquid使td宽度达到100%。 这是我的网格表的方法,而不必分配宽度td s。

任何想法如何使我的方法sorting工作?

我在这里find了答案。

我稍微修改它来克隆行,而不是增加原来的宽度:

  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; }, 

我认为这可以帮助:

 .ui-sortable-helper { display: table; } 

这里select的答案是一个非常好的解决scheme,但它有一个严重的错误,这是显而易见的原始JS小提琴( http://jsfiddle.net/bgrins/tzYbU/ ):尝试拖动最长的行( 上帝保佑你,先生Rosewater ),其余的单元格宽度崩溃。

这意味着在被拖动的单元格上固定单元格宽度是不够的 – 您还需要在表格上固定宽度。

 $(function () { $('td, th', '#sortFixed').each(function () { var cell = $(this); cell.width(cell.width()); }); $('#sortFixed tbody').sortable().disableSelection(); }); 

JS小提琴: http : //jsfiddle.net/rp4fV/3/

这可以修复拖动第一列后表格崩溃的问题,但会引入一个新问题:如果更改了表格的内容,则单元格大小现在已修复。

要在添加或更改内容时解决此问题,您需要清除设置的宽度:

 $('td, th', '#sortFixed').each(function () { var cell = $(this); cell.css('width',''); }); 

然后添加你的内容,然后再修正宽度。

这仍然不是一个完整的解决scheme,因为(特别是对于一个表),你需要一个放置占位符。 为此,我们需要在开始时添加一个构build占位符的函数:

 $('#sortFixed tbody').sortable({ items: '> tr', forcePlaceholderSize: true, placeholder:'must-have-class', start: function (event, ui) { // Build a placeholder cell that spans all the cells in the row var cellCount = 0; $('td, th', ui.helper).each(function () { // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total var colspan = 1; var colspanAttr = $(this).attr('colspan'); if (colspanAttr > 1) { colspan = colspanAttr; } cellCount += colspan; }); // Add the placeholder UI - note that this is the item's content, so TD rather than TR ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>'); } }).disableSelection(); 

JS小提琴: http : //jsfiddle.net/rp4fV/4/

这似乎克隆行在IE8上不能正常工作,但原来的解决scheme。

testing与jsFiddle 。

当你的表已经准备好sorting时,调用下面的代码,这将确保你的td元素具有固定的而不破坏表结构。

  $(".tableToSort td").each(function () { $(this).css("width", $(this).width()); }); 

基思'的解决scheme是好的,但在Firefox中产生了一点破坏,没有加起来的集体,但引导他们。 (老jsstring型膝盖疼痛)

取代这一行:

  cellCount += colspan; 

有:

  cellCount += colspan-0; 

解决了这个问题。 (因为js被迫将variables视为数字而不是string)

戴夫·詹姆斯·米勒的答案为我工作,但由于我的网页上的容器div的布局,拖动鼠标光标的助手是偏离我的鼠标的位置。 为了解决这个问题,我把下面的代码添加到了helpercallback中

 $(document.body).append($helper); 

这里是完整的callback与上面的行添加:

 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()); }); // append it to the body to avoid offset dragging $(document.body).append($helper); return $helper; } 

我会添加这个作为评论戴夫的答案,但我没有足够的代表这个帐户。

看起来像disableSelection() – 方法是坏的,现在不推荐使用。 在Mozilla Firefox 35.0我无法在可sorting的行内使用文本input。 这只是不可重点。

将sorting应用到表的tbody元素,并设置助手为“克隆”,如jquery-ui的API中所述

 $("$my-table-tbody").sortable({ helper: "clone" });