springboot+easyUI添加搜索栏, 进行分页笔记

1.首先我们看看easyUI官方的帮助文档，怎么写的。有二种加搜索栏的方法，这里用第二种

2.然后我们加入我们自己的代码中去，在这里直接从帮助文档中复制张贴就行了

3.由于代码太长了我就复制过来了，每一段都有详细的注解

<script type="text/javascript">
        /* 查询所有数据和加载整个组件  */
        $('#dg1').datagrid({  
            url:'<%=basePath %>/selectAllBooks.do',    //请求的地址，我们先把所有books表中的数据都加载进来，注意的是，这里请求的时候会向后台发送 page,rows这二个字段
            columns:[[       //然后根据官方的写法全都这样写    
                {field:'bid',title:'主键',width:100,align:'center'},    
                {field:'bname',title:'书名',width:150,align:'center'},    
                {field:'author',title:'作者',width:150,align:'center'},
                {field:'price',title:'价格',width:100,align:'center'},    
                {field:'book_number',title:'书号',width:200,align:'center'},    
                {field:'layout',title:'版次',width:100,align:'center'},
                {field:'discovery_unit',title:'出版社',width:300,align:'center'},
                {field:'type',title:'类别',width:110,align:'center'},    
                {field:'binding',title:'装帧',width:100,align:'center'},    
                {field:'date',title:'出版时间',width:150,align:'center'},
                {field:'stock',title:'库存',width:100,align:'center'}
            ]],
            pagination:true,//显示分页工具
            fit:true,    //是否空充容器
            pageSize:20,  //设置分页大小
            toolbar:"#dd" //将搜索组价加载进来
        }); 
        //根据官方文档的模板
        $('#search').appendTo('#tb.datagrid-toolbar');
        $('#ss').searchbox({ 
            searcher:function(value,name){   //value就是前面搜索框中的div中的name，name就是输入框中的值
                $('#dg1').datagrid({   //从新加载界面
                    pagination:true, 
                    //fitColumns:true,//允许表格自动缩放,以适应父容器
                    pageSize:20, //设置分页大小
                    fit:true, //宽度自适应
                    url:'<%=basePath %>/selectLikeBname.do?type='+name+'&bname='+value,   //将值传给后台
                    columns:[[    
                        {field:'bid',title:'主键',width:100,align:'center'},    
                        {field:'bname',title:'书名',width:150,align:'center'},    
                        {field:'author',title:'作者',width:150,align:'center'},
                        {field:'price',title:'价格',width:100,align:'center'},    
                        {field:'book_number',title:'书号',width:200,align:'center'},    
                        {field:'layout',title:'版次',width:100,align:'center'},
                        {field:'discovery_unit',title:'出版社',width:300,align:'center'},
                        {field:'type',title:'类别',width:110,align:'center'},    
                        {field:'binding',title:'装帧',width:100,align:'center'},    
                        {field:'date',title:'出版时间',width:150,align:'center'},
                        {field:'stock',title:'库存',width:100,align:'center'}
                    ]]
                    
                });
           
            }, 
            menu:'#mm', 
            prompt:'Please Input Value' 
            }); 
    </script> 

4.然后书写后台模块

(1).先看controller层查询所有books表中的数据

(2).然后service层

(3).最后mapper层

关于图书的所有信息查询就到写完了，下面我们来用搜索框来加载数据

5.关于搜索框的书写

··前台代码在前面写了都写了，这里就书写后台代码了

（1）.老样子我们还是一层一层的来，先Controller层

(2).然后就是service层

（3）.最后当然是我们的mapper层

6.最后就看我们的效果图了

7.本以为很完美了，没有想到最后还是遇到了一个bug,想了很多办法一直没有解决

这是我改正后的，但是它又没有贴在下边框，如果不这样它又会隐藏，现在只能这样了

找到解决办法后，在更新吧

找到了问题所在原来是应该在加一层div的，然后通过   toolbar:"#dd" ，这个id是我们自己加的id这样就完美了