您的位置：首页 > Web前端 > BootStrap

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

2016-06-04 20:18 686 查看

       上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。
        但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？
针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）
       修改如下：
inputGroup-1.1.js

/**
* 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);

//添加序号为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

<!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">

<!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
<!--[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 不为空数组时，初始化界面后如下：（设置要的数组将放入输入框组中）

同样能正常使用 “添加”和“输出”功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap jquery input-group

相关文章推荐

新的分享

章节导航