Question

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

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

我想将Second row: 2移到First row: 1

的地方

Answer 1

我有一个CSS技巧让可排序的表格单元格像可分类网格样本一样：
https://jqueryui.com/sortable/#display-grid

Javascript部分简单如下：

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

关键是要使用CSS display属性。

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

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

的限制

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

Answer 2

将< tr >换成< tbody >并将您的密码更改为：

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

<强> DEMO

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

我想移动第二行：2到第一行的位置：1

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

<强> DEMO

Answer 3

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

Demo

$('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'));
    }
  });}

}）

Answer 4

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>

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

4 个答案:

我想移动第二行：2到第一行的位置：1