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

上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。

但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？

针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）

修改如下：

inputGroup-1.1.js

[javascript] view plain copy

/**
* Created by DreamBoy on 2016/6/4.
*/
/**
* Created by DreamBoy on 2016/4/29.
*/
$(function() {
$.fn.initInputGroup = function (options) {
//1.Settings 初始化设置
var c = $.extend({
widget: 'input',
add: "<span class=\"glyphicon glyphicon-plus\"></span>",
del: "<span class=\"glyphicon glyphicon-minus\"></span>",
field: '',
data: []
}, options);
var _this = $(this);
　　_this.children().remove();
//添加序号为1的输入框组
addInputGroup(1);
/**
* 添加序号为order的输入框组
* @param order 输入框组的序号
* @param data 初始化输入框组中的数据
*/
function addInputGroup(order) {
//1.创建输入框组
var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
//2.输入框组的序号
var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
//3.设置输入框组的序号
inputGroupAddon1.html(" " + order + " ");
//4.创建输入框组中的输入控件（input或textarea）
var widget = '', inputGroupAddon2;
if(c.widget == 'textarea') {
widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
widget.html(c.data[order - 1]);
inputGroupAddon2 = $("<span class='input-group-addon'></span>");
} else if(c.widget == 'input') {
widget = $("<input class='form-control' type='text'/>");
widget.val(c.data[order - 1]);
inputGroupAddon2 = $("<span class='input-group-btn'></span>");
}
//5.设置表单提交时的字段名
if(c.field.length == 0) {
widget.prop('name', c.widget + 'Data[]');
} else {
widget.prop('name', c.field + '[]');
}
//6.创建输入框组中最后面的操作按钮
var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
addBtn.appendTo(inputGroupAddon2).on('click', function() {
//7.响应删除和添加操作按钮事件
if($(this).html() == c.del) {
$(this).parents('.input-group').remove();
} else if($(this).html() == c.add) {
$(this).html(c.del);
addInputGroup(order+1);
}
//8.重新排序输入框组的序号
resort();
});
inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
_this.append(inputGroup);
if(order + 1 > c.data.length) {
return;
}
addBtn.trigger('click');
}
function resort() {
var child = _this.children();
$.each(child, function(i) {
$(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
});
}
}
});

index-1.1.html

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>输入框组——改进版</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="input-group-add">
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="inputGroup-1.1.js"></script>
<script>
$(function() {
$('.input-group-add').initInputGroup({
'widget' : 'input', //输入框组中间的空间类型
/*'add' : '添加',
'del' : '删除'*/
'field': 'data',
'data' : ['haha', 'hello', 'hi', 'dj']
});
});
</script>
</body>
</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的添加与删除-改进版

猜你喜欢