上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。
        但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？
针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）
       修改如下：
inputGroup-1.1.js
  1. /**
  2. * Created by DreamBoy on 2016/6/4.
  3. */
  4. /**
  5. * Created by DreamBoy on 2016/4/29.
  6. */
  7. $(function() {
  8. $.fn.initInputGroup = function (options) {
  9. //1.Settings 初始化设置
  10. var c = $.extend({
  11. widget: 'input',
  12. add: "<span class=\"glyphicon glyphicon-plus\"></span>",
  13. del: "<span class=\"glyphicon glyphicon-minus\"></span>",
  14. field: '',
  15. data: []
  16. }, options);
  17. var _this = $(this);
  18. 　　_this.children().remove();
  19. //添加序号为1的输入框组
  20. addInputGroup(1);
  21. /**
  22. * 添加序号为order的输入框组
  23. * @param order 输入框组的序号
  24. * @param data 初始化输入框组中的数据
  25. */
  26. function addInputGroup(order) {
  27. //1.创建输入框组
  28. var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
  29. //2.输入框组的序号
  30. var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
  31. //3.设置输入框组的序号
  32. inputGroupAddon1.html(" " + order + " ");
  33. //4.创建输入框组中的输入控件（input或textarea）
  34. var widget = '', inputGroupAddon2;
  35. if(c.widget == 'textarea') {
  36. widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
  37. widget.html(c.data[order - 1]);
  38. inputGroupAddon2 = $("<span class='input-group-addon'></span>");
  39. } else if(c.widget == 'input') {
  40. widget = $("<input class='form-control' type='text'/>");
  41. widget.val(c.data[order - 1]);
  42. inputGroupAddon2 = $("<span class='input-group-btn'></span>");
  43. }
  44. //5.设置表单提交时的字段名
  45. if(c.field.length == 0) {
  46. widget.prop('name', c.widget + 'Data[]');
  47. } else {
  48. widget.prop('name', c.field + '[]');
  49. }
  50. //6.创建输入框组中最后面的操作按钮
  51. var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
  52. addBtn.appendTo(inputGroupAddon2).on('click', function() {
  53. //7.响应删除和添加操作按钮事件
  54. if($(this).html() == c.del) {
  55. $(this).parents('.input-group').remove();
  56. } else if($(this).html() == c.add) {
  57. $(this).html(c.del);
  58. addInputGroup(order+1);
  59. }
  60. //8.重新排序输入框组的序号
  61. resort();
  62. });
  63. inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
  64. _this.append(inputGroup);
  65. if(order + 1 > c.data.length) {
  66. return;
  67. }
  68. addBtn.trigger('click');
  69. }
  70. function resort() {
  71. var child = _this.children();
  72. $.each(child, function(i) {
  73. $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
  74. });
  75. }
  76. }
  77. });
index-1.1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>输入框组——改进版</title>
  8. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  9. <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
  10. <!--[if lt IE 9]>
  11. <script src="js/html5shiv.js"></script>
  12. <script src="js/respond.min.js"></script>
  13. <![endif]-->
  14. </head>
  15. <body>
  16. <div class="container">
  17. <div class="input-group-add">
  18. </div>
  19. </div>
  20. <script src="js/jquery-1.11.1.min.js"></script>
  21. <script src="js/bootstrap.min.js"></script>
  22. <script src="inputGroup-1.1.js"></script>
  23. <script>
  24. $(function() {
  25. $('.input-group-add').initInputGroup({
  26. 'widget' : 'input', //输入框组中间的空间类型
  27. /*'add' : '添加',
  28. 'del' : '删除'*/
  29. 'field': 'data',
  30. 'data' : ['haha', 'hello', 'hi', 'dj']
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
       此时，在不设置 data 属性或data属性设置为空数组 []，将与原来显示结果无异。设置由于设置了field属性，所以此时输入框或文本框的name属性为field属性的值，如：
       如果没有设置 field 属性的话，默认为 inputData[] 或 textarea[] 对应设置 input 或 textarea控件。
       当设置了 data 属性后，并且 data 不为空数组时，初始化界面后如下：（设置要的数组将 放入 输入框组 中）
       同样能正常使用 “添加”和“输出”功能。
 
https://blog.csdn.net/qq_15096707/article/details/51585758

基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. Bootstrap历练实例：输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  4. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  5. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  6. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  7. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  8. 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：输入框（Input）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 基于FPGA的线阵CCD实时图像采集系统

    基于FPGA的线阵CCD实时图像采集系统 2015年微型机与应用第13期 作者:章金敏,张 菁,陈梦苇2016/2/8 20:52:00 关键词: 实时采集 电荷耦合器件 现场可编程逻辑器件 信号处理 ...

  2. 【Android】21.2 2D图形图像处理（Canvas和Paint）

    分类:C#.Android.VS2015: 创建日期:2016-03-19 一.Canvas对象简介 画布(Canvas对象)是与System.Drawing或iOS核心图形等传统框架非常类似的另一种 ...

  3. 【Android】16.3 带Intent过滤器的Services

    分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 这一节演示带Intent过滤器的Services的基本用法. 1.配置Intent Filter 不论是本地解决方 ...

  4. android studio - 解决Android Studio不停的Indexing的问题

    File > Invalidate Caches/Restart

  5. 原来npm的依赖树管理不靠谱

    今天删除了一个模块,结果发现项目编译无法成功,缺依赖,然后再安装也不行了.只好把node_modules清空,重新npm install,项目恢复正常. npm uninstall的时候,可能把现存某 ...

  6. angularJS绑定数据中对标签转义的处理二 与pre标签的使用

    一.问题 默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本.在实际工作时碰到接口返回的数据带有html格式时该如何处理. 二.解决办法 1.引 ...

  7. Windows10 64位 Python2.7 Matplotlib安装

    为了安装Matplotlib 百度了一大堆,也下载了一大堆安装包,结果还是报错ImportError: DLL load failed: %1 不是有效的 Win32 应用程序. 后来直接从官网看怎么 ...

  8. C语言 · 龟兔赛跑预测

    基础练习 龟兔赛跑预测   时间限制:1.0s   内存限制:512.0MB        锦囊1 模拟.   问题描述 话说这个世界上有各种各样的兔子和乌龟,但是研究发现,所有的兔子和乌龟都有一个共 ...

  9. git commit 多行注释方法说明

    为了提高项目质量,不仅仅是代码的质量,而且还包括代码管理的质量. 所以,详细的git commit message 必不可少. 现在记录一下git commit 多行详细的commit 信息. 首先, ...

  10. GB2312汉字区位码、交换码和机内码转换方法 (ZT)

    GB2312汉字区位码.交换码和机内码转换方法 (ZT) 为了适应计算机处理汉字信息的需要,1981年我国颁布了GB2312国家标准.该标准选出6763个常用汉字(其中,一级常用汉字3755个,二级汉 ...