2

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

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

我想Second row: 2搬到First row: 1

4

4 回答 4

5

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

Javascript 部分很简单：

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

关键是要利用 CSSdisplay属性。

当你将一个单元格从 row2 拖到 row1 时，
row1 会变成 4 个单元格，row2 只剩下 2 个单元格，
并且宽度会缩小以匹配表格宽度。

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

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

于 2014-02-27T07:10:43.270 回答
4

< tr >将您的 '包装在 a 中< tbody >并将您的代码更改为：

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

演示

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

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

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

演示

于 2012-06-05T10:28:18.733 回答
1

只需使用 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'));
    }
  });}

})

于 2017-06-29T14:01:43.447 回答
-1

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>
于 2017-09-16T16:56:19.390 回答