手把手教你springboot整合bootstrap实现自定义条件查询和模态框编辑
目录
本篇文章我们对上一篇文章的项目进行升级和优化，主要包括实现表格条件查询、自定义按钮、自定义模态框显示与编辑。
目标
- 学会接收和自定义前端参数
- 自定义添加菜单
- 刷新页面
- 清空页面
- 模态框的使用
实现条件查询
参数：toolbar
要实现自定义查询，那么下拉框是必不可少的，我们在bootstrap官网的css样式中可以复制一个下拉框进去，同时也可以复制自己一些喜欢的按钮进去。（这里我只展示body里的内容，详细看前一篇哦）
<div> <div> <button id="edit" type="button" class="btn btn-primary">编辑</button> <button type="button" class="btn btn-primary">新增</button> <button type="button" class="btn btn-primary">删除</button> </div> <table id="table"></table></div>我们刷新页面
我们发现自己加进去的按钮居然是在上面的，通过页面分析我们看到按钮的div不包含在bootstrap-table帮我们自动生成的工具栏 fixed-table-toolbar 这个div下面，那么怎么解决这个问题呢？让自定义的控件可以加入工具栏这一条？我们可以用 toolbar 实现，通过设置对应id完成这个内容加入工具条(这个完整的界面只显示三次，1/3)
<!doctype html><head> <base href=""/> <meta charset="utf-8"/> <title>Insert title here</title> <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.css"> <script src="/static/js/jquery.js"></script> <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script> <script src="/static/bootstrap-table-master/dist/bootstrap-table.js"></script> <script src="static/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script> <script> $(function () { $("#table").bootstrapTable({ method:'post', url:'findAll', // {"id":7,"userid":"小张","pwd":"e10adc3949ba59abbe56e057f20f883e","accounttype":2}] columns:[ { title:'ID', field:'id' }, { title:'账号', field:'userid' }, { title:'密码', field:'pwd' }, { title:'类型', field:'accounttype' } ], //----------------样式设置-------------------- search:true, //搜索栏(界面的查询) showSearchButton:true, //查询按钮 showFullscreen:true, //全屏显示 showRefresh:true, //刷新按钮 showColumns:true, //显示列的搜索 showColumnsToggleAll:true, //显示所有列 height:300, //设置底线距离表格高度 //---------------- 分页----------------------- pagination:true, pageList:[2,4,6,8,10], //显示条数选择 pageSize:2, //当前显示条数 sidePagination:'server',//设置服务端分页 queryParamsType:'',//设置传回参数 contentType:'application/x-www-form-urlencoded',//格式化 //-----------------设置查询条件----------------------- toolbar:'#toolbar', })}); </script></head><body><div> <div id="toolbar"> <div> <button id="edit" type="button" class="btn btn-primary">编辑</button> <button type="button" class="btn btn-primary">新增</button> <button type="button" class="btn btn-primary">删除</button> </div> </div> <table id="table"></table>//这里要注意，不要把这一栏加入，因为本身就是工具组</div></body></html>我们再次刷新网页，发现添加成功！
同样的我们拷贝一个下拉框，微调一下样式，改改id和value（可以去官网复制哈）
<div id="toolbar"> <div style="float:left"> <button id="edit" type="button" class="btn btn-primary">编辑</button> <button type="button" class="btn btn-primary">新增</button> <button type="button" class="btn btn-primary">删除</button> </div> <div style="float: left;margin-left: 5px;margin-right: 5px;"> <div class="form-group;"><label class="sr-only" for="query">查询条件</label><div class="input-group"> <div class="input-group-addon">查询条件</div> <select class="form-control" id="query" style="width: 80px"> <option value="id">ID</option> <option value="userid">账号</option> <option value="pwd">密码</option> <option value="accounttype">类型</option> </select></div> </div> </div>实现效果如下
方法：queryParams
但是问题又来了，如图，我们该怎么接收下拉框的值？表单数据还是只有三个
参数：params
那么咱们就用 queryParams方法 定义一个，params用于返回表单全部数据它是一个方法(防止看不懂，我前面写了一部分)
//-----------------设置查询条件----------------------- toolbar: '#toolbar', //自定义添加菜单 / * 该方法用于接收和自定义前端参数 * @param params 一个Object对象，里面有前端传来的属性 */ queryParams: function (params) { //设置自定义参数 //alert(JSON.stringify(params));//测试传来的params是什么？ 是一个前端表单的参数对象 return { pageSize: params.pageSize, pageNumber: params.pageNumber, val: params.searchText, query: $('#query').val() //获取查询的值，自定义 }; }又是极度舒适的画面，前端的请求参数多了一个自定义的 query
接下来我们要做的是将请求发送到后端接收，咱们可以定义一个PageUtil类用于接收，前端传来的四个值。
package com.example.bootstrap00.pojo;public class PageUtil { private Integer pageNumber; private Integer pageSize; private String query; private String val; public Integer getPageNumber() { return pageNumber; } public void setPageNumber(Integer pageNumber) { this.pageNumber = pageNumber; } public Integer getPageSize() { return pageSize; } public void setPageSize(Integer pageSize) { this.pageSize = pageSize; } public String getQuery() { return query; } public void setQuery(String query) { this.query = query; } public String getVal() { return val; } public void setVal(String val) { this.val = val; } public PageUtil(Integer pageNumber, Integer pageSize, String query, String val) { this.pageNumber = pageNumber; this.pageSize = pageSize; this.query = query; this.val = val; } @Override public String toString() { return "PageUtil{" + "pageNumber=" + pageNumber + ", pageSize=" + pageSize + ", query='" + query + '\'' + ", val='" + val + '\'' + '}'; }}然后我们先微微修改一下接口，实现类和控制类
控制类
package com.example.bootstrap00.controller;import com.example.bootstrap00.pojo.PageUtil;import com.example.bootstrap00.pojo.Pages;import com.example.bootstrap00.pojo.User;import com.example.bootstrap00.service.UserService;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;@Controllerpublic class UserController { @Resource private UserService userService; @RequestMapping("/") public String index(){ return "login.jsp"; } @ResponseBody @RequestMapping("findAll") public Pages<User> findAll(PageUtil pageUtil){ //测试有没有传过来 //System.out.println(pageNumber+"----"+pageSize); return userService.findAll(pageUtil); }}接口
package com.example.bootstrap00.service;import com.example.bootstrap00.pojo.PageUtil;import com.example.bootstrap00.pojo.Pages;import com.example.bootstrap00.pojo.User;public interface UserService { Pages<User> findAll(PageUtil pageUtil);}实现类
package com.example.bootstrap00.service.impl;import com.example.bootstrap00.dao.UserDao;import com.example.bootstrap00.pojo.PageUtil;import com.example.bootstrap00.pojo.Pages;import com.example.bootstrap00.pojo.User;import com.example.bootstrap00.service.UserService;import com.github.pagehelper.Page;import com.github.pagehelper.PageHelper;import com.github.pagehelper.PageInfo;import org.apache.ibatis.annotations.Select;import org.springframework.stereotype.Service;import javax.annotation.Resource;import java.util.List;@Servicepublic class UserServiceImpl implements UserService { @Resource private UserDao userDao; @Override public Pages<User> findAll(PageUtil pageUtil) { PageHelper.startPage(pageUtil.getPageNumber(),pageUtil.getPageSize()); List<User> all = userDao.findAll(); PageInfo<User> pageInfo =new PageInfo<>(all); Pages<User> pages=new Pages(); pages.setTotal((int) pageInfo.getTotal()); pages.setRows(all); return pages; }}这样子就解决了爆红问题，接下来我们就要运用传过来的条件来更改sql语句了，因此我们先定义一个sql类
package com.example.bootstrap00.sql;import com.example.bootstrap00.pojo.PageUtil;public class UserSql { public String getUser(PageUtil pageUtil) { String sql = "select * from user "; //若果为空就查询全部 if (!(pageUtil.getVal() == null || pageUtil.getVal() == "" || "".equals(pageUtil.getVal()))) { //否则就是添加条件限制 sql += "where " + "#{query}" + "=#{val}"; } return sql; }}然后在dao里面更改映射到上面sql这个类，接收里面的sql语句来执行
package com.sunjiahui.page.bootstrap01.dao;import com.sunjiahui.page.bootstrap01.pojo.PageUtil;import com.sunjiahui.page.bootstrap01.pojo.User;import com.sunjiahui.page.bootstrap01.sql.StudentSql;import org.apache.ibatis.annotations.SelectProvider;import java.util.List;public interface UserDao { @SelectProvider(type = StudentSql.class, method = "getStu") List<User> findAll(PageUtil pageUtil);}很快乐，又是极度舒适的画面,到这里我们的条件查询功能就完成了
实现自定义控件
有的人说这个提供的用起来不爽，或者说排版很麻烦，那么我们来自定义一个搜索、刷新、清空功能，首先我们要干啥？肯定把小工具的搜索框，还有对应按钮复制到外面，然后删除对应属性对吧！其实在实现条件查询里添加下拉框的方式是一样的。
咱们就是要复制这一块到外面自己定义的div上，这里有个疏忽的地方，清空的属性是showSearchClearButton: true，刚刚忘记写了，自己补上复制哈，格式自己调一下（整个页面在展示一下，2/3,)
<!doctype html><head> <base href=""/> <meta charset="utf-8"/> <title>Insert title here</title> <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.css"> <script src="/static/js/jquery.js"></script> <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script> <script src="/static/bootstrap-table-master/dist/bootstrap-table.js"></script> <script src="static/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script> <script> $(function () { $("#table").bootstrapTable({ method: 'post', url: 'findAll', // {"id":7,"userid":"小张","pwd":"e10adc3949ba59abbe56e057f20f883e","accounttype":2}] columns: [ { title: 'ID', field: 'id' }, { title: '账号', field: 'userid' }, { title: '密码', field: 'pwd' }, { title: '类型', field: 'accounttype' } ], //----------------样式设置-------------------- //search:true, //搜索栏(界面的查询) //showSearchButton:true, //查询按钮 //showSearchClearButton: true, //清空按钮 showRefresh: true, //刷新按钮 showFullscreen: true, //全屏显示 showColumns: true, //显示列的搜索 showColumnsToggleAll: true, //显示所有列 height: 300, //设置底线距离表格高度 //---------------- 分页----------------------- pagination: true, pageList: [2, 4, 6, 8, 10], //显示条数选择 pageSize: 2, //当前显示条数 sidePagination: 'server',//设置服务端分页 queryParamsType: '',//设置传回参数 contentType: 'application/x-www-form-urlencoded',//格式化 //-----------------设置查询条件----------------------- toolbar: '#toolbar', //自定义添加菜单 / * 该方法用于接收和自定义前端参数 * @param params 一个Object对象，里面有前端传来的属性 */ queryParams: function (params) { //设置自定义参数 //alert(JSON.stringify(params));//测试传来的params是什么？ 是一个前端表单的参数对象 return { pageSize: params.pageSize, pageNumber: params.pageNumber, //val: params.searchText, query: $('#query').val() //获取查询的值，自定义 }; } }) }); </script></head><body><div> <div id="toolbar"> <div style="float:left"> <button id="edit" type="button" class="btn btn-primary">编辑</button> <button type="button" class="btn btn-primary">新增</button> <button type="button" class="btn btn-primary">删除</button> </div> <div style="float: left;margin-left: 5px;margin-right: 5px;"> <div class="form-group;"> <label class="sr-only" for="query">查询条件</label> <div class="input-group"> <div class="input-group-addon">查询条件</div> <select class="form-control" id="query" style="width: 80px"> <option value="id">ID</option> <option value="userid">账号</option> <option value="pwd">密码</option> <option value="accounttype">类型</option> </select> </div> </div> </div> <div class="input-group"> <input id="val" class="form-control search-input" type="search" placeholder="搜索" autocomplete="off"> <span class="input-group-btn"> <button id="search" class="btn btn-default" type="button" name="search" title="搜索"><i class="glyphicon glyphicon-search"></i></button> <button id="clear" class="btn btn-default" type="button" name="clearSearch" title="清空过滤"><i class="glyphicon glyphicon-trash"></i></button> </span> </div> </div></div><table id="table"></table></div></body></html>
调整完后我发现参数少了一个，如何查询不起作用了，清空按钮也不起作用了，不要慌，问题一个个解决。先分析为什么参数少了一个，少的就是查询的参数，所以不起作用了，那么原先的val: params.searchText就注销了，因为是bootstrap-table框架自带的，然后咱们自定义一个。
queryParams: function (params) { //设置自定义参数 //alert(JSON.stringify(params));//测试传来的params是什么 return { pageSize: params.pageSize, pageNumber: params.pageNumber, // val: params.searchText, val: $('#val').val(), //获取search的值，自定义 query: $('#query').val() //获取查询的值，自定义 }; }
添加完后咱们测试一下，很快乐，val 他就出现了！现在在思考一个问题查询是啥？就是将数据提交给后端然后刷新页面，难道我们要写ajax吗？并不需要，我们只要添加一个点击事件刷新即可。
方法：refresh
/ * 俺是查询方法 * */ $("#search").click(function () { $("#table").bootstrapTable('refresh') });同样的我们令val=“”，然后刷新也可以实现清空操作
/ * 俺是清空方法 */ $("#clear").click(function () { $("#val").val(''); //方式1 refresh(熟悉页面) $("#table").bootstrapTable('refresh') });方法：load
方法：getOptions
当你的业务比较麻烦的时候网盘，我们还可以使用load来进行清空，getOptions用户获取是bootstrapTable的全部信息，load将 msg（全部查出来的数据）替换 data里的数据
/ * 俺是清空方法 */ $("#clear").click(function () { //方式2 Load(原理：查出来然后用当前数据替换它) $("#val").val(''); let url = "findAll"; //alert(JSON.stringify($("#table").bootstrapTable('getOptions')))//测试里面内容是啥？全部的数据 let data = { pageSize: $("#table").bootstrapTable('getOptions').pageSize, pageNumber: $("#table").bootstrapTable('getOptions').pageNumber, val: $('#val').val(), query: $('#query').val() } $.post(url, data, function (msg) { //alert(JSON.stringify(msg)) 测试：查看清空后的所有数据 $("#table").bootstrapTable('load', msg) }) });这里的测试图我就不放了，因为要点好多次，懒得截图了，接下来我们来实现下自定义的模态框。
实现自定义模态框
老规矩，我们去bootstrap官网去嫖样式 https://v3.bootcss.com/javascript/，如何将喜欢的表单也复制进去，全部复制粘贴改改参数就行了哈，值得注意的是我们这个div要放在toolbar外面哦！
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">显示框</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"><label for="id" class="col-sm-2 control-label">ID</label><div class="col-sm-10"> <input class="form-control" id="id" type="text" placeholder="id"></div> </div> <div class="form-group"><label for="userid" class="col-sm-2 control-label">账号</label><div class="col-sm-10"> <input type="text" class="form-control" id="userid" placeholder="userid"></div> </div> <div class="form-group"><label for="pwd" class="col-sm-2 control-label">密码</label><div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Password"></div> </div> <div class="form-group"><label for="accounttype" class="col-sm-2 control-label">类型</label><div class="col-sm-10"> <input type="text" class="form-control" id="accounttype" placeholder="accounttype"></div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">保存</button> <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button> </div> </div> </div> </div>问题来了，怎么去使用？有两种方式，我们先将第一种，注意这两个参数，用法看官方文档哦，算了趴，我给你们截个图
参数：data-toggle
参数：data-target
我这里给我们的编辑按钮一个相应模态框
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">编辑</button>
极其舒适的画面对趴，接下来我用第二种方法，记得将第一种方法取消哦。
/ * 俺要添加模态框 * */ $("#edit").click(function () { var count = $("#table").bootstrapTable('getSelections'); $('#exampleModal').modal('show') })用模态框实现编辑功能
参数：checkbox
既然讲到这里了就说一说如何实现编辑功能吧，首先编辑的话我们需要复选框，一个列元素就能搞定（我稍微写全一点，怕大家不知道加在哪里）
columns: [ { //------------------添加列属性------------------------ checkbox: true }, { title: 'ID', field: 'id' }, { title: '账号', field: 'userid' }, { title: '密码', field: 'pwd' }, { title: '类型', field: 'accounttype' } ],方法：getSelections
接下来我们要判断，只能选择一条，如何将选中的数据在模态框里显示？getSelections能获取我们复选框中选中的元素，返回的是一个对象，我们可以看做一个数组，给模态框表单中的每个数据赋值。
/ * 俺要添加模态框 * */ $("#edit").click(function () { var count = $("#table").bootstrapTable('getSelections'); //alert(JSON.stringify(count));测试返回有什么数据 console.log(count) if (count.length != 1) { alert("只能选择一条数据进行编辑!") return; } /*坑：两种显示方式只能用一种，否则js代码不生效*/ let usr = count[0]; $('#id').val(usr.id); $('#userid').val(usr.usrid); $('#pwd').val(usr.pwd); $('#accounttype').val(usr.accounttype); $('#exampleModal').modal('show') }) });
多选的话就会提示
选择一条就是得到你的选择值，以此类推你可以去实现增加，删除等操作，后台功能代码想必大家都已经很熟悉了，只要将每个数据用ajax传到后端即可，那么现在bootstrap-table和bootstrap的项目实战案例就到此结束啦！大家可能不全后续的功能代码哦！[项目下载链接]
现在给大家展示完整的login.jsp代码（3/3）
<!doctype html><head> <base href=""/> <meta charset="utf-8"/> <title>Insert title here</title> <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.css"> <script src="/static/js/jquery.js"></script> <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script> <script src="/static/bootstrap-table-master/dist/bootstrap-table.js"></script> <script src="static/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script> <script> $(function () { $("#table").bootstrapTable({ method: 'post', url: 'findAll', // {"id":7,"userid":"小张","pwd":"e10adc3949ba59abbe56e057f20f883e","accounttype":2}] columns: [ { //------------------添加列属性------------------------ checkbox: true }, { title: 'ID', field: 'id' }, { title: '账号', field: 'userid' }, { title: '密码', field: 'pwd' }, { title: '类型', field: 'accounttype' } ], //----------------样式设置-------------------- //search:true, //搜索栏(界面的查询) //showSearchButton:true, //查询按钮 //showSearchClearButton: true, //清空按钮 showRefresh: true, //刷新按钮 showFullscreen: true, //全屏显示 showColumns: true, //显示列的搜索 showColumnsToggleAll: true, //显示所有列 height: 300, //设置底线距离表格高度 //---------------- 分页----------------------- pagination: true, pageList: [2, 4, 6, 8, 10], //显示条数选择 pageSize: 2, //当前显示条数 sidePagination: 'server',//设置服务端分页 queryParamsType: '',//设置传回参数 contentType: 'application/x-www-form-urlencoded',//格式化 //-----------------设置查询条件----------------------- toolbar: '#toolbar', //自定义添加菜单 / * 该方法用于接收和自定义前端参数 * @param params 一个Object对象，里面有前端传来的属性 */ queryParams: function (params) { //设置自定义参数 //alert(JSON.stringify(params));//测试传来的params是什么 return { pageSize: params.pageSize, pageNumber: params.pageNumber, // val: params.searchText, val: $('#val').val(), //获取search的值，自定义 query: $('#query').val() //获取查询的值，自定义 }; } }) / * 俺是查询方法 * */ $("#search").click(function () { $("#table").bootstrapTable('refresh') }); / * 俺是清空方法 */ $("#clear").click(function () { $("#val").val(''); //方式1 refresh(熟悉页面) //$("#table").bootstrapTable('refresh') //方式2 Load(原理：查出来然后用当前数据替换它) let url = "findAll"; //alert(JSON.stringify($("#table").bootstrapTable('getOptions')))//测试里面内容是啥（getOptions用于获取bootstrapTable的属性） let data = { pageSize: $("#table").bootstrapTable('getOptions').pageSize, pageNumber: $("#table").bootstrapTable('getOptions').pageNumber, val: $('#val').val(), query: $('#query').val() } $.post(url, data, function (msg) { //alert(JSON.stringify(msg)) 测试：查看清空后的所有数据 $("#table").bootstrapTable('load', msg) }) }); / * 俺要添加模态框 * */ $("#edit").click(function () { var count = $("#table").bootstrapTable('getSelections'); //alert(JSON.stringify(count));测试返回有什么数据 //console.log(count) if (count.length != 1) { alert("只能选择一条数据进行编辑!") return; } /*坑：两种显示方式只能用一种，否则js代码不生效*/ let usr = count[0]; $('#id').val(usr.id); $('#userid').val(usr.usrid); $('#pwd').val(usr.pwd); $('#accounttype').val(usr.accounttype); $('#exampleModal').modal('show') }) }); </script></head><body><div> <div id="toolbar"> <div style="float:left"><%-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">编辑</button>--%> <button id="edit" type="button" class="btn btn-primary">编辑</button> <button type="button" class="btn btn-primary">新增</button> <button type="button" class="btn btn-primary">删除</button> </div> <div style="float: left;margin-left: 5px;margin-right: 5px;"> <div class="form-group;"> <label class="sr-only" for="query">查询条件</label> <div class="input-group"> <div class="input-group-addon">查询条件</div> <select class="form-control" id="query" style="width: 80px"> <option value="id">ID</option> <option value="userid">账号</option> <option value="pwd">密码</option> <option value="accounttype">类型</option> </select> </div> </div> </div> <div class="input-group"> <input id="val" class="form-control search-input" type="search" placeholder="搜索" autocomplete="off"> <span class="input-group-btn"> <button id="search" class="btn btn-default" type="button" name="search" title="搜索"><i class="glyphicon glyphicon-search"></i></button> <button id="clear" class="btn btn-default" type="button" name="clearSearch" title="清空过滤"><i class="glyphicon glyphicon-trash"></i></button> </span> </div> </div></div><table id="table"></table><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <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" id="exampleModalLabel">显示框</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="id" class="col-sm-2 control-label">ID</label> <div class="col-sm-10"><input class="form-control" id="id" type="text" placeholder="id"> </div> </div> <div class="form-group"> <label for="userid" class="col-sm-2 control-label">账号</label> <div class="col-sm-10"><input type="text" class="form-control" id="userid" placeholder="userid"> </div> </div> <div class="form-group"> <label for="pwd" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"><input type="password" class="form-control" id="pwd" placeholder="Password"> </div> </div> <div class="form-group"> <label for="accounttype" class="col-sm-2 control-label">类型</label> <div class="col-sm-10"><input type="text" class="form-control" id="accounttype" placeholder="accounttype"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">保存</button> <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button> </div> </div> </div></div></div></body></html>
