前言

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

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

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