Сортируемая позиция пользовательского интерфейса jQuery с использованием <input> - PullRequest
Новая
       7

Сортируемая позиция пользовательского интерфейса jQuery с использованием <input>

0 голосов
/ 09 декабря 2018

В этой таблице 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();

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Это может быть сложнее, чем вы хотели, но я надеюсь, что это поможет.

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") в качествекак.

Надеюсь, что помогает.

0 голосов
/ 10 декабря 2018

вам нужно привязать элемент ввода к событию 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>
...