深入實踐Spring Boot3.4.1 清單視圖設計

<b>3.4.1　清單視圖設計</b>

電影的清單視圖是電影視圖的首頁，它引用了3.3節使用thymeleaf設計的頁面架構模闆layout.html，在這裡主要實作對資料的分頁查詢請求和清單資料顯示，并提供了一部電影的建立、檢視、修改和删除等超連結。

1.?分頁設計

電影的清單視圖的分頁設計使用了“jquery.pagination.js”分頁插件，編寫如代碼清單3-15所示的腳本，其中getopt定義了分頁工具條的一些基本屬性，pageaction通過“./list”調用控制器取得分頁資料清單，f?illdata函數将清單資料填充到html控件tbodycontent中。

代碼清單3-15　分頁設計的js編碼

// 分頁的參數設定

var getopt =

function(){

    var opt = {

        items_per_page: 10,      // 每頁記錄數

        num_display_entries: 3,        // 中間顯示的頁數，預設為10

        current_page:0,             // 目前頁

        num_edge_entries:1,           // 頭尾顯示的頁數，預設為0

        link_to:"javascript:void(0)",

        prev_text:"上頁",

        next_text:"下頁",

        load_first_page:true,

        show_total_info:true ,

        show_first_last:true,

        first_text:"首頁",

        last_text:"尾頁",

        hasselect:false,

        callback: pageselectcallback // 回調函數

    }

    return opt;

}

// 分頁開始

var

currentpagedata = null ;

var pageaction =

    $.get('./list?t='+new date().gettime(),{

        name:$("#name").val()

    },function(data){

        currentpagedata = data.content;

$(".pagination").pagination(data.totalelements, getopt());

    });

pageselectcallback = function(page_index, jq, size){

    if(currentpagedata!=null){

        filldata(currentpagedata);

        currentpagedata = null;

    }else

        $.get('./list?t='+new

date().gettime(),{

size:size,page:page_index,name:$("#name").val()

        },function(data){

            filldata(data.content);

        });

// 填充分頁資料

function

filldata(data){

    var $list = $('#tbodycontent').empty();

    $.each(data,function(k,v){

        var html = "" ;

        html += '&lt;tr&gt; ' +

                '&lt;td&gt;'+

(v.id==null?'':v.id) +'&lt;/td&gt;' +

(v.name==null?'':v.name) +'&lt;/td&gt;' +

(v.createdate==null?'': getsmpformatdatebylong(v.create

date,true))

+'&lt;/td&gt;' ;

        html += '&lt;td&gt;&lt;a

class="c-50a73f mlr-6" href="javascript:void(0)" onclick=

"detail(\''+

v.id+'\')"&gt;檢視&lt;/a&gt;&lt;a class="c-50a73f mlr-6" href=

"javascript:void(0)"

onclick="edit(\''+ v.id+'\')"&gt;修改&lt;/a&gt;&lt;a class="c-50a73f mlr-6"

href="javascript:void(0)" onclick="del(\''+ v.id+'\')"&gt;删除&lt;/a&gt;&lt;/td&gt;' ;

        html +='&lt;/tr&gt;' ;

        $list.append($(html));

// 分頁結束

2.?清單頁面設計

電影清單的顯示頁面主要定義了清單字段的名稱和提供顯示資料内容的控件id，即tbodycontent，如代碼清單3-16所示。

代碼清單3-16　電影清單頁面html編碼

&lt;!doctype

html&gt;

&lt;html

xmlns:th="http://www.thymeleaf.org"

layout:decorator="fragments/layout"&gt;

&lt;head&gt;

&lt;title&gt;電影管理&lt;/title&gt;

    &lt;link

th:href="@{/scripts/pagination/pagination.css}"

rel="stylesheet" type="text/css" /&gt;

th:href="@{/scripts/artdialog/default.css}"

th:href="@{/scripts/my97datepicker/skin/wdatepicker.css}"

th:href="@{/styles/index.css}" rel="stylesheet"  type="text/css"/&gt;

    &lt;script

th:src="@{/scripts/pagination/jquery.pagination.js}"&gt;&lt;/script&gt;

th:src="@{/scripts/jquery.smartselect-1.1.min.js}"&gt;&lt;/script&gt;

th:src="@{/scripts/my97datepicker/wdatepicker.js}"&gt;&lt;/script&gt;

th:src="@{/scripts/movie/list.js}"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div

class="locationline" layout:fragment="prompt"&gt;

    目前位置：首頁 &amp;gt; &lt;em &gt;電影管理&lt;/em&gt;

&lt;/div&gt;

class="statisticbox w-782" 

layout:fragment="content"&gt;

    &lt;form id="queryform"

method="get"&gt;

    &lt;div

class="radiusgraybox782"&gt;

        &lt;div

class="radiusgraytop782"&gt;&lt;/div&gt;

        &lt;div class="radiusgraymid782"&gt;

            &lt;div class="datasearchbox

foruserradius"&gt;

                &lt;ul&gt;

                    &lt;li&gt;

                        &lt;label

class="preinptxt f-left"&gt;電影名稱&lt;/label&gt;

                        &lt;input

type="text" class="inp-list f-left w-200" place

holder="按電影名稱搜尋" id="name"  name="name"/&gt;

                    &lt;/li&gt;

                        &lt;a

href="javascript:void(0)" class="bluebtn-62x30 f-right"

id="searchbtn"&gt;查詢&lt;/a&gt;

                &lt;/ul&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

    &lt;/form&gt;

    &lt;div class="newbtnbox"&gt;

        &lt;input type="hidden"

id="m_ck" /&gt;

        &lt;a id="addbtn"

class="bluebtn-62x30" href="javascript:void(0)"&gt;新增&lt;/a&gt;

    &lt;div class="datadetaillist

mt-12"&gt;

&lt;table id="results" class="datalisttab"&gt;

            &lt;thead&gt;

            &lt;tr&gt;

                &lt;th&gt;id&lt;/th&gt;

                &lt;th&gt;電影&lt;/th&gt;

                &lt;th&gt;出版日期&lt;/th&gt;

                &lt;th&gt;操作&lt;/th&gt;

            &lt;/tr&gt;

            &lt;/thead&gt;

            &lt;tbody

id="tbodycontent"&gt;

            &lt;/tbody&gt;

        &lt;/table&gt;

class="tablefootline"&gt;

            &lt;div class="pagebarlist

pagination"/&gt;

&lt;/body&gt;

&lt;/html&gt;

3.?清單視圖設計效果

電影資料清單視圖設計的最終顯示效果如圖3-2所示。

圖3-2　電影清單視圖設計效果圖