Question

我在WordPress中有一张大桌子，我需要更改列的顺序，但是我必须在需要时每次手动进行操作。有没有插件，可以在其中加载所有表格，然后从中拖放整列作为选择？

网站为here

Answer 1

根据您的问题，我可以给您一个演示，向您展示如何逐步满足您的要求。

请选中此UPDATED FIDDLE。根据您的要求，我们正在使用Dragtable js。

排序完成后，我们将检查表的每一行以找到相应行的每一列，并创建一个json树结构。

HTML

<table id="sort_table">
  <thead>
    <tr>
      <th></th>
      <th class="draggable">Col1</th>
      <th class="draggable">Col2</th>
      <th class="draggable">Col3</th>
      <th class="draggable">Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row1</td>
      <td>Data11</td>
      <td>Data12</td>
      <td>Data13</td>
      <td>Data14</td>
    </tr>
    <tr>
      <td>Row2</td>
      <td>Data21</td>
      <td>Data22</td>
      <td>Data23</td>
      <td>Data24</td>
    </tr>
    <tr>
      <td>Row3</td>
      <td>Data31</td>
      <td>Data32</td>
      <td>Data33</td>
      <td>Data34</td>
    </tr>
    <tr>
      <td>Row4</td>
      <td>Data41</td>
      <td>Data42</td>
      <td>Data43</td>
      <td>Data44</td>
    </tr>
  </tbody>
</table>

JS（已更新）

$(document).ready(function() {
  $('#sort_table').dragtable({
    dragaccept: '.draggable',
    beforeStop: function() {
      var tree = {};
      var rows = [];
      $('#sort_table tr').each(function() {
        var col_count = 0;
        var cols = [];
        $(this).children().each(function() {
          cols[col_count] = $(this).html();
          col_count++;
        });
        rows.push(cols);
      });
      tree.data = rows;
      var tree_json = JSON.stringify(tree); // use the variable to save to DB
      console.log(tree_json);
    }
  });
});

您可以将变量 tree_json 保存到数据库（将ajax调用为php并保存到DB）

每次加载页面时，您都可以将数据库中的值带到一个变量中，并使用json_decode将字符串变成json对象

$table_structure  = ; // Code to take from db
$table_structure = json_decode($table_structure);

您可以使用JSONLint

从控制台复制并粘贴json以检查其是否有效。

在WordPress中更改表格的列

1 个答案: