使用<输入>的jQuery UI可排序位置

Question

此表http://jsfiddle.net/rp4fV/477/ 具有输入元素，我需要对添加数字的行进行排序并在拖动时获取结果，例如，如果我将 2 输入到第 4 行，则第 4 行自动起床以替换第 2 行并且所有行都得到排序取决于新的变化，有什么建议怎么做吗？ 我知道如何使用拖动来做到这一点，但使用输入我不知道如何做到这一点。

它的原因，有很多行，当拖动时，有时我无法识别正确的位置。

代码：

$('td, th', '#sortFixed').each(function () {
  var cell = $(this);
 cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();

Answer 1

您需要将输入元素绑定到oninput 事件，然后执行操作

// Fix the width of the cells

$('td, th', '#sortFixed').each(function() {
  var cell = $(this);
  cell.width(cell.width());
});

$('#sortFixed tbody').sortable().disableSelection();

$('body').on('input', 'input[type="text"]', function() {
  $('tbody tr').removeClass('marker');
  var currentEl = $(this);
  var index = parseInt(currentEl.val());
  if (index <= $('input[type="text"]').length) {
    currentEl.attr('value', index)
    var oldLoc = currentEl.parent().parent()
    var newLoc = $('tbody tr').eq(index-1)
    newLoc.addClass('marker')
    var newLocHtml = newLoc.html()
    newLoc.html(oldLoc.html()).hide().fadeIn(1200);
    oldLoc.html(newLocHtml)
  }
})

tbody tr {
  cursor: move
}

.marker {
  background: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>

<table id="sortFixed" class="grid">
    <caption>Kurt Vonnegut novels</caption>
    <thead>
        <tr><th>Order</th><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td><input type="text" id='ordem_0' name="order"></td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td><input type="text" id='ordem_1' name="order"></td><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td><input type="text" id='ordem_2' name="order"></td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td><input type="text" id='ordem_3' name="order"></td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td><input type="text" id='ordem_4' name="order"></td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

Answer 2

它可能比你想要的更复杂，但我希望这会有所帮助。

https://jsfiddle.net/Twisty/9aes8omr/

JavaScript

$(function() {
  function showIndex(tb) {
    var fields = $(tb).find("input[name='order']");
    console.log(fields);
    fields.each(function(ind, el) {
      console.log(ind, el);
      $(el).val(ind + 1);
    });
  }

  function spliceRow(tb, r, i) {
    var ind = i - 1;
    var ln = $("tr", tb).length;
    var rows = [];
    $("tr", tb).each(function(ind, el) {
      rows.push(el);
    });
    rows.splice(ind, 0, r);
    tb.html("");
    $.each(rows, function(k, v) {
      tb.append(v);
    });
  }
  // Fix the width of the cells
  $('td, th', '#sortFixed').each(function() {
    var cell = $(this);
    cell.width(cell.width());
  });

  $('#sortFixed tbody').sortable({
    items: "> tr",
    update: function(e, ui) {
      console.log("Sort Update.");
      showIndex($(this));
    }
  }).disableSelection();

  $("#sortFixed tbody").on("change", "input[name='order']", function(e) {
    var me = $(this);
    var orig = me.parents("tr");
    var row = orig.clone();
    var t = parseInt(me.val());
    console.log(t, row);
    orig.remove();
    spliceRow($("#sortFixed tbody"), row, t);
    $("#sortFixed tbody").sortable("refresh");
    showIndex($("#sortFixed tbody"));
  });
});

如果您创建一个 html 行数组，则可以使用.splice()。如果你想使用可排序并手动输入索引，上面的代码就是这样做的。您可以拖动它们，它会使用，或者您可以输入一个数字，它会改变位置（并且也可以刷新排序）。

这意味着最后，你可以随意使用.sortable("serialize")或.sortable("toArray")。

希望对您有所帮助。