具有添加/删除功能的可重复表单字段 - jQuery Repeater

版本:

浏览量:1168

最后更新：2021-09-06

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

Repeater 是一个简单但完全可定制的 jQuery 插件，用于复制具有添加/删除功能的单个或多个（嵌套）表单字段。

可用于为那些必须在其他表单字段中输入更多信息的人创建动态表单。

如何使用它：

1.jquery.repeater.min.js在jQuery库之后加载主脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.repeater.min.js"></script>

2. 将data-repeater-item属性添加到可重复表单字段并在属性中定义重写名称属性的基础data-repeater-list。在此示例中，第一个 data-repeater-item 的 name 属性将变为jquery-script[0][text-input]，第二个 data-repeater-item 将变为jquery-script[1][text-input]。

<form class="example">
  <div data-repeater-list="jquery-script">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="Script" />
    </div>
  </div>
</form>

3. 在表单中添加删除和复制按钮。

<form class="example">
  <div data-repeater-list="jquery-script">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
    <div data-repeater-item>
      <input type="text" name="text-input" value="Script" />
      <input data-repeater-delete type="button" value="Delete" />
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

4. 初始化插件并完成。

$('.example').repeater({
  // options here
})

5. 也支持嵌套表单域。

<form class="example">
  <div data-repeater-list="jquery-script">
    <div data-repeater-item>
      <input type="text" name="text-input" value="jQuery" />
      <input data-repeater-delete type="button" value="Delete" />
      <div class="inner-repeater">
        <div data-repeater-list="another-repeater">
          <div data-repeater-item>
            <input type="text" name="inner-text-input" value="Script" />
            <input data-repeater-delete type="button" value="Delete" />
          </div>
        </div>
        <input data-repeater-create type="button" value="Add"/>
      </div>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

$('.example').repeater({
  repeaters: [{
    selector: '.inner-repeater'
  }]
})

6. 更多配置和回调。

$('.example').repeater({
 
  // start with an empty list of repeaters. Set your first (and only)
  // "data-repeater-item" with style="display:none;" and pass the
  // following configuration flag
  initEmpty: true,
 
  // "defaultValues" sets the values of added items.  The keys of
  // defaultValues refer to the value of the input's name attribute.
  // If a default value is not specified for an input, then it will
  // have its value cleared.
  defaultValues: {
    'text-input': 'foo'
  },
 
  // Removes the delete button from the first list item
  isFirstItemUndeletable: false,
 
  // "show" is called just after an item is added.  The item is hidden
  // at this point.  If a show callback is not given the item will
  // have $(this).show() called on it.
  show: function () {
    $(this).slideDown();
  },
 
  // "hide" is called when a user clicks on a data-repeater-delete
  // element.  The item is still visible.  "hide" is passed a function
  // as its first argument which will properly remove the item.
  // "hide" allows for a confirmation step, to send a delete request
  // to the server, etc.  If a hide callback is not given the item
  // will be deleted.
  hide: function (deleteElement) {
    if(confirm('Are you sure you want to delete this element?')) {
      $(this).slideUp(deleteElement);
    }
  },
 
  // You can use this if you need to manually re-index the list
  // for example if you are using a drag and drop library to reorder
  // list items.
  ready: function (setIndexes) {
    $dragAndDrop.on('drop', setIndexes);
  },
 
})

联系我们