模态窗的实现使用的插件是Bootstrap，动态列表则是用JavaScript拼接而成的，整个页面的展示效果，前端与后台的数据传输则用的是DataTable插件。这些插件提供了丰富的模板，可造就功能强大而又优美的页面，对于一般学习者，至少不用花费太多精力去管页面的那些样式。
1、概述
文字书写太模糊，也太苍白，直接上个图，就能了解各大概了。底表是查询所有信息的列表，右上角的“新增”按钮，每一条信息右侧的“详情”按钮，“修改”按钮，当我们点击它的时候，便弹出如图的模态窗，用于新增等功能实现。
当点击修改按钮的时候，图中所有信息是可以修改的，点击列表后面的加号则会新增一栏，点减号便会把该栏删除掉，点击确认后将列表数据传入后台。点击详情的时候，显示信息但不可修改。
至于模糊搜索，则是针对当前页面的，只需要加一段javaScript语句进行功能实现就OK了。
2、实现
<1>前端插件的使用
接下来便是在jsp页面中引用了，一般建议放置在页面的<head></head>里，随后便可以愉快的使用了，如果新增其他的样式，可能还需要导入Bootstrap的其他样式文件。
<script type="text/javascript" charset="utf8" src="dataTable/js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="dataTable/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="dataTable/css/dataTables.bootstrap.css">
<script type="text/javascript" charset="utf8" src="dataTable/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="dataTable/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<2>模态窗页面实现
模态窗在不触发事件的时候是默认不显现的，当触发某个事件，比如点击按钮，便可以在该事件处理函数中，增加如下代码，使其显现出来。
show_modify = function(modify_id){
$("#myModal_do").modal({
keyword:true
});
.......其他处理
}
模态窗的代码一般放置在页面的body中，注意事件绑定的id要一致。如你所见，该模态窗中只有人员信息，并没有动态列表，笔者是另开了一个id为model_tab_div的div，在js将其完成拼接，最后放置在该div下。
<!-- 模态框（Modal） 查询，修改 -->
<div class="modal" id="myModal_do" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 60%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel_do" align="center">详情</h4>
</div>
<div class="modal-body" align="center">
<label id="id_do">编号：<input type="text" class="btn btn-default" ></label>
<label>姓名：<input type="text" class="btn btn-default" id="name_do"></label>
<label>职位：<input type="text" class="btn btn-default" id="job_do"></label><br>
<label>电话：<input type="text" class="btn btn-default" id="phone_do"></label>
<label>籍贯：<input type="text" class="btn btn-default" id="address_do"></label><br><br>
<div id="model_tab_div">
</div>
</div>
<div class="modal-footer" align="center">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="btn_confirm_do">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<3>动态列表的处理
如上图所示，当点击一个加号的时候，新增表格的一行，点击减号的时候，把改行删除，显然这需要进行事件绑定与函数处理。下述代码中名为model_tab的id为新建表格的id，此处只是增加与减少表格行数，详述说明在第三部分的逻辑演示中，笔者会演示修改的逻辑处理，走一遍处理过程，这样就会容易理解的多。
<%--动态表格--%>
<script type="text/javascript">
function addRow() {
//取得对象
var tab=document.getElementById("model_tab"); //该id为你所建表格的id
//添加行
var row = tab.insertRow(tab.rows.length);;
//添加所需的列数
var td1=row.insertCell(row.cells.length);
var td2=row.insertCell(row.cells.length);
var td3=row.insertCell(row.cells.length);
var td4=row.insertCell(row.cells.length);
var td5=row.insertCell(row.cells.length);
td1.innerHTML = "序号：<input type=\"text\" class=\"btn btn-default\" style=\"width: 50%\" >";
td2.innerHTML = "时间：<input type=\"text\" class=\"btn btn-default\" style=\"width: 65%\" >";
td3.innerHTML = "地点：<input type=\"text\" class=\"btn btn-default\" style=\"width: 65%\" >";
td4.innerHTML = "事由：<input type=\"text\" class=\"btn btn-default\" style=\"width: 80%\" align=\"left\">";
td5.innerHTML = "<button type=\"button\" class=\"btn btn-default btn-sm\" onclick='deleteRow(this)'>\n" +
" <span class=\"glyphicon glyphicon-minus\"></span>\n" +
" </button>";
}
function deleteRow(obj){
var row=obj.parentNode.parentNode;
var tab=row.parentNode;
if(row.rowIndex > 0 )
tab.deleteRow(row.rowIndex);
}
</script>
<4>模糊查询的实现
在body里任建一个能输入的文本框与一个按钮，点击按钮的时候，触发事件函数，将文本里的内容提交给函数处理，函数javaScript的代码如下。按钮的id为btn_search，文本框的id为txt。
<%--模糊搜索功能实现--%>
<script type="text/javascript">
$(function(){
$("#btn_search").click(function(){
var txt=$("#txt").val();
if($.trim(txt)!=""){
$("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show();
}else{
$("table tr:not('#theader')").css("background","#fff").show();
}
});
})
</script>
3、修改功能的逻辑演示
当点击修改按钮时，触发show_modify事件函数
show_modify = function(modify_id){
$("#myModal_do").modal({ //显现模态窗
keyword:true
});
$("#model_tab_div").empty(); //将模态窗中的动态列表部分置空，防止干扰
$("#id_do").hide(); //不需要显示id，所以隐藏，看具体需要
xxxxx;
}
将页面传递过来的id，传到后台，进行信息查询（先查询信息，在对信息修改）
$.ajax({
type:"GET",
url:"/user/findOne",
data:{"id":modify_id},
dataType: 'json',
contentType:"application/json;charset=UTF-8",
success:function (returnData) {
var dataObj = returnData.data;
var works = dataObj.worksById;
$("#id_do").val(dataObj.id);
$("#name_do").val(dataObj.name);
$("#job_do").val(dataObj.job);
$("#phone_do").val(dataObj.phone);
$("#address_do").val(dataObj.address);
xxxxx; //其他处理
}
}
使用ajax进行异步调用，同过id查询到人事信息dataObject，与对应的工作信息works，将获取到的人事信息，直接放入模态窗中的对应位置，由于works是个List集合，每个人对应的工作信息数量不确定，因此采用动态列表将其呈现。
var htm="<table id='model_tab' border='0' align='center'>";
if(works.length == 0)
{
htm+="<tr><td width='12%'>序号：<input type='text' class='btn btn-default' style='width: 50%' value=''></td>\n" +
"<td width='18%'>时间：<input type='text' class='btn btn-default' style='width: 65%' value=''></td>\n" +
"<td width='20%'>地点：<input type='text' class='btn btn-default' style='width: 65%' value='' ></td>\n" +
"<td width='50%'>事由：<input type='text' class='btn btn-default' style='width: 80%' align='left' value=''></td>"+
"<td ><button type=\"button\" class=\"btn btn-default btn-sm\" id='btn_add_row' onclick='addRow()'>" +
"<span class=\"glyphicon glyphicon-plus\"></span>" +
"</button></td></tr>";
}
else
{
htm+="<tr><td width='12%'>序号：<input type='text' class='btn btn-default' style='width: 50%' value='"+works[0].num+"'></td>\n" +
"<td width='18%'>时间：<input type='text' class='btn btn-default' style='width: 65%' value='"+works[0].date+"'></td>\n" +
"<td width='20%'>地点：<input type='text' class='btn btn-default' style='width: 65%' value='"+works[0].city+"' ></td>\n" +
"<td width='50%'>事由：<input type='text' class='btn btn-default' style='width: 80%' align='left' value='"+works[0].workInfo+"'></td>"+
"<td ><button type=\"button\" class=\"btn btn-default btn-sm\" id='btn_add_row' onclick='addRow()'>" +
"<span class=\"glyphicon glyphicon-plus\"></span>" +
"</button></td></tr>";
for(var i=1;i<works.length;i++)
{
htm+="<tr><td width='12%'>序号：<input type='text' class='btn btn-default' style='width: 50%' value='"+works[i].num+"'></td>\n" +
"<td width='18%'>时间：<input type='text' class='btn btn-default' style='width: 65%' value='"+works[i].date+"'></td>\n" +
"<td width='20%'>地点：<input type='text' class='btn btn-default' style='width: 65%' value='"+works[i].city+"' ></td>\n" +
"<td width='50%'>事由：<input type='text' class='btn btn-default' style='width: 80%' align='left' value='"+works[i].workInfo+"'></td>"+
"<td ><button type=\"button\" class=\"btn btn-default btn-sm\" id='btn_add_row' onclick='deleteRow(this)'>" +
"<span class=\"glyphicon glyphicon-minus\"></span>" +
"</button></td></tr>";
}
}
htm+="</table>";
$("#model_tab_div").append(htm);
上述的内容便是xxxx的内容，请看table的id，id='model_tab'是不是和动态列表关联上了。有些人员可能没有工作信息，因此长度为0，此时将新建一条空的工作信息栏目让填写。如果有多条，那么在第一条的后面新增一个"+"号的button，在其余条目的后面添加"-"号button，因此需要分开来。最后直接扩展到模态窗中id为model_tab_div的div中。至此，已经将数据库中的信息查询出来了。
当我们，新增或者减少工作条目后，或者只是修改某些信息后，就需要重新把信息写入数据库了。修改完信息后，点击模态窗的确认按钮，其id为tn_confirm_do，触发事件函数如下
$(function () {
$("#btn_confirm_do").click(function(){
var id = $("#id_do").val();
var name = $("#name_do").val();
var job = $("#job_do").val();
var phone= $("#phone_do").val();
var address = $("#address_do").val();
var mytable = document.getElementById("model_tab");
var arr = [];
for(var i=0;i<mytable.rows.length; i++)
arr[i] = new Array();
for(var i=0;i<mytable.rows.length; i++){
for(var j=0;j<mytable.rows[i].cells.length-1; j++){
arr[i][j] = mytable.rows[i].cells[j].getElementsByTagName("input")[0].value;
}
}
var data={"id":id,"name":name,"job":job,"phone":phone,"address":address,"arr[][]":arr};
$.ajax({
type:"GET",
url:"/user/modifyOne",
data:data,
dataType:'json',
contentType:'application/json;charset=UTF-8',
success:function (returnData) {
},
error: function (msg) {
alert("modify error");
}
});
});
})
首先获取到人事信息放置到相应的变量中，随后同过表的id获取到表的对象，在对表格数据的获取与储存上，笔者选择了二维数组，以行列为下表获取到每一个对应单元的值，注意使用jquery是无法获取到数据的。
传入的data可以直接看成两部分，一个是User对象，一个是二维数组，后台的接收函数如下
@RequestMapping("/modifyOne")
@ResponseBody
public JSONObject modifyOne(@ModelAttribute User user, @RequestParam(value = "arr[][]") String[][] array)
{ xxxx ;}
4、写在最后
这个demo有两个实体，一个user，一个work，用外键链接，user存放人事信息，work存放其对应的工作信息。如果想看后台代码的处理过程，建议先看我的另外一篇文章Spring-datatable-Jpa实现增删改查及分页，这个是一个实体的springMVC示例。两个实体的处理大同小异，只是增加了一些代码而已。
对于Demo学习，看源码是必须的，说的再清楚不如看一眼源码。欢迎留言交流！
源码链接
网友评论