jquery UI 可排序的表格和 tr 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1307705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI Sortable with table and tr width
提问by Yaroslav
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 trit shrinks the content.
我正在使用 jQuery UI 可排序来使我的表格网格可排序。该代码似乎工作正常，但因为我没有向tds添加宽度，所以当我拖动tr它时它会缩小内容。
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 (fixand liquid).
例如; 如果我开始拖动时我的表格行是 500 像素，它会变成 300 像素。我认为这是因为网格中没有定义宽度。那是因为我为tds (fix和liquid)使用了两个类。
The fixclass makes the tdequal to the content width and liquidmakes the tdwidth 100%. It's my approach for grid table without having to assign width to tds.
的fix类使得td等于所述内容的宽度和liquid使td宽度100％。这是我的网格表方法，无需为tds分配宽度。
Any idea how to make sortable work with my approach?
知道如何使用我的方法进行可排序的工作吗？
回答by Dave James Miller
I found the answer here.
我在这里找到了答案。
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;
},
回答by Yaroslav
I think it can help:
我认为它可以帮助：
.ui-sortable-helper {
display: table;
}
回答by Keith
The selected answer here is a really nice solution, but it has one severe bug which is apparent in the original JS fiddle (http://jsfiddle.net/bgrins/tzYbU/): try dragging the longest row (God Bless You, Mr. Rosewater), and the rest of the cell widths collapse.
这里选择的答案是一个非常好的解决方案，但它有一个严重的错误，这在原始 JS 小提琴 ( http://jsfiddle.net/bgrins/tzYbU/) 中很明显：尝试拖动最长的行（上帝保佑你，先生. Rosewater），其余单元格宽度折叠。
This means that fixing the cell widths on the dragged cell is not enough - you also need to fix widths on the table.
这意味着在拖动的单元格上固定单元格宽度是不够的 - 您还需要在表格上固定宽度。
$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();
});
JS Fiddle: http://jsfiddle.net/rp4fV/3/
JS小提琴：http: //jsfiddle.net/rp4fV/3/
This fixes the problem of the table collapsing after you drag the first column, but introduces a new one: if you change the content of the table the cell sizes are now fixed.
这修复了拖动第一列后表格折叠的问题，但引入了一个新问题：如果您更改表格的内容，单元格大小现在是固定的。
To work around this when adding or changing content you would need to clear the widths set:
要在添加或更改内容时解决此问题，您需要清除设置的宽度：
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});
Then add your content, then fix widths again.
然后添加您的内容，然后再次固定宽度。
This still isn't a complete solution, as (especially with a table) you need a drop placeholder. For that we need to add a function on start that builds the placeholder:
这仍然不是一个完整的解决方案，因为（特别是对于表格）您需要一个放置占位符。为此，我们需要在开始时添加一个函数来构建占位符：
$('#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 + '"> </td>');
}
}).disableSelection();
JS Fiddle: http://jsfiddle.net/rp4fV/4/
JS小提琴：http: //jsfiddle.net/rp4fV/4/
回答by vincentp
回答by Teoman shipahi
Call this following code when your table is ready to be sorted, this will make sure your td elements has a fixed with without breaking table structure.
当您的表准备好进行排序时调用以下代码，这将确保您的 td 元素具有固定且不破坏表结构。
$(".tableToSort td").each(function () {
$(this).css("width", $(this).width());
});
回答by Max
Keith' solution is fine but produced a little havoc in Firefox which did not add up the colspans but cued them. (The old js string type pain in the knee)
基思的解决方案很好，但在 Firefox 中产生了一点破坏，它没有将 colspan 加起来，而是提示了它们。（老js字符串式膝盖痛）
replacing this line:
替换这一行：
cellCount += colspan;
with:
和：
cellCount += colspan-0;
Fixes the problem. (As js is forced to treat the variables as numbers instead of strings)
解决了问题。（因为 js 被迫将变量视为数字而不是字符串）
回答by Shea Riley
Dave James Miller's answer worked for me, but because of the layout of the container divs on my page, the helper that drags with the mouse cursor is offset from the position of my mouse. To fix that, I added the following to the helper callback
Dave James Miller 的回答对我有用，但是由于我页面上容器 div 的布局，使用鼠标光标拖动的助手会从我的鼠标位置偏移。为了解决这个问题，我在辅助回调中添加了以下内容
$(document.body).append($helper);
Here is the complete callback with the above line added:
这是添加了上述行的完整回调：
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;
}
I would have added this as a comment to Dave's answer, but I did not have enough rep on this account.
我会将此作为评论添加到 Dave 的回答中，但我在此帐户上没有足够的代表。
回答by Miika Kontio
It seems like disableSelection()- method is bad and deprecated nowadays. I can't use text inputs inside sort-able row anymore in Mozilla Firefox 35.0. It just isn't focusable anymore.
似乎disableSelection()- 方法现在很糟糕并且已被弃用。我不能再在Mozilla Firefox 35.0. 它只是不再聚焦了。
回答by Ach
After a lot of different attempts I just tried a simple solution which completes the solution of Dave James Miller to prevent the table of shrinking while dragging the largest row. I hope it will helps :)
经过很多不同的尝试，我只是尝试了一个简单的解决方案，它完成了 Dave James Miller 的解决方案，以防止表格在拖动最大行时缩小。我希望它会有所帮助:)
// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
let $originals = ui.helper.children();
ui.placeholder.children().each(function (index) {
$(this).width($originals.eq(index).width());
});
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
let $helper = tr.clone();
let $originals = tr.children();
$helper.children().each(function (index) {
$(this).width($originals.eq(index).outerWidth(true));
});
return $helper;
};
回答by mspiderv
.sortable({
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
