上一次说到了基于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. [svc]centos7安装优化最佳姿势

    源/软件/时区/selinux/ulimit/vim/sshd 下载安装: https://mirrors.aliyun.com/centos/7.4.1708/isos/x86_64/CentOS- ...

  2. linux 建立反向shell

    首先是netcat的版本选择BSD版的不支技-c -e参数,而GNU版的有-e参数,这里我用的是GNU版: sh-4.1# nc -V netcat (The GNU Netcat) Copyrigh ...

  3. angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

    在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...

  4. 旋转加载loading和点点加载loadingdemo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. eclipse 项目中的java文件没有在WEB-INF目录下的classes中 生成相对应的编译后的类

    1.首先确定project->Build Automatically是否勾选上: 2.执行完第一步之后测试一下看是否能编译,如果还是不能,则进行手动编译:  3,进入clean对话框,选择Cle ...

  6. PLSQL Developer新手使用教程（图文教程）

    PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介 ...

  7. 被linux线程基础折磨的点滴——还是没得到完美的答案，但至少得到了所需

    #include<sys/types.h> #include<unistd.h> #include<stdio.h> #include<stdlib.h> ...

  8. dp之分组背包hdu3033 最少取1次的解法（推荐）

    题意:有n双鞋子,m块钱,k个品牌,(一个品牌可以有多种价值不同的鞋子),接下来n种不同的鞋子,a为所属品牌,b为要花费的钱,c为所能得到的价值.每种价值的鞋子只会买一双,有个人有个伟大的梦想,每个品 ...

  9. 教程-TObjectList.Clear、TStringList.Clear方法对象有没有被释放

    相关资料: http://www.cnblogs.com/rogge7/p/4631796.html delphiTStringList通过AddObject方法添加对象. object里存的只是指向 ...

  10. 利用IT++搭建通信仿真平台

    IT++ is a C++ library of mathematical, signal processing and communication classes and functions.也就是 ...