弹出框动态增加input输入框

/ ARC / 没有评论 / 460浏览
欢迎关注微信公众号:程序员小圈圈
原文首发于:www.zhangruibin.com
本文出自于:RebornChang的博客
转载请标明出处^_^

弹出框动态增加input输入框

最近项目上有这么一个需求,一条订单,我想动态的输入外部订单号,支持输入多个外部订单号,当外部订单号为空的时候,可以新增外部订单号。当输入过外部订单号的时候,可以对外部订单号进行修改,也就是旧有外部订单号要回显。 那我们先来看一下效果吧:

这样就涉及到一点前台知识了:弹出层动态增加input输入框

首先说下前台涉及的技术: 1.jQuery 2.bootstrap 3.layui jQuery帮我们简化代码,bootstrap提供一点基本的样式,layui我们使用layer做弹出层以及layui的弹出层样式。

那么确定好前台界面使用的技术之后,我们开始编写这么一个弹出层。

页面声明DIV

在引入了jQuery,bootstrap,layui的前提下,首先需要在页面生成一个div然后我们使用js方法对其内容进行动态的拼接展示:

<div id="index-div" class="site-text" style="margin: 5%; display: none">
</div>

点击增加外部订单号的时候触发事件

function addOrderExternalNum(e) {
    var html = "";
    html += '<div class="form-group">';
    html += '<div class="col-sm-9 col-md-9 col-xs-9">';
    html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码"/>';
    html += '</div>';
    html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
    html += '<a href="javascript:;" class="addInputReturn" >';
    html += '<span class="glyphicon glyphicon-plus"></span>';
    html += '</a>';
    html += '</div>';
    html += '</div>';

    $("#index-div").append(html)
    //orderId,orderNum,是按钮点击事件获取到的自定义参数
    var orderId = $(e).attr("orderId");
    var orderNum = $(e).attr("orderNum");
    //使用layer.open打开一个弹出层
    layer.open({
        type: 1 //Page层类型
  ,skin: 'layui-layer-molv'
  ,area: ['30%', '380px']
        ,title: ['添加外部订单编码','font-size:18px']
        ,btn: ['确定', '关闭']
        ,shadeClose: true
  ,shade: 0 //遮罩透明度
  ,maxmin: false //允许全屏最小化
  ,content:$("#index-div")
        ,success:  function(){
            $('#bid').val("bid");
            $('#bname').val("bname");
            $('#price').val("price");
        }
        ,yes:function(index, layero){
            //alert("点击了确定")
 //点击确定按钮,获取填写的值,然后校验,无误后做后台插入  var externalOrderNum='' //定义json对象
  var $inputArr = $('.externalOrderNum');//获取class为resAccount的input对象
  var count = 0;
            var flag = false;
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
            var temp = '';
            $inputArr.each(function(){
                //校验没一个订单编码是否长度大于32位
  if ($(this).val().length > 32){
                    layer.alert('外部订单编码长度应小于32位');
                    flag = false;
                    return false;
                    if ($(this).val().match(/^\s+$/) || $(this).val() ===''){
                        flag = false;
                        layer.alert('外部订单编码填写不能为空');
                        return false;
                    }
                }else {
                    if ($(this).val().match(/^\s+$/)  || $(this).val() ==''){
                        flag = false;
                        layer.alert('外部订单编码填写不能为空');
                        return false;
                    }else {
                        //去掉两端空格
  temp = $(this).val().replace(/(^\s*)|(\s*$)/g, "");
                        externalOrderNum += temp + ";";
                        flag = true;
                    }
                }
                count++;
            })
            if (count > 16){
                layer.alert('外部订单编码数量应小于16个');
                flag = false;
                return;
            }else {
                if (flag == true){
                        //去掉字符串末尾的分号
  var lastIndex = externalOrderNum.lastIndexOf(";");
                    if (lastIndex > -1) {
                        externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);
                        //alert("入库的时候外部订单编码为:"+externalOrderNum);
  }
                    //确认添加的外部订单编码信息无误后,调用ajax方法入库
  insertExternalOrderNum(orderId,orderNum,externalOrderNum);
                }
            }

        },btn2: function(index, layero){
            //按钮【按钮三】的回调
  var html = "";
            $("#index-div").empty();
        }
        ,cancel: function(){
            //右上角关闭回调
  var html = "";
            $("#index-div").empty();
        }
    });

};

重头戏来了,也就是点击input输入框后面的+号或者-号绑定的事件:

/**
 * 动态添加事件 */ $("body").on('click','.addInputReturn',function () {

    //添加减号
  var $content = "";
    $content += '<a href="javascript:;" class="delInput" >';
    $content += '<span class="glyphicon glyphicon-minus"></span>';
    $content += '</a>';
    $(this).parent().append($content);

    //去除加号
  this.remove();

    var html = "";
    html += '<div class="form-group">';
    html += '<div class="col-sm-9 col-md-9 col-xs-9">';
    html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码"/>';
    html += '</div>';
    html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
    html += '<a href="javascript:;" class="addInputReturn" >';
    html += '<span class="glyphicon glyphicon-plus"></span>';
    html += '</a>';
    html += '</div>';
    html += '</div>';

    $("#index-div").append(html)
});
/**
 * 删除事件 */ $("body").on('click','.delInput',function () {
    //获取当前点击的元素的父级的父级进行删除
  $(this).parent().parent().remove();
})

以上就是点击添加按钮的操作,下面的是点击修改按钮的操作,修改比添加稍微麻烦一点,那就是原数据的回显,以及对每回显一条数据,数据后面的+号或者-号的判断。

点击修改外部订单号的时候触发事件

function updateOrderExternalNum(e) {
    var orderId = $(e).attr("orderId");
    var orderNum = $(e).attr("orderNum");
    var externalNum = $(e).attr("externalNum");
    //声明计数器,
  var selCount = 0;
    var strs = new Array(); //定义一数组
  var html = "";
    //判断是否包含分号,不包含的话,就是一个外部订单编码
  if (externalNum.indexOf(";") != -1){
        strs = externalNum.split(";"); //字符分割
  for (i=0; i<strs.length; i++ ){
            //document.write(strs[i]+"<br/>"); //分割后的字符输出
 //根据分割的字符串,动态拼接输入框并回显 //循环遍历填充  if (selCount == strs.length-1){
                html += '<div class="form-group">';
                html += '<div class="col-sm-9 col-md-9 col-xs-9">';
                html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码" value="'+strs[i]+'"/>';
                html += '</div>';
                html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
                html += '<a href="javascript:;" class="addInputReturn" >';
                html += '<span class="glyphicon glyphicon-plus"></span>';
                html += '</a>';
                html += '</div>';
                html += '</div>';
            }else {
                html += '<div class="form-group">';
                html += '<div class="col-sm-9 col-md-9 col-xs-9">';
                html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码" value="'+strs[i]+'"/>';
                html += '</div>';
                html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
                html += '<a href="javascript:;" class="delInput" >';
                html += '<span class="glyphicon glyphicon-minus"></span>';
                html += '</a>';
                html += '</div>';
                html += '</div>';
            }
            selCount++;
        }
    }else {
        html += '<div class="form-group">';
        html += '<div class="col-sm-9 col-md-9 col-xs-9">';
        html += '<input type="text" name="externalOrderNum" class="form-control input-sm externalOrderNum" placeholder="请填外部订单编码" value="'+externalNum+'"/>';
        html += '</div>';
        html += '<div class="col-sm-1 col-md-1 col-xs-1 my-icon">';
        html += '<a href="javascript:;" class="addInputReturn" >';
        html += '<span class="glyphicon glyphicon-plus"></span>';
        html += '</a>';
        html += '</div>';
        html += '</div>';
    }

    $("#index-div").append(html)

    layer.open({
        type: 1 //Page层类型
  ,skin: 'layui-layer-molv'
  ,area: ['30%', '380px']
        ,title: ['修改外部订单编码','font-size:18px']
        ,btn: ['确定', '关闭']
        ,shadeClose: true
  ,shade: 0 //遮罩透明度
  ,maxmin: false //允许全屏最小化
  ,content:$("#index-div")
        ,success:  function(){
            $('#bid').val("bid");
            $('#bname').val("bname");
            $('#price').val("price");
        }
        ,yes:function(index, layero){
            //alert("点击了确定")
 //点击确定按钮,获取填写的值,然后校验,无误后做后台插入  var externalOrderNum='' //定义json对象
  var $inputArr = $('.externalOrderNum');//获取class为resAccount的input对象
  var count = 0;
            var flag = false;
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
            var temp = '';
            $inputArr.each(function(){
                //校验没一个订单编码是否长度大于32位
  if ($(this).val().length > 32){
                    layer.alert('外部订单编码长度应小于32位');
                    flag = false;
                    return false;
                    if ($(this).val().match(/^\s+$/) || $(this).val() ==''){
                        flag = false;
                        layer.alert('外部订单编码填写不能为空');
                        return false;
                    }
                }else {
                    if ($(this).val().match(/^\s+$/) || $(this).val() ==''){
                        flag = false;
                        layer.alert('外部订单编码填写不能为空');
                        return false;
                    }else {
                        //去掉两端空格
  temp = trim($(this).val());
                        externalOrderNum += temp + ";";
                        flag = true;
                    }
                }
                count++;
            })
            if (count > 16){
                layer.alert('外部订单编码数量应小于16个');
                flag = false;
                return;
            }else {
                if (flag == true){
                    //去掉字符串末尾的分号
  var lastIndex = externalOrderNum.lastIndexOf(";");
                    if (lastIndex > -1) {
                        externalOrderNum = externalOrderNum.substring(0, lastIndex) + externalOrderNum.substring(lastIndex + 1, externalOrderNum.length);
                        //alert("入库的时候外部订单编码为:"+externalOrderNum);
  }
                    //确认添加的外部订单编码信息无误后,调用ajax方法入库
  updateExternalOrderNum(orderId,orderNum,externalOrderNum);
                }
            }

        },btn2: function(index, layero){
            //按钮【按钮三】的回调
  var html = "";
            $("#index-div").empty();
        }
        ,cancel: function(){
            //右上角关闭回调
  var html = "";
            $("#index-div").empty();
        }
    });

};

其实核心代码没有多少,上面那么多代码主要是笔者业务逻辑判断....

以上就是弹出框动态增加input输入框的前端页面相关内容了,希望对看到的 你有所帮助。