可添加、删减、排序的jQuery表格插件

演示  website 下载

插件介绍

这是一个小型的jQuery表格插件，只需单击一下，就可以克隆和删除表行中的任何元素。还提供了一个拖放排序的功能。需要加载jQuery UI排序插件。

使用方法

1. 在页面中加载jQuery库和表格克隆插件文件。

<script src="jquery.min.js"></script>
<script src="dynamicrows.js"></script>

2. 如果需要可排序功能，请加载jqueryui库（可排序插件）。

<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>

3. 添加复制/删除按钮，如下所示：

<table data-dynamicrows>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>E-Mail</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="contacts[0][firstname]"></td>
      <td><input type="text" name="contacts[0][lastname]"></td>
      <td><input type="text" name="contacts[0][email]"></td>
      <td>
        <i class="fa fa-minus" data-remove></i>
        <i class="fa fa-arrows" data-move></i>
        <i class="fa fa-plus" data-add></i>
      </td>
    </tr>
  </tbody>
</table>

4. 初始化表格插件。

$(function() {
  $('[data-dynamicrows]').dynamicrows();
});

5. 通过覆盖默认配置自定义插件，如下所示：

$('[data-dynamicrows]').dynamicrows({

  // CSS selector of table row
  row: 'tr', 

  // CSS selector of tbody
  rows: 'tbody',

  // minimum number of table rows
  minrows: 1, 

  // custom template while cloning
  copyRow : null,

  // clone form values
  copyValues: false,

  // element to hold row numbering
  increment : null,

  // prefix for form element that is ignored when the names are updated
  form_prefix: '', 

  // prevent renaming form elements
  prevent_renaming : false,

  // add/remove/sort attributes
  handle_add: '[data-add]:not(.disabled)',
  handle_remove: '[data-remove]:not(.disabled)',
  handle_move: '[data-move]:not(.disabled)', 

  // start index
  index_start: 0,

  // enable fade animation
  animation: false, // 'fade'
  animation_speed: 300
  
});

6. 回调方法。

$('[data-dynamicrows]').dynamicrows({

  // parameter: $row
  beforeAdd: null,
  beforeRemove: null, 
  beforeMove: null,
  beforeFormUpdateNames: null,
  beforeAll: null,
  afterAdd: null, 
  afterRemove: null,
  afterMove: null,
  afterFormUpdateNames: null,
  afterAll: null, 

});