Блог

Главная - Вопросы по программированию - Измените порядок столбцов таблицы с помощью перетаскивания с помощью jQuery

Измените порядок столбцов таблицы с помощью перетаскивания с помощью jQuery

#javascript #jquery #html #drag-and-drop

#javascript #jquery #HTML #перетаскивание

Вопрос:

Я хочу разрешить пользователю изменять порядок столбцов в таблице, перетаскивая их. Я использую jquery.dragtable.js чтобы разрешить перетаскивание. Все работает нормально. Теперь я хочу сохранить порядок таблиц после перетаскивания на стороне клиента и восстановить состояние onload.

Вот мой HTML-код:

 <table id="tblReg" class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
            <th>Password</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
            <td>545trt574</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
            <td>yffft5456</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>fgfhgf444</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Rima</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>jjk8899</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
        </tr>
        <tr>
            <th>5</th>
            <td>Sundar</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>76767687hjh</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
        </tr>
    </tbody>
</table>

<a href="#" class="order">Get Table Order</a>
<p class="porder"></p>

Jquery:

 $(document).ready(function(){
    $('#tblReg').each(function(){
        $(this).dragtable({
            placeholder: 'dragtable-col-placeholder',
            items: 'thead th:not( .notdraggable ):not( :has( .dragtable-drag-handle ) ), .dragtable-drag-handle',
            appendTarget: $(this).parent(),
            scroll: true
        });
    });
    $('a.order').click(function(){
        console.log($('#tblReg').dragtable('order'));
        var curOrder = $('#tblReg').dragtable('order');
        $('.porder').text(curOrder);
        return false;
    });
});

Ссылка на плагин:https://github.com/akottr/dragtable

Разрешить предоставлять получает порядок таблиц следующим образом:

 ["#", "First Name", "Last Name", "Username", "Password", "Email", "Phone"]

Теперь я хочу сохранить это на стороне клиента (localStorage / Cookies) и изменить порядок загрузки в соответствии с сохраненными данными.

Как это сделать? Я новичок в jquery.

Ответ №1:

Попробуйте этот код, он работает нормально.

Порядок столбцов устанавливается в sessionStorage после перетаскивания, а затем обновите страницу. Вы увидите изменение порядка столбцов. введите описание изображения здесь

Упорядочивание записей в формате массива вы можете увидеть в консоли: введите описание изображения здесь

 <!DOCTYPE html>
<html>
<head>
	<title>Reorder</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table id="tblReg" class="table table-bordered">
        <thead>
          <tr class="active">
            <th id="number">#</th>
            <th id="fname">First Name</th>
            <th id="lname">Last Name</th>
            <th id="uname">Username</th>
            <th id="pass">Password</th>
            <th id="email">Email</th>
            <th id="phone">Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
            <td>545trt574</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
          </tr>
          <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
            <td>yffft5456</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
          </tr>
          <tr>
            <th>3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>fgfhgf444</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
          </tr>
          <tr>
            <th>4</th>
            <td>Rima</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>jjk8899</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
          </tr>
          <tr>
            <th>5</th>
            <td>Sundar</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>76767687hjh</td>
            <td>Na@email.com</td>
            <td>7788994320</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <a href="#" class="btn btn-info order">Get Table Order</a>
      <p class="porder"></p>
    </div>
  </div>
</div>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>


<script type="text/javascript">
$(document).ready(function(){
  // this code for sessionStorage
  $('#tblReg').dragtable({ 
    persistState: function(table) { 
      if (!window.sessionStorage) return; 
      var ss = window.sessionStorage; 
      table.el.find('th').each(function(i) { 
        if(this.id != '') {table.sortOrder[this.id]=i;} 
      }); 
      ss.setItem('tableorder', JSON.stringify(table.sortOrder)); 
    }, 
    restoreState: eval('('   window.sessionStorage.getItem('tableorder')   ')') 
  });

  // this code for each th drag and drop 
  $('#tblReg').each(function(){
    $(this).dragtable({
      placeholder: 'dragtable-col-placeholder',
      items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
      appendTarget: $(this).parent(),
      scroll: true
    });
  });

  // Click and then you see ordering of (th) in console.
  $('a.order').click(function(e){
    e.preventDefault();
    var order_array = [];
    $('#tblReg').dragtable().find('thead th').each(function(i,v){
      order_array.push($(v).text());
    });
    console.log(order_array);
    $('.porder').text(order_array);
  }); 

}); 
</script>
</body>
</html>

Комментарии:

1. но после обновления страницы порядок таблиц не меняется в соответствии с консольным массивом

2. и я хочу использовать localStorage вместо sessionStorage @ Raeesh

3. Массив консоли изменится после нажатия кнопки «Получить порядок в таблице». И я пытаюсь решить с помощью localStorage @sandy

Ответ №2:

Попробуйте этот код для сохранения порядка столбцов в localStorage.

введите описание изображения здесь

   //For localstorage
  $('#tblReg').dragtable({ 
    persistState: function(table) { 
      if (!window.localStorage) return; 
      var ss = window.localStorage; 
      table.el.find('th').each(function(i) { 
        if(this.id != '') {table.sortOrder[this.id]=i;} 
      }); 
      ss.setItem('tableorder', JSON.stringify(table.sortOrder));
     $('a.order').trigger('click');//When drop the column then button will trigger 
    }, 
    restoreState: eval('('   window.localStorage.getItem('tableorder')   ')') 
  });

Комментарии:

1. Здесь вы также используете <th> ID и активный класс для <tr>, но добавлять <th> ID не нужно, потому что моя таблица генерируется динамически.

2. Он отлично работает с <td> id. но моя таблица генерируется динамически, поэтому мне нужно без td id @Raeesh

3. Спасибо @sandy. Из-за необходимости уникальной идентификации в localStorage для установки и получения записей. Звучит неплохо для ваших нужд, я пытаюсь решить это без <th> id после достижения, опубликую здесь…

4. Привет, Раиш, я создал код для генерации динамического идентификатора, и он работает нормально. Но когда я добавляю одну или несколько таблиц, это не работает.

5. Привет @JargoViet. Хорошо, если вы хотите, чтобы несколько таблиц сохраняли порядок в localStorage, поэтому вам понадобятся разные идентификатор таблицы и th id , а также другое имя setItem и после инициализируйте эти идентификаторы в коде JavaScript . Спасибо

Ответ №3:

Я закончил! Пожалуйста, проверьте, нет ли ошибки.

 $(document).ready(function(){
    //localStorage.clear();
    var tblReg  = $('#tblReg').attr('id');
    var tblRegMaster = $('#tblRegMaster').attr('id');

    processDnD(tblReg);
    processDnD(tblRegMaster);

});


function processDnD(cuTable){
    var tblName = cuTable;
    $('#' cuTable).find('th').each(function() {
        var ctxt = $(this).text();
        if(ctxt == 'First Name'){
            $(this).attr('id','firstName-' tblName);
        }else if(ctxt == 'Password'){
            $(this).attr('id','password' tblName);
        }else if(ctxt == 'Email'){
            $(this).attr('id','iemail' tblName);
        }else if(ctxt == 'Username'){
            $(this).attr('id','userName' tblName);
        }else if(ctxt == 'Last Name'){
            $(this).attr('id','lastName' tblName);
        }else if(ctxt == '#'){
            $(this).attr('id','slNo' tblName);
        }else if(ctxt == 'Phone'){
            $(this).attr('id','phone' tblName);
        }else if(ctxt == 'PO Number'){
            $(this).attr('id','pono' tblName);
        }else if(ctxt == 'Shipper'){
            $(this).attr('id','shipperName' tblName);
        }else if(ctxt == 'Status'){
            $(this).attr('id','cuStatus' tblName);
        }else if(ctxt == 'Booking Line'){
            $(this).attr('id','BookingLine' tblName);
        }else if(ctxt == 'Access Mode'){
            $(this).attr('id','AccessMode' tblName);
        }else if(ctxt == 'Container No'){
            $(this).attr('id','ContainerNo' tblName);
        }
    })

    $('#' cuTable).dragtable({ 
        persistState: function(table) { 
        if (!window.localStorage) return; 
            var ss = window.localStorage; 
            table.el.find('th').each(function(i) { 
            if(this.id != '') {table.sortOrder[this.id]=i;} 
        }); 
        ss.setItem('setTableOrder-' tblName, JSON.stringify(table.sortOrder)); 
        }, 
        restoreState: eval('('   window.localStorage.getItem('setTableOrder-' tblName)   ')') 
    });

    $('#' cuTable).each(function(){
        $(this).dragtable({
            placeholder: 'dragtable-col-placeholder',
            items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
            appendTarget: $(this).parent(),
            scroll: true
        })
    }); 
}