文档章节

【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 1508
阅读 96
收藏 1

前言

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

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

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

另外博客已经上线了
地址 http://www.yukong.me/Blog/index.html
后台 http://www.yukong.me/Blog/login.jsp
要密码私聊我哦

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
私信 提问
【视频分享】尚硅谷Java视频教程_RBAC权限实战视频教程

        本视频讲授RBAC权限模型的设计、以及在项目中的应用 。 1. 使用Maven进行项目构建 。 2. 页面设计采用响应式前端框架BootStrap 。 3. 采用多种方式展现用户数据:树形结构(z...

后端编程嘟
05/24
0
0
使用SSM+Solr优雅的实现电商项目中的搜索功能

在学习了Redis&Spring-Data-Redis入门和Solr&Spring-Data-Solr入门后,接下来就该是项目实战了。这次我们用Vue.JS和ElementUI写前端页面,优雅的整合SSM-Shiro-Redis-Solr框架。 手摸手教你优...

TyCoding
09/25
0
0
Java实现个人博客网站

说明:该项目是实验楼用户“LOU3165780622”发布在实验楼上的项目教程:【Java实现个人博客】,未经允许,禁止转载; 该项目利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人...

实验楼
2017/12/12
0
0
一个案例带你入门SSM框架开发

SSM框架快速入门 关于SSM框架环境搭建,请点击这里前往我的博客:SSM框架整合之环境搭建由于本项目采用了maven,关于IDEA搭建maven项目过程请点击这里前往我的博客:maven起步 项目源码请 点...

TyCoding
08/31
0
0
【分享】分享一个基于SSH实现的简单学生选课系统(附源码)

首先声明:本小项目是因老师而做,主要为了完成老师项目要求,当然也添加了许多老师没有要求的功能,本项目代码非常简单,分享出来时为了和我一样的小菜鸟共同学习一下,只适合初学者拿来学习...

长平狐
2012/11/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊PHP离线交易开发包

EthTool开发包适用于希望采用裸交易的PHP以太坊应用开发,主要包含以下特性: 支持裸交易部署/调用合约 内置etherscan和infura支持 keystore生成与读取,兼容geth/parity 采用裸交易的一个好...

笔阁
24分钟前
1
0
SRE的含义及与 DevOps 如何关联?

虽然站点可靠性工程师(site reliability engineer SRE)角色在近几年变得流行起来,但是很多人 —— 甚至是软件行业里的 —— 还不知道 SRE 是什么或者 SRE 都干些什么。为了搞清楚这些问题...

linuxCool
24分钟前
1
0
月入3万之一个程序员的转行坎坷历程

陈年往事 “我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。 互联网兴起今天,...

苏南-首席填坑官
46分钟前
2
1
OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
今天
449
9
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部