首页 > 其他分享 >Bootstrap框架----弹出层录入

Bootstrap框架----弹出层录入

时间:2023-08-08 11:33:58浏览次数:43  
标签:return String Bootstrap ---- var 录入 obj public name


我们经常需要在不跳转页面的情况下新增录入的交互。

本章记录弹出层录入的交互方式。

效果如图:

Bootstrap框架----弹出层录入_基础函数

我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录 check选择。
应用bootstrap模板

基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架

我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改,实现 check选择,传给后台保存成List用法。

完整的jsp代码

<%@ include file="./include/header.jsp"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>  
<div id="page-wrapper">  
            <div id="page-inner">  
                <div class="row">  
                    <div class="col-md-12">  
                        <h1 class="page-header">  
            弹出层<small>录入</small>  
                        </h1>  
                    </div>  
                </div>  
                <!-- /. ROW  -->  
        <div class="row">
        <div class="col-md-12">
        <button id="addDoc" type="button" class="btn btn-success pull-left">新增</button>
        </div>
          <div class="col-md-12" style="margin-top: 20px">
         <label>页面内容</label>
          </div>



        </div>
        <!-- /. ROW  -->   
            </div>  
            <!-- /. PAGE INNER  -->  


                <%--modal--%>
    <div class="modal fade" id="modal_form" tabindex="-1" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <form class="form-horizontal">
                <div class="modal-content">
                    <input type="hidden" name="id"/>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">添加联系人</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title" class="col-sm-3 control-label">名字</label>
                            <div class="col-sm-6 input-group" style="padding-left: 0;">
                                <label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           style="width: 350px;"/>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-3 control-label">电话</label>
                            <div class="col-sm-6 input-group" style="padding-left: 0;">
                                <label>
                                    <input type="text" class="form-control" id="tel" name="tel"
                                           style="width: 350px;"/>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="author" class="col-sm-3 control-label">地址</label>
                            <div class="col-sm-6 input-group" style="padding-left: 0;">
                                <label>
                                    <input type="text" class="form-control" id="address" name="address"
                                           style="width: 350px;"/>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cnName" class="col-sm-3 control-label">性别</label>
                            <div class="col-sm-6 input-group" style="padding-left: 0;">
                               <select class="form-control" name="gender">
                    <option value="0" >女</option>
                    <option value="1" >男</option>
                         </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="saveDoc" data-loading-text="Saving...">保存
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>



</div>  
        <!-- /. PAGE WRAPPER  -->  
 <%@ include file="./include/footer.jsp"%>
<script type="text/javascript">
//基础函数开始
/**
 * 基础封装函数
 */
var _fnObjectGetPropertyChainValue = function(obj, propertyChain) {
  /* 获取属性链的值 */
  if (!obj) return;
  if (!propertyChain) return obj;
  var property,
    chains = propertyChain.split('.'),
    i = 0,
    len = chains.length;
  for (;
    (property = chains[i]) && i < len - 1; i++) {
    if (!obj[property]) return;
    obj = obj[property];
  }
  return obj[property];
},
_fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) {
  /* 设置属性链的值 */
  if (!obj || !propertyChain) return;
  var property,
    chainObj = obj,
    chains = propertyChain.split('.'),
    i = 0,
    len = chains.length;
  for (;
    (property = chains[i]) && i < len - 1; i++) {
    if (!chainObj[property]) {
      chainObj[property] = {};
    }
    chainObj = chainObj[property];
  }
  // 改进版:checkbox的多选可以组合为数组
  if (!allowMulti || chainObj[property] === undefined) {
    chainObj[property] = value;
  } else {
    var pv = chainObj[property];
    if ($.isArray(pv)) {
      pv.push(value);
    } else {
      chainObj[property] = [pv, value];
    }
  }
  return obj;
};
/**
 * 格式化字符串 第一个参数为格式化模板 format('this is a {0} template!', 'format');
 * format('this is a {0.message} template!', { message: 'format'}); 等同于
 * format('this is a {message} template!', { message: 'format' });
 */
$.format = function() {
var template = arguments[0],
  templateArgs = arguments,
  stringify = function(obj) {
    if (obj == null) {
      return '';
    } else if (typeof obj === 'function') {
      return obj();
    } else if (typeof obj !== 'string') {
      return JSON.stringify ? JSON.stringify(obj) : obj;
    }
    return obj;
  };
return template.replace(/\{\w+(\.\w+)*\}/g, function(match) {
  var propChains = match.slice(1, -1).split('.');
  var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
  var arg, prop;
  if (index + 1 < templateArgs.length) {
    arg = templateArgs[index + 1];
    while (prop = propChains.shift()) {
      arg = arg[prop] == null ? '' : arg[prop];
    }
    return stringify(arg);
  }
  return match;
});
};
/**
 * jQuery form 扩展获取数据
 */
$.fn.formGet = function(opts) {
  opts = $.extend({}, opts);
  var data = {},
    els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
  if (!els || !els.length) {
    return data;
  }
  var fnSetValue = (function(emptyToNull) {
    return emptyToNull ? function(obj, propertyChain, value, allowMulti) {
      value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)
    } : _fnObjectSetPropertyChainValue
  })(opts.emptyToNull);
  els.each(function() {
    var $this = $(this),
      type = $this.attr('type'),
      name = $this.attr('name'), // 可能为属性链
      tag = this.tagName.toLowerCase();
    if (tag == 'input') {
      if (type == 'checkbox') {
        var v = $(this).val();
        if (v == 'on' || !v) {
          fnSetValue(data, name, $(this).prop('checked'));
        } else {
          $(this).prop('checked') && fnSetValue(data, name, v, true);
        }
      } else if (type == 'radio') {
        this.checked && fnSetValue(data, name, $this.val());
      } else {
        fnSetValue(data, name, $.trim($this.val()));
      }
    } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
      fnSetValue(data, name, $this.val());
    } else {
      fnSetValue(data, name, $.trim($this.text()));
    }
  });
  return data;
};
/**
 * jQuery form 扩展绑定数据
 * 
 */
$.fn.formSet = function(data, formGroup) {
var els = formGroup ? this.find('[form-group="' + formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {
  return this;
}
els.each(function() {
  var $this = $(this),
    type = $this.attr('type'),
    name = $this.attr('name'),
    tag = this.tagName.toLowerCase();
  var value = _fnObjectGetPropertyChainValue(data, name);
  if (tag == 'input') {
    if (type == 'checkbox') {
      var v = $(this).val();
      if (v == 'on' || !v) {
        this.checked = value ? 'checked' : '';
      } else {
        this.checked = $.isArray(value) && value.indexOf(v) > -1 ? 'checked' : ''
      }
    } else if (type == 'radio') {
      this.checked = $this.val() == String(value) ? 'checked' : '';
    } else {
      $this.val(value);
    }
  } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
    $this.val(value);
  } else {
    $this.html(value);
  }
});
return this;
};
//基础函数结束


  $(function(){
      $('#addDoc').click(function () {
            $('#modal_form').modal('show');
        });

        $('#saveDoc').click(function () {
            $(this).button('loading');
            var data = $('#modal_form').formGet();
            $.ajax({
                type: "POST",
                url: "/channel/save",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (result) {
                  console.log(result);
                  if (!result.code) {
                    location.href = '/'
                  }else{
                    alert(result.msg);
                  }
                },
                error: function (result) {
                  alert("出错了,请稍后重试");
                }
              });
        });
    });
</script>
</body>  
</html>

完整的java代码
Channel实体

package com.test.domain.entity;

import java.util.Date;
import java.util.List;

public class Channel {
    private String id;
    private String name;// 名字
    private int category;// 类别
    private String affiliation;// 归属
    private String address;// 地址
    private List<Contacts> otherContacts;// 其他联系人
    private String remarks;// 备注
    private int status;// 状态
    private Date createTime;// 新增时间

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getCategory() {
        return category;
    }

    public void setCategory(int category) {
        this.category = category;
    }

    public String getAffiliation() {
        return affiliation;
    }

    public void setAffiliation(String affiliation) {
        this.affiliation = affiliation;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public List<Contacts> getOtherContacts() {
        return otherContacts;
    }

    public void setOtherContacts(List<Contacts> otherContacts) {
        this.otherContacts = otherContacts;
    }

    public String getRemarks() {
        return remarks;
    }

    public void setRemarks(String remarks) {
        this.remarks = remarks;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

}

Contacts实体

package com.test.domain.entity;


public class Contacts {
    private String relatedId;
    private String name;// 姓名
    private String tel;// 电话
    private String address;// 地址
    private int gender;// 性别




    public String getRelatedId() {
        return relatedId;
    }
    public void setRelatedId(String relatedId) {
        this.relatedId = relatedId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public int getGender() {
        return gender;
    }
    public void setGender(int gender) {
        this.gender = gender;
    }


}

IndexController实体

package com.test.web.controller;

import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.test.domain.entity.Contacts;
import com.test.web.message.response.JSONResult;

/**
 * IndexController
 * 
 * 
 */
@Controller
public class IndexController {

    @Autowired
    MongoTemplate mongoTemplate;

    DateFormat fmt =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");



    @RequestMapping("/")
    public String index(Model model) throws IOException {
        return "/index";
    }


    @RequestMapping("/channel/save")
    @ResponseBody
    public JSONResult saveChannel(@RequestBody Contacts contacts) {
        int result=upsertChannel(contacts);
        return  result>0?JSONResult.success(contacts): JSONResult.error("手机号已存在,保存失败");
    }

    private int upsertChannel(Contacts contacts) {
        System.out.println(contacts.getName());
        return 1;
    }
}

传输效果如图:

Bootstrap框架----弹出层录入_基础函数_02


标签:return,String,Bootstrap,----,var,录入,obj,public,name
From: https://blog.51cto.com/u_16218512/7006313

相关文章

  • 题解 [国家集训队] 稳定婚姻
    题目链接首先我们考虑用图论的边描述这个关系。若两者存在夫妻或情侣关系,就连一条边(是有向边还是无向边呢?)。先来考虑两对夫妻的情况,若夫妻边与情侣边交替出现。且一对夫妻在同一个环内,则可以说明分开后能够重新找到另一半。如下图:夫妻a-男b-女c-男d-女情侣a-男d-女c-......
  • 遇到问题---hadoop--Remote App Log Directory does not have same value for the 4 N
    情况因为我们的某台服务器空间不足,暂时清理不出来,所以需要修改一些存放数据的日志目录等。修改完毕之后发现报错错误的配置RemoteAppLogDirectorydoesnothavesamevalueforthe4NodeManagers。原因一般来说不同的主机不要求配置的目录一致,但是yarn.nodemanager.remote......
  • 单片机 | 51单片机原理
    文章目录一、引脚分布介绍1.分类2.电源引脚3.时钟引脚(2根)4.控制引脚(4根)5.端口引脚(32根)二、存储器结构及空间分布介绍1.存储器的划分方法2.程序存储器(ROM)3.数据存储器(RAM)三、复位、时钟与时序1.复位与复位电路2.时钟电路3.单片机时序四、并行I/......
  • 遇到问题--hadoop---节点服务重启成功一段时间后又停止
    情况我们发现CDH中一个hbase的regionServer节点经常自动停止,没有明显的错误信息。重启后又过一小段时间又自动停止原因这种情况一般都是需要排查相关服务的日志的,比如我们是regionServer节点的服务,则需要先看regionServer节点的日志。很幸运的是原因很快就找到了。一进入日志界面......
  • Git上传本地项目文件到远程仓库
    为了标识身份,建议先完成Git全局设置gitconfig--globaluser.name"xxxxxx"gitconfig--globaluser.email"[email protected]"方式一:克隆仓库gitclonehttps://xxx.xxxxx.com/xxxxxx/xxx.gitcdxxxtouchREADME.mdgitaddREADME.mdgitcommit-m"addRE......
  • hadoop进阶---hadoop性能优化(一)---hdfs空间不足的管理优化
    Hadoop空间不足,hive首先就会没法跑了,进度始终是0%。将HDFS备份数降低将默认的备份数3设置为2。步骤:CDH–>HDFS–>配置–>搜索dfs.replication–>设置为2删除无用HDFS数据和Hbase表格主要使用命令hadoopfs-du,hadoopfs-ls,hadoopfs-rm空间不足根本的解决办法自然是清理空......
  • CentOS 查询端口占用情况
    使用netstat命令:netstat-tuln|grep<端口号>将<端口号>替换为你要查询的端口号。例如,如果你要查询端口80的占用情况,可以输入:netstat-tuln|grep80上述命令将列出所有占用端口80的进程和其PID。使用lsof命令:lsof-i:<端口号>将<端口号>替换为你要查询的端......
  • 遇到问题---hadoop----local-dirs are bad
    遇到的问题我们的hadoop集群在运作过程中部分节点报错local-dirsarebad原因hadoop集群硬盘目录默认的使用阈值是90%空间不足,目录使用率超过阈值了90%了解决方式调整yarn的参数yarn.nodemanager.disk-health-checker.max-disk-utilization-per-disk-percentage把比例调高到9......
  • hadoop案例(一)--hive--2T数据动态创建分区
    我们在使用hadoop集群过程中,发现网上很少有具体的数据使用分析案例,也就是说我们不知道多少个节点处理多少大小的数据量耗费多少时间是合理的哪些是需要优化的。为了增加这方面的相关经验,我们会记录一下实际的使用案例。以供大家参考。配置如图:耗费时间如图:执行语句sethive.exe......
  • 遇到的情况---hadoop集群-- NodeManager启动不起来--java.io.FileNotFoundException
    情况hadoop集群nodemanager启动不起来,查看输出的日志报错java.io.FileNotFoundException:/hadoop/dfs1/log/hadoop-yarn/hadoop-cmf-yarn-NODEMANAGER-host251.log.out(Read-onlyfilesystem)管理后台点击查看NodeManager的日志文件,角色日志文件时报错访问不到。原因目录损......