帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-12-09 网页特效 评论

插件介绍

这是一个小型的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, 

});
美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言