javascript - 如何在使用 Dragtable UI 时动态地将列添加到表格中？

Question

我需要一个 GUI，允许我通过拖放来移动列。但我也希望能够动态添加/删除表格中的列。

我遇到了Dragtable插件似乎能够满足我的需要。我唯一不喜欢这个 GUI 的是它的文档不是最好的。

无论如何，我添加了自定义 jQuery 代码，它允许我向表中添加列。我遇到的问题是我手动添加的列不可拖动。

如何使手动添加的列也可拖动？

这是我用来简单地将列添加到表中的代码。

$('#test1').click(function()
{
    $( "#testTable1 > thead > tr" ).each(function()
    {
        $(this).append('<th>New Column</th>');
    });

    $( "#testTable1 > tbody > tr" ).each(function()
    {
        $(this).append('<td>New cell in the column</td>');
    });

    // I tried adding this after I add the column, but it did not work. "it had no affect"
    //$('.defaultTable').dragtable();
});

在这里您可以看到我的代码的运行情况

  $(document).ready(function() {

    $('.defaultTable').dragtable();

	$('#test1').click(function()
	{
		$( "#testTable1 > thead > tr" ).each(function()
		{
			$(this).append('<th>New Column</th>');
		});
		
		$( "#testTable1 > tbody > tr" ).each(function()
		{
			$(this).append('<td>New cell in the column</td>');
		});
		
		$('.defaultTable').dragtable();
	});
	
	
  });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>

<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />

<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>

<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>


<div class="sample">
  
  <button type="button" id="test1">Add column</button>

  <div class="demo">
    <h4>demo</h4>
    <div class="demo-content">
      <table class="defaultTable sar-table" id="testTable1">
        <thead>
          <tr>
            <th>TIME</th>
            <th>%user</th>
            <th>%nice</th>
            <th>%system</th>
            <th>%iowait</th>
            <th>%idle</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
          </tr>
          <tr>
            <td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>

          </tr>
          <tr>
            <td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
  
</div>

Answer 1

再次调用dragTable之前只需刷新表格上的数据

$('.defaultTable').removeData().dragtable();

DEMO