Py学习  »  Jquery

jquery ui可排序的位置使用<input>

Mina • 4 年前 • 580 次点击  

这张桌子 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();
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/47089
 
580 次点击  
文章 [ 2 ]  |  最新文章 4 年前
Twisty
Reply   •   1 楼
Twisty    5 年前

可能比你想的要复杂,但我希望这能有帮助。

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") 随你喜欢。

希望能有所帮助。

cieunteung
Reply   •   2 楼
cieunteung    5 年前

您需要将输入元素绑定到 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>