深入實踐Spring Boot3.4.4 修改視圖設計

<b>3.4.4　修改視圖設計</b>

1.?修改對話框設計

在電影的首頁中修改一部電影，首先打開一個修改電影的對話框，這個對話框的設計如代碼清單3-22所示。其中通過“$.get”通路“./edit/{id}”取得資料和修改視圖的html頁面元素。

代碼清單3-22　修改電影對話框js編碼

function

edit(id){

    $.get("./edit/"+id,{ts:new

date().gettime()},function(data){

        art.dialog({

            lock:true,

            opacity:0.3,

            title: "修改",

            width:'750px',

            height: 'auto',

            left: '50%', 

            top: '50%',

            content:data,

            esc: true,

            init: function(){

                artdialog = this;

            },

            close: function(){

                artdialog = null;

            }

        });

    });

}

2.?修改頁面設計

修改電影視圖的頁面設計如代碼清單3-23所示，其中劇照的下拉清單框中增加了“選中”的代碼：th:selected="${movie.photo == f?ile}"，即如果電影中的劇照與下拉框清單中的劇照相同，則選中它。

在修改界面上，還增加了“增加角色”和“選擇演員”的編輯項。為了簡化設計這裡的角色名稱我們也使用了預先定義的資料。

代碼清單3-23　修改電影頁面html編碼

&lt;link

th:href="@{/styles/imageselect.css}" rel="stylesheet"

type="text/css" /&gt;

&lt;script

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

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

&lt;form

id="saveform" method="post"&gt;

    &lt;input type="hidden"

name="id" id="id" th:value="${movie.id}"/&gt;

&lt;div

class="addinfbtn" &gt;

    &lt;h3

class="itemtit"&gt;&lt;span&gt;編輯資訊&lt;/span&gt;&lt;/h3&gt;

    &lt;table

class="addnewinflist"&gt;

        &lt;tr&gt;

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

            &lt;td

width="240"&gt;&lt;input class="inp-list w-200 clear-mr

f-left" type=

"text"

th:value="${movie.name}" id="name" name="name"

maxlength="16" /&gt;&lt;/td&gt;

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

            &lt;td width="240"&gt;

                &lt;select

name="photo" id="photo"&gt;

                    &lt;option

th:each="file:${files}"

th:value="${file}"

th:text="${file}"

th:selected="${movie.photo == file}"&gt;

                    &lt;/option&gt;

                &lt;/select&gt;

            &lt;/td&gt;

        &lt;/tr&gt;

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

            &lt;td&gt;

                &lt;input 

onfocus="wdatepicker({datefmt:'yyyy-mm-dd hh:mm:ss'})"

type="text"

class="inp-list w-200 clear-mr f-left"

th:value="${movie.createdate} ?

${#dates.format(movie.createdate,'yyyy-mm-dd hh:mm:ss')} :''"

id="createdate" name="createdate"/&gt;

            &lt;th&gt;增加角色&lt;/th&gt;

name="rolename" id="rolename"&gt;

value=""&gt;增加角色&lt;/option&gt;

th:each="role:${rolelist}"

th:value="${role}"

th:text="${role}"&gt;

            &lt;th&gt;選擇演員&lt;/th&gt;

name="actorid" id="actorid"&gt;

value=""&gt;選擇演員&lt;/option&gt;

th:each="actor:${actors}"

th:value="${actor.id}"

th:text="${actor.name}"&gt;

                    &lt;/option&gt;

    &lt;/table&gt;

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

        &lt;a class="btn-93x38

savebtn" href="javascript:void(0)"&gt;确定&lt;/a&gt;

backbtn" href="javascript:closedialog(0)"&gt;傳回&lt;/a&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;/form&gt;

type="text/javascript"&gt;

    $(document).ready(function(){

$('select[name=photo]').imageselect({dropdownwidth:425});

&lt;/script&gt;

3.?修改視圖的設計效果

最終完成的修改電影視圖的顯示效果如圖3-5所示。

圖3-5　修改電影視圖設計效果圖