【ssm個人博客項目實戰08】博客的分頁顯示以及模糊查詢，刪除。

前言

我在這裏給大家道個歉，樓主因爲畢業季拍畢業照 找工作事情比較多，所以博客實戰給拉下來了，對不起大家，這只是暫時的拉下，樓主是不會放棄的。

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、測試與小結

在這一節我們完成了博客的分頁顯示模糊查詢等功能，但是其中的修改博客以及寫博客我們放到了下一節，所以修改博客那個方法我們暫時也沒有實現。

另外博客已經上線了
地址 http://www.yukong.me/Blog/index.html
後臺 http://www.yukong.me/Blog/login.jsp
要密碼私聊我哦