【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。前言1、上篇回顾2、具体编码3、测试与小结

前言

我在这里给大家道个歉,楼主因为毕业季拍毕业照 找工作事情比较多,所以博客实战给拉下来了,对不起大家,这只是暂时的拉下,楼主是不会放弃的。

1、上篇回顾

在上一节中我们是完成了博客的回台部分,现在我需要在前台拿到回台传来的数据并且给以显示出来。 不知道大家还记得我们在博客类别管理里面,easyui的datagrid用法吗?在这里我们继续使用datagrid 只不过多了一个模糊查询。 接下来给大家看看实际效果

博客分页显示

我们主要显示的有博客的 标题 发布时间 博客类型 然后工具栏多了一个关于博客标题的模糊查询

2、具体编码

2.1、首先 我们需要新建一个blogManage.jsp

然后同样的导入我们的公共头文件

<%@include file="./common/head.jspf"%>

这样我们easyui所用到的一些js或者css就载入进来了

2.2、页面布局

接下我们就要完成这个分页的布局,根据easyui的api手册提供的datagrid的几种使用形式,我们选择html+js的那种方式

<table id="dg" title="博客管理" class="easyui-datagrid" fitColumns="true" pagination="true"
    url="${blog}/admin/blog/listBlog.do" toolbar="#tb">
    <thead>
        <tr>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="20" align="center">编号</th>
            <th field="title" width="200">标题</th>
            <th field="releaseDate" width="100" align="center">发布日期</th> 
            <th field="blogType" width="100" align="center" formatter="formatBlogType">博客类型</th>
        </tr>
    </thead>
</table>
<div id="tb">
    <div>
         标题 <input type="text" id="s_title" size="20" onkeydown="if(event.keyCode==13) searchBlog()">
        <a href="javascript:searchBlog()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        <a href="javascript:deleteBlog()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a href="javascript:openBlogModifyTab()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>      
        <a href="javascript:reload()" class="easyui-linkbutton" iconCls="icon-reload" plain="true">刷新</a>       
    </div>
</div>

大家可能对easyui的部分属性不懂,这里我简单解释一下

1、在table中table 就是整个用与显示的 分页数据的一个便签

  • url 就是数据的请求的接口 这里就是我们后端controller中写好的listBlog那个方法的RequestMapping
  • toolbar就是我们上方工具条的id
  • field整个就是json数据中对应的属性名称
  • formatter就是对数据显示之前调用的格式化的方法名

**2、在id=tb的div中 这一块就是分页显示上方的工具条 ** 这里就没有什么好解释的了 就是一个div里面一个input 四个a标签分别对应 模糊查询输入框 模糊查询按钮 删除 修改 刷新

2.3 js方法实现

从上面可以看出,我们需要实现6个js方法 下面我逐个解释一下每一个方法的作用

  • formatBlogType() 这个方法主要是格式化我们的博客类型 因为后端传过来的是一个BlogType对象 但是我只需要显示BlogType的typeName属性就可以,所以这里需要进行格式处理
  • searchBlog()这个方法就是通过input中输入的值 往后端发送查询请求查询数据
  • deleteBlog()这个方法就是删除博客
  • openBlogModifyTab()这个方法就是打开我们博客的修改页面
  • reload()这个方法就是刷新页面 重新载入数据

方法都介绍完了 接下来就是具体编码的实现了

 /**
     * 格式化博客类型获取其类型名称
     * @param val
     * @param row
     * @returns {string}
     */
    function formatBlogType(val, row) {
        return val.typeName;
    }

    /**
     * 按照title查询博客信息
     */
    function searchBlog() {
        $("#dg").datagrid("load", {
            "title":$("#s_title").val()
        });
    }

    /**
     * 删除博客信息
     * 可以多选
     */
    function deleteBlog() {
        //获取选中要删除的行
        var selectedRows = $("#dg").datagrid("getSelections");
        //判断是否有选择的行
        if(selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据");
            return;
        }
        //定义选中 选中id数组
        var idsStr = [];
        //循环遍历将选中行的id push进入数组
        for(var i = 0; i < selectedRows.length; i++) {
            idsStr.push(selectedRows[i].id);
        }
        //将数组安装,连接成字符串
        var ids = idsStr.join(","); //1,2,3,4
        //提示是否确认删除
        $.messager.confirm("系统提示", "<font color=red>您确定要删除选中的"+selectedRows.length+"条数据么?</font>", function(r) {
            //确定删除
            if(r) {
                //发送ajax请求
                $.post("${blog}/admin/blog/delete.do",
                        {ids: ids}, function(result){
                            if(result.success) {
                                $.messager.alert("系统提示", "数据删除成功!");
                                $("#dg").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", "数据删除失败!");
                            }
                        }, "json");
            }
        });
    }
    /**
     *打开修改博客界面
     */
    function openBlogModifyTab() {
        
    }
    /**
     * 重新载入数据
     */
    function reload() {
        $("#dg").datagrid("reload");
    }

在这里我简单讲解一下

formatBlogType(val,row) val 对应属性的值 row对应行的信息

datagrid比较常用也比较复杂,它有其中有load,reload这三个方法,它们都有相同的功能,都是加载数据的,但又有区别。

load方法,比如我已经定义一个datagrid的id为dg,那这个方法的使用方式为 $(“#dg”).datagrid(“load”,{ }); 它的参数为一个json对象,里面写的是你要传输的参数的键值对,调用这个方法来加载数据的时候,它传给后台的分页信息是从第一页开始的。 所以我们模糊查询的时候需要把数值作为查询参数给传递过去 reload方法,使用方式也跟load的一样 $(“#grid”).datagrid(“reload”,{ }); 看它的名字应该就可以知道它的做用了,没错,它跟load一样有加载数据功能,也一样的传参数,但它传给后台的分布信息是当前的页码,就是实现刷新当前页的功能。

3、测试与小结

image.png

image.png

在这一节我们完成了博客的分页显示模糊查询等功能,但是其中的修改博客以及写博客我们放到了下一节,所以修改博客那个方法我们暂时也没有实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏崔庆才的专栏

分析Ajax爬取今日头条街拍美图

17740
来自专栏北京马哥教育

27个Linux文档编辑命令

? 文 | 豌豆 来源 | 菜鸟教程 ? 豌豆贴心提醒,本文阅读时间5分钟,文末有秘密! Linux col命令 Linux col命令用于过滤控制字...

51960
来自专栏linux、Python学习

案例+解读,来自有道大神的17个常用Linux命令深度解析

命令后带(Mac)标记的,表示该命令在Mac OSX下测试,其它的在Debian下测试。

17360
来自专栏偏前端工程师的驿站

让VIM支持Python2 by update-alternatives

前言  Ubuntu 16+中$ sudo apt install vim所安装的vim只支持Python3,但很多插件如YCM和powerline均需要Pyt...

29180
来自专栏北京马哥教育

27个Linux文档编辑命令

在许多UNIX说明文件里,都有RLF控制字符。当我们运用shell特殊字符">"和">>",把说明文件的内容输出成纯文本文件时,控制字符会变成乱码,col指令则...

21660
来自专栏漫漫全栈路

ASP.NET MVC学习笔记05模型与访问数据模型

上一篇使用的M模型,并不是真正意义上的Model,现在来添加一些类,并将这些类用来管理数据库中数据(电影)。而这些类,就是ASP.NET MVC中的Model...

31240
来自专栏Young Dreamer

Vue Router的懒加载路径

19710
来自专栏北京马哥教育

案例+解读,来自有道大神的17个常用Linux命令深度解析

命令后带(Mac)标记的,表示该命令在Mac OSX下测试,其它的在Debian下测试。 1. grep命令 文本查找命令, 能够使用正则表达式的方式搜索文本...

34650
来自专栏老九学堂

编码秘籍,Java程序员必看的调试技巧

调试可以帮助我们识别和解决应用程序缺陷,老九君下面介绍的调试方法基本都是通用的,有了下面的这些技巧在开发中会让我们在编程中事半功倍,避免浪费时间! 1.条件断点...

41460
来自专栏DOTNET

log4net使用注意事项

1配置Log4net Log4net的配置文件有几种使用方式,这里将配置log4net的部分独立出来,即关于log4net的配置独立成文件log4net.con...

446120

扫码关注云+社区

领取腾讯云代金券