页面动态列表，模态窗及模糊查询的实现

模态窗的实现使用的插件是Bootstrap，动态列表则是用JavaScript拼接而成的，整个页面的展示效果，前端与后台的数据传输则用的是DataTable插件。这些插件提供了丰富的模板，可造就功能强大而又优美的页面，对于一般学习者，至少不用花费太多精力去管页面的那些样式。

1、概述

文字书写太模糊，也太苍白，直接上个图，就能了解各大概了。底表是查询所有信息的列表，右上角的“新增”按钮，每一条信息右侧的“详情”按钮，“修改”按钮，当我们点击它的时候，便弹出如图的模态窗，用于新增等功能实现。
当点击修改按钮的时候，图中所有信息是可以修改的，点击列表后面的加号则会新增一栏，点减号便会把该栏删除掉，点击确认后将列表数据传入后台。点击详情的时候，显示信息但不可修改。
至于模糊搜索，则是针对当前页面的，只需要加一段javaScript语句进行功能实现就OK了。

2、实现

<1>前端插件的使用
直接到官网上下载DataTable与Bootstrap插件，在webapp文件夹下新建一个包，放入其中或者其他位置，再加一个映射就可以了，总之目的是能够让JSP页面引用到。下图的dataTable便是笔者的插件放置的位置。
接下来便是在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">&times;</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学习，看源码是必须的，说的再清楚不如看一眼源码。欢迎留言交流！
源码链接