JQUERY UI排序除第一个单元格以外的行 [英] JQUERY UI Sorting the rows except the first cell

问题描述

我使用的是JQuery UI Sortable（）库，我试图对表格行进行排序，除了每行的第一个单元格。
这是可能的吗？

我使用下面的代码完美地拖拽行：

  var fixHelperModified = function（e，tr）{
 var $ originals = tr.children（）; 
 var $ helper = tr.clone（）; 
 $ helper.children（）。each（function（index）{
 $（this）.width（$ originals.eq（index）.width（））
}）; 
返回$ helper; 
}; 
 $ b $（tbody）。sortable（{
 helper：fixHelperModified，
}）。disableSelection（）; 
  

是否可以只移动第一个单元格（或列）以外的行？

原因是我有一个输入字段带有ID值，但是我不希望它随着行的其余部分移动或更改，我需要它保持正确的顺序。

需求图：

您的帮助非常感谢！

再次感谢，

解决方案

我给你做了一个 JSFiddle 用你的代码片段来解决你的问题。
还有一个官方示例！

HTML（sample table）
请注意第一个TD上的类fixed：

 < script src =// ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js\"> ;</script> 
< TABLE id =sortable> 
< thead>< / thead> 
< tbody> 
< TR id =row1> 
< TD class =fixed> Data 1< / TD> 
< TD>数据2< / TD> 
< TD>数据3< / TD> 
< TD>数据4< / TD> 
< / TR> 
< TR id =row2> 
< TD class =fixed> Data 1< / TD> 
< TD>数据2< / TD> 
< TD>数据3< / TD> 
< TD>数据4< / TD> 
< / TR> 
< TR id =row3> 
< TD class =fixed> Data 1< / TD> 
< TD>数据2< / TD> 
< TD>数据3< / TD> 
< TD>数据4< / TD> 
< / TR> 
< / tbody> 
< / TABLE> 
  

新增取消：.ui-state-disabled和项：td：not（.ui-state-disabled）。
之后，您只需将类ui-state-disabled添加到您不想排序的任何对象。
JQuery-UI-Part：

pre $ var fixHelperModified = function（e，tr）{
var $原件= tr.children（）;
var $ helper = tr.clone（）;
$ helper.children（）。each（function（index）{
$（this）.width（$ originals.eq（index）.width（））
}）;
返回$ helper;
};
$ b $（table tr）。sortable（{
helper：fixHelperModified，
cancel：.ui-state-disabled，
items：td ：not（.ui-state-disabled）
}）。disableSelection（）;

$（。fixed）。addClass（ui-state-disabled）;

I am using the JQuery UI Sortable() library and I am trying to sort the table rows except the first cell of each row. Is this possible?

I am using the code below which drags the rows perfectly:

  var fixHelperModified = function(e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function(index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
  };

  $("tbody").sortable({
      helper: fixHelperModified,
  }).disableSelection();

Is it possible to only move the rows except the first cell (or column) if that's makes sense?

Reason for this is that I have an input field carrying the ID value, however I don't want this to move or change with the rest of the row, I need it to stay in the correct order.

Requirement Diagram:

Your helped is much appreciated!

Thanks again,

解决方案

I made you a little JSFiddle with your code-snippet that should fix your problem. There is a offical example too!

HTML (sample table) Note the class "fixed" on the first TD:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<TABLE id="sortable">
    <thead></thead>
    <tbody>
        <TR id="row1">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
        <TR id="row2">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
        <TR id="row3">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
    </tbody>
</TABLE>

Added cancel: ".ui-state-disabled" and items: "td:not(.ui-state-disabled)". After that you just add the class "ui-state-disabled" to any objects that you dont want to be sorted. JQuery-UI-Part:

  var fixHelperModified = function (e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function (index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
  };

  $("table tr").sortable({
      helper: fixHelperModified,
      cancel: ".ui-state-disabled",
      items: "td:not(.ui-state-disabled)"
  }).disableSelection();

  $(".fixed").addClass("ui-state-disabled");

这篇关于JQUERY UI排序除第一个单元格以外的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！