深入实践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　电影列表视图设计效果图