jquery表列拖放與重新排序

我想允許用戶通過拖放他們重新排序表中的列。我正在使用jquery.dragtable.js來拖放並在拖放後保存順序，甚至重新加載頁面。在這裏，我使用localStorage來存儲表格順序作爲插件JS提供的選項。它只用一張桌子工作。在具有名稱列標題的多個表中，它不起作用。實際上，它會用另一個表格順序值覆蓋以前的localStorage變量。jquery表列拖放與重新排序

HTML：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Table Reorder</title> 
<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui.min.js"></script> 
<script src="jquery.dragtable.js"></script> 
<link rel="stylesheet" type="text/css" href="dragtable.css" /> 
</head> 
<body> 
    <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 class="sort"> 
      <tr> 
       <th>1</th> 
       <td>Mark</td> 
       <td>Otto</td> 
       <td>@mdo</td> 
       <td>545trt574</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>2</th> 
       <td>Jacob</td> 
       <td>Thornton</td> 
       <td>@fat</td> 
       <td>yffft5456</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>3</th> 
       <td>Larry</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>fgfhgf444</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>4</th> 
       <td>Rima</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>jjk8899</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>5</th> 
       <td>Sundar</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>76767687hjh</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
     </tbody> 
    </table> 

    <hr> 

    <table id="tblRegMaster" 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 class="sort"> 
      <tr> 
       <th>1</th> 
       <td>Mark</td> 
       <td>Otto</td> 
       <td>@mdo</td> 
       <td>545trt574</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>2</th> 
       <td>Jacob</td> 
       <td>Thornton</td> 
       <td>@fat</td> 
       <td>yffft5456</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>3</th> 
       <td>Larry</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>fgfhgf444</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>4</th> 
       <td>Rima</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>jjk8899</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
      <tr> 
       <th>5</th> 
       <td>Sundar</td> 
       <td>the Bird</td> 
       <td>@twitter</td> 
       <td>76767687hjh</td> 
       <td>[email protected]</td> 
       <td>7788994320</td> 
      </tr> 
     </tbody> 
    </table>

jQuery的 -

$(document).ready(function(){ 

    var tblReg = $('#tblReg').attr('id'); 
    var tblRegMaster = $('#tblRegMaster').attr('id'); 

    processDnD(tblReg); 
    processDnD(tblRegMaster); 

}); 


function processDnD(cuTable){ 
    $('#'+cuTable).find('th').each(function() { 
     var ctxt = $(this).text(); 
     if(ctxt == 'First Name'){ 
      $(this).attr('id','firstName'); 
     }else if(ctxt == 'Password'){ 
      $(this).attr('id','password'); 
     }else if(ctxt == 'Email'){ 
      $(this).attr('id','iemail'); 
     }else if(ctxt == 'Username'){ 
      $(this).attr('id','Username'); 
     }else if(ctxt == 'Last Name'){ 
      $(this).attr('id','lastName'); 
     }else if(ctxt == '#'){ 
      $(this).attr('id','slNo'); 
     }else if(ctxt == 'Phone'){ 
      $(this).attr('id','phone'); 
     }  
    }) 

    $('#'+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', JSON.stringify(table.sortOrder)); 
     }, 
     restoreState: eval('(' + window.localStorage.getItem('setTableOrder') + ')') 
    }); 

    $('#'+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 
     }) 
    }); 
}

我想reoder multipule表工作。請提出任何解決方案。由於

插件參見：https://github.com/akottr/dragtable

來源

2016-10-26 Jargo Viet

jquery dragtable可以使用兩個表（和您的代碼似乎工作正確）。也許你想要重新排序第一個表格也會改變第二個表格的順序？ – Dekel

它工作完美！檢查這個http://codepen.io/mozzi/pen/gwyZrd –

是的也改變了第二個或更多表的順序@ dekel –

我已經解決了這個問題，你可以從上的jsfiddle檢查以下網址。我希望這個片段可以幫助你。

jsfiddle.net/raeeshalam/rn8sxxba

來源

2016-10-28 06:34:48

jquery表列拖放與重新排序

回答

相關問題