月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟15 製作編輯次選單功能

發表於 更新於 歸屬於 ， ，

次選單功能是本題組中較為複雜，但說明卻相對模糊的功能，依照題目給出的參考圖來看，題目希望次選單的新增/修改/刪除都在彈出視窗中完成。

由於一個畫面的表單中要同時具有增改刪查的功能，因此我們無法延用先前製作的API或彈出視窗表單來處理次選單的功能，所以次選單的API單獨一支程式來處理，因此我們在 /back/menu.php 的彈出視窗的按鈕參數上採用指定路徑檔名的方式來處理，而不是和先前幾個功能一樣採用帶入資料表變數的方式。

/back/menu.php

1
2
3
4
5
<td>
    <input type="button" 
          value="編輯次選單"  
        onclick="op('#cover','#cvr','./modal/submenu.php?table=<?=$do;?>&id=<?=$row['id'];?>')">
</td>

建立彈出視窗表單
/modal/submenu.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!--因為是獨立的功能，而且會使用到資料表，所以要先include base.php進來使用-->
<?php include_once "../api/db.php";?>
<h3>編輯次選單</h3>
<hr>
<form action="./api/submenu.php" method="post" enctype="multipart/form-data">
<table class='cent' id='sub'>
    <tr>
        <td>次選單名稱</td>
        <td>次選單連結網址</td>
        <td>刪除</td>
    </tr>
    <?php
    //ajax的請求中會在網址中帶入id參數，利用此id參數，我們可以取得主選單下的所有次選單
    $subs=$Menu->all(['menu_id'=>$_GET['id']]);
    foreach($subs as $sub){
    ?>
    <tr>
        <td>
            <input type="text" name="text[]" value="<?=$sub['text'];?>">
        </td>
        <td>
            <input type="text" name="href[]" value="<?=$sub['href'];?>">
        </td>
        <td>
            <input type="checkbox" name="del[]" value="<?=$sub['id'];?>">
        </td>
        <input type="hidden" name="id[]" value="<?=$sub['id'];?>">
    </tr>
    <?php
    }
    ?>
</table>
<div>
    <input type="hidden" name="table" value="<?=$_GET['table'];?>">
            <!--將主選單的id加入到隱藏欄位中，
                讓後台的api知道這個表單的次選單資料是屬於那個主選單的-->
    <input type="hidden" name="menu_id" value="<?=$_GET['id'];?>">
    <input type="submit" value="修改確定">
    <input type="reset" value="重置">
    <input type="button" value="更多次選單" onclick="more()">
</div>

</form>
<script>
/**
 * 新增次選單的js函式
 */
function more(){
    //宣告一個次選單的html字串
    let item=`<tr>
                <td><input type="text" name="add_text[]" id=""></td>
                <td><input type="text" name="add_href[]" id=""></td>
              </tr>`
    //使用append()函式將html字串，添加到列表的最後面    
    $("#sub").append(item);
}
</script>

在API的部份，我們透過表單中的name屬性命名(text vs text2 ; href vs href2)，區分出那些資料是屬於新增的，而那些資料是屬於改和刪的。

建立次選單編輯api
/api/submenu.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
include_once "db.php";
/**
 * 判斷$_POST中沒有id這個項目，有的話表示有資料要編輯，
 * 沒有的話表示資料表中還沒有資料。
 */
if(isset($_POST['id'])){
    foreach($_POST['id'] as $idx => $id){
        if(isset($_POST['del']) && in_array($id,$_POST['del'])){
            $Menu->del($id);
        }else{
            $row=$Menu->find($id);
            $row['text']=$_POST['text'][$idx];
            $row['href']=$_POST['href'][$idx];
            $Menu->save($row);
        }
    }
}

//判斷$_POST中是否有add_text這個項目，有的話表示有資料要新增
if(isset($_POST['add_text'])){

    //新增的資料可能多筆，因此使用迴圈來一筆一筆處理
    foreach($_POST['add_text'] as $idx =>$text){

        //判斷$text的內容是否為空值，如果是空值則不新增
        if($text!=""){
            $data=[];
            $data['text']=$text;
            $data['href']=$_POST['add_href'][$idx];
            $data['sh']=1;
            $data['menu_id']=$_POST['menu_id'];
    
            $Menu->save($data);
        }
    }
}

//導回後台的選單管理頁面
to("../back.php?do=menu");