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

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

1、概述

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

至于模糊搜索，则是针对当前页面的，只需要加一段javaScript语句进行功能实现就OK了。

2、实现

<1>前端插件的使用

直接到官网上下载DataTable与Bootstrap插件，在webapp文件夹下新建一个包，放入其中或者其他位置，再加一个映射就可以了，总之目的是能够让JSP页面引用到。下图的dataTable便是笔者的插件放置的位置。

接下来便是在jsp页面中引用了，一般建议放置在页面的里，随后便可以愉快的使用了，如果新增其他的样式，可能还需要导入Bootstrap的其他样式文件。

<2>模态窗页面实现
模态窗在不触发事件的时候是默认不显现的，当触发某个事件，比如点击按钮，便可以在该事件处理函数中，增加如下代码，使其显现出来。

        show_modify = function(modify_id){
            $("#myModal_do").modal({
                keyword:true
            });
            .......其他处理
        }

模态窗的代码一般放置在页面的body中，注意事件绑定的id要一致。如你所见，该模态窗中只有人员信息，并没有动态列表，笔者是另开了一个id为model_tab_div的div，在js将其完成拼接，最后放置在该div下。

    

        

            

                

                    ×
                    
详情
                
                


                    编号：
                    姓名：
                    职位：

                    电话：
                    籍贯：



                    


                    

                

                

                    关闭
                    确认
                
            
        
    

<3>动态列表的处理
如上图所示，当点击一个加号的时候，新增表格的一行，点击减号的时候，把改行删除，显然这需要进行事件绑定与函数处理。下述代码中名为model_tab的id为新建表格的id，此处只是增加与减少表格行数，详述说明在第三部分的逻辑演示中，笔者会演示修改的逻辑处理，走一遍处理过程，这样就会容易理解的多。

<%--动态表格--%>
    

<4>模糊查询的实现
在body里任建一个能输入的文本框与一个按钮，点击按钮的时候，触发事件函数，将文本里的内容提交给函数处理，函数javaScript的代码如下。按钮的id为btn_search，文本框的id为txt。

<%--模糊搜索功能实现--%>
    

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="";
                    if(works.length == 0)
                    {
                        htm+="\n" +
                            "\n" +
                            "\n" +
                            ""+
                            "";
                    }
                    else
                    {
                        htm+="\n" +
                            "\n" +
                            "\n" +
                            ""+
                            "";

                        for(var i=1;i\n" +
                                "\n" +
                                "\n" +
                                ""+
                                "";
                        }

                    }

                    htm+="
序号：
时间：
地点：
事由：
" +
                            "" +
                            "
序号：
时间：
地点：
事由：
" +
                            "" +
                            "
时间：
地点：
事由：
" +
                                "" +
                                "
";
                    $("#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

首先获取到人事信息放置到相应的变量中，随后同过表的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学习，看源码是必须的，说的再清楚不如看一眼源码。欢迎留言交流！
源码链接