如何在HTML5中制作5秒刷新率的可拖拽列？

Question

我正在做一个网站，这是从ajax网络服务调用加载数据，并在html表中填充它，这个数据每5秒刷新一次。我已经在Backbone JS中使用延迟加载实现了这一点。因此，当javascript定时器每隔5秒触发一次时，它会进行ajax调用，并重新加载包含表的模板，从而显示新数据。

this.metrices.fetch({
            url : (isLocal) ? ('js/jsons/agent.json') : (prev_this.url + '/agentstat'),
            data: JSON.stringify(param),
            type: "POST",
            dataType: "JSON",
            contentType: "application/json",
            })
            .done(function() {  
            }); 


this.$("#agentMetrics").html(this.agentTemplate({
            agents: this.metrices.toJSON()
        }));

#agentMetrics模板如下所示

      <table class="table_class js-table-deskop" id="agent" style = "width:100%">
     <tr class="">
        <th class="js-table-agent js-agentPref-0 js-agentPref-0">Names</th>
        <th class="js-table-agent js-agentPref-1">State</th>
        <th class="js-table-agent js-agentPref-2">Skill</th>
        <th class="js-table-agent js-agentPref-8">Center</th>
        <th class="js-table-agent js-agentPref-9">Lan Id</th>
        <th class="js-table-agent js-agentPref-10">Login Id</th>
        <th class="js-table-agent js-agentPref-11">Manager</th>
        <th class="js-table-agent js-agentPref-12">Site</th>
        <th class="js-table-agent js-agentPref-13">Team Leader</th>
        <th class="js-table-agent js-agentPref-14">Workgroup</th>
     </tr>
     {{#each agents}}
     <tr >
        <td class="th1 js-agentPref-0">{{name}}</td>
        <td class="js-alert js-agentPref-1 js-state-agent" >{{state}}</td>
        <td class="js-alert js-agentPref-2 js-skill-agent">{{dispSkill}}</td>
        <td class="js-alert js-agentPref-8">{{center}}</td>
        <td class="js-alert js-agentPref-9 js-lanid-agent">{{lanId}}</td>
        <td class="js-alert js-agentPref-10">{{loginId}}</td>
        <td class="js-alert js-agentPref-11">{{manager}}</td>
        <td class="js-alert js-agentPref-12">{{site}}</td>
        <td class="js-alert js-agentPref-13">{{teamLead}}</td>
        <td class="js-alert js-agentPref-14">{{workGroup}}</td>
     </tr>
     {{/each}}
  </table>

现在的问题是，我有了一个新的要求，我必须使这些列可调整大小和可交换，即它们的宽度可以通过拖动来更改，并且可以像在Adobe flex中那样交换列。这就是它变得棘手的地方，因为我使用了什么，因为模板在5秒内被刷新，所以它不能保持这个选择是否有任何插件来实现这一点，它支持这个首选项的保留，拖动或交换。或者我可以一些如何防止加载模板，任何提示

Answer 1

使用像rivets.js这样的数据绑定库。

将视图与铆钉绑定后，模型/集合中的更改将由铆钉在DOM中更新，而不会替换整个DOM。

如果添加了新的记录，新的DOM元素将被插入到相应的位置，而不会改变现有的记录。

下面是我的另一个answer上的一个小演示：

​

rivets.adapters[':'] = {
  observe: function(obj, keypath, callback) {
    obj.on('change:' + keypath, callback)
  },
  unobserve: function(obj, keypath, callback) {
    obj.off('change:' + keypath, callback)
  },
  get: function(obj, keypath) {
    return obj.get(keypath)
  },
  set: function(obj, keypath, value) {
    obj.set(keypath, value)
  }
}
var data = [{
  name: "john",
  age: 10
}, {
  name: "joseph",
  age: 11
}, {
  name: "joy",
  age: 12
}]

var userCollection = new Backbone.Collection(data);
var View = Backbone.View.extend({
  initialize: function(options) {
    this.render()
  },
  render: function() {
    rivets.bind(this.el, {
      users: this.collection
    });
  }
});
var userView = new View({
  el: '#user-list',
  collection: userCollection
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<ul id='user-list'>
  <li rv-each-user="users.models">
    <input type="text" rv-value="user:age"/>
    <span>{user:name}</span><span> {user:age}</span>
  </li>
</ul>

​