提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

深入实践Spring Boot3.4.1　列表视图设计

2023-03-14 10:16:19 时间

3.4.1　列表视图设计

电影的列表视图是电影视图的主页，它引用了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 = function(){

    $.get('./list?t='+new Date().getTime(),{

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

    },function(data){

        currentPageData = data.content;

        $(".pagination").pagination(data.totalElements, getOpt());

    });

}

 

var 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 += '<tr> ' +

                '<td>'+ (v.id==null?'':v.id) +'</td>' +

                '<td>'+ (v.name==null?'':v.name) +'</td>' +

                '<td>'+ (v.createDate==null?'': getSmpFormatDateByLong(v.create

Date,true)) +'</td>' ;

        html += '<td><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick=

"detail(\''+ v.id+'\')">查看</a><a class="c-50a73f mlr-6" href=

"javascript:void(0)" onclick="edit(\''+ v.id+'\')">修改</a><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick="del(\''+ v.id+'\')">删除</a></td>' ;

        html +='</tr>' ;

 

        $list.append($(html));

    });

}

// 分页结束

2.?列表页面设计

电影列表的显示页面主要定义了列表字段的名称和提供显示数据内容的控件ID，即tbodyContent，如代码清单3-16所示。

代码清单3-16　电影列表页面HTML编码

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">

<head>

    <title>电影管理</title>

 

    <link th:href="@{/scripts/pagination/pagination.css}" rel="stylesheet" type="text/css" />

    <link th:href="@{/scripts/artDialog/default.css}" rel="stylesheet" type="text/css" />

    <link th:href="@{/scripts/My97DatePicker/skin/WdatePicker.css}" rel="stylesheet" type="text/css" />

    <link th:href="@{/styles/index.css}" rel="stylesheet"  type="text/css"/>

 

    <script th:src="@{/scripts/pagination/jquery.pagination.js}"></script>

    <script th:src="@{/scripts/jquery.smartselect-1.1.min.js}"></script>

    <script th:src="@{/scripts/My97DatePicker/WdatePicker.js}"></script>

    <script th:src="@{/scripts/movie/list.js}"></script>

</head>

<body>

<div class="locationLine" layout:fragment="prompt">

    当前位置：首页 &gt; <em >电影管理</em>

</div>

 

<div class="statisticBox w-782"  layout:fragment="content">

    <form id="queryForm" method="get">

    <div class="radiusGrayBox782">

        <div class="radiusGrayTop782"></div>

        <div class="radiusGrayMid782">

            <div class="dataSearchBox forUserRadius">

                <ul>

                    <li>

                        <label class="preInpTxt f-left">电影名称</label>

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

holder="按电影名称搜索" id="name"  name="name"/>

                    </li>

                    <li>

                        <a href="javascript:void(0)" class="blueBtn-62X30 f-right"

id="searchBtn">查询</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    </form>

    <div class="newBtnBox">

        <input type="hidden" id="m_ck" />

        <a id="addBtn" class="blueBtn-62X30" href="javascript:void(0)">新增</a>

    </div>

    <div class="dataDetailList mt-12">

        <table id="results" class="dataListTab">

            <thead>

            <tr>

                <th>ID</th>

                <th>电影</th>

                <th>出版日期</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody id="tbodyContent">

            </tbody>

        </table>

        <div class="tableFootLine">

            <div class="pagebarList pagination"/>

        </div>

    </div>

</div>

 

</body>

</html>

3.?列表视图设计效果

电影数据列表视图设计的最终显示效果如图3-2所示。

 

图3-2　电影列表视图设计效果图

相关文章