如何使用 jquery sortable 对表的所有行中的表单元格进行排序

How do you use jquery sortable to sort table cells in all the table's rows?

本文关键字：表单 单元格 排序 jquery 何使用 sortable      更新时间：2023-09-26

我想创建一个可排序的表，并使用jquery可排序，我可以对表中的行或行中的单元格进行排序，但我不能在行之间移动单元格。我该怎么做？

例如。在这里： http://jsfiddle.net/dado_eyad/mKaFe/2/

我想把Second row: 2搬到First row: 1的地方

我有一个CSS技巧可以让可排序的表格单元格
类似于可排序网格示例：
https://jqueryui.com/sortable/#display-grid

Javascript部分很简单：

$('table').sortable({
    items: 'td', 
});

关键是要利用 CSS display 属性。

将单元格从第 2 行拖动到 Row1 时，
第 1 行将变为 4 个单元格，第 2 行只剩下 2 个单元格，
并且宽度将缩小以匹配表格宽度。

如果我们在样式表中使用 tr display: inline;，
让td显示为inline-block。
布局呈现的行为更像是内联块列表。
忽略 tr 的限制。

有关现场演示，请参阅下面的小提琴：
http://jsfiddle.net/elin/4Q6Qn/

将< tr >包装在< tbody >中，并将代码更改为：

  $("table tbody tr").sortable({
    items: 'td',
  }).disableSelection();

演示

您必须指定包含要排序的元素的容器，而不是实际元素。

我想将第二行：2移动到第一行：1

的位置 
 $("table tbody").sortable({
    items: 'tr',
  }).disableSelection();

演示

只需使用 connectWith 参数和一些脚本：

演示

$('table tr').sortable({
items: 'td',
connectWith:'table tr',
stop:function(e,prop){
  var id = prop.item;
  const colNum=3;
  $('table tr').not(':last').each(function(){
    var $this=$(this);
    if($this.children().length<colNum)
    {
      $this.append($this.next().children(':first'));
    }
    else if($this.children().length>colNum)
    {
      $this.next().prepend($this.children(':last'));
    }
  });}

}）

JavaScript 中的简单可排序表

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Bootstrap extras: Table sort indicator</title>

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
   <style>
   /* Table sort indicators */
th.sortable {
  position: relative;
  cursor: pointer;
}
th.sortable::after {
  font-family: FontAwesome;
  content: "'f0dc";
  position: absolute;
  right: 8px;
  color: #999;
}
th.sortable.asc::after {
  content: "'f0d8";
}
th.sortable.desc::after {
  content: "'f0d7";
}
th.sortable:hover::after {
  color: #333;
}
/* Heading styles */
h1.age-header {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
h2.page-header {
  margin-top: 0px;
  padding-top: 0px;
  line-height: 15px;
  vertical-align: middle;
}
h1 > .divider:before,
h2 > .divider:before,
h3 > .divider:before,
h4 > .divider:before,
h5 > .divider:before,
h6 > .divider:before,
.h1 > .divider:before,
.h2 > .divider:before,
.h3 > .divider:before,
.h4 > .divider:before,
.h5 > .divider:before,
.h6 > .divider:before {
  color: #777;
  content: "'0223E'0020";
}
   </style>
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</head>
<body>
  <table class="table table-bordered table-hover" id="myTable">
    <thead>
      <tr>
        <th class="sortable" onclick="sortTable(0)">Field 1</th>
        <th class="sortable" onclick="sortTable(1)">Field 2</th>
        <th class="sortable" onclick="sortTable(2)">Field 2</th>
      </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Data 1</td><td>Data 4</td></tr>
        <tr><td>2</td><td>Data 2</td><td>Data 5</td></tr>
        <tr><td>3</td><td>Data 3</td><td>Data 6</td></tr>
    </tbody>
  </table>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script  src="js/index.js">
    /*
    Use this below code in a separated file(index.js)
    var $sortable = $('.sortable');
$sortable.on('click', function(){
  var $this = $(this);
  var asc = $this.hasClass('asc');
  var desc = $this.hasClass('desc');
  $sortable.removeClass('asc').removeClass('desc');
  if (desc || (!asc && !desc)) {
    $this.addClass('asc');
  } else {
    $this.addClass('desc');
  }
});
    */
    </script>
</body>
</html>
相关文章：