เนื้อหาต่อไปนี้ จะเป็นแนวทางการใช้งานตาราง table แบบ responsive โดยจะเริ่มทำความเข้าใจตั้งแต่ เหตุผล
เงื่อนไข และรูปแบบการใช้งาน นอกจากนั้น จะเพิ่มเนื้อหาเกี่ยวกับการใช้งาน checkbox แบบ button รวมถึงการ
ใช้งานปุ่ม ยืนย้นการลบข้อมูล ที่เรามักพักบ่อยในรายการข้อมูลในตาราง เพื่อให้ผู่ใช้งานลบรายการข้อมูลที่ต้องการ
การใช้งาน Table แบบ Responsive
หัวข้อนี้ เราจะมาดูตัวอย่างผลลัพธ์ของกรณีใช้งานการแสดงตารางแบบ responsive และแบบไม่ใช้งาน ดูโค้ด
ตัวอย่างสำหรับแสดงตารางเบื้องต้นดังนี้
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 | <div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><table class="table table-sm table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">Col 1</th> <th scope="col">Col 2</th> <th scope="col">Col 3 ยาวกว่าปกติ</th> <th scope="col">Col 4</th> <th scope="col">Col 5</th> </tr> </thead> <tbody> <?php for($i=1;$i<=5;$i++){ ?> <tr> <th scope="row"><?=$i?></th> <td>ข้อมูลคอลัมน์ 1</td> <td>ข้อมูลคอลัมน์ 2 </td> <td>ข้อมูลคอลัมน์ 3 ยาวกว่าปกติ</td> <td>ข้อมูล 4</td> <td>ข้อมูลคอลัมน์ 5 </td> </tr> <?php }?> </tbody></table> |
ตัวอย่างโค้ด เราสมมติรายการโดยการวนลูปมาแสดง 5 บรรทัด มีคอลัมน์ข้อมูล 5 คอลัมน์ ซึ่งปกติแล้ว
ถ้าเรามีการใช้งานตารางใน bootstrap โดยไม่ได้กำหนดความกว้างของคอลัมน์ ตัวตารางจะทำการปรับขนาด
ของตารางให้อยู่ในหน้าจออัตโนมัติ ทั้งหัวข้อในคอลัมน์ และรายการข้อมูล จะถูกตัดให้ขึ้นบรรทัดใหม่ ยกเว้นว่า
ข้อมูลนั้นๆ มีการกำหนดขนาดหรือความกว้างไว้ จะไม่มีการตัดขึ้นบรรทัดใหม่ ดูรูปตัวอย่างด้านล่างประกอบ
กรณีข้อมูลตัดขึ้นบรรทัดใหม่
แต่ถ้าหากว่า เราไม่ต้องการให้ข้อมูล มีการตัดขึ้นบรรทัดใหม่อัตโนมัติ หรือคอลัมน์มีการกำหนดความกว้างไว้
ด้วย width ในที่นี้ยกตัวอย่าง เราไม่ต้องการให้รายการขึ้นบรรทัดใหม่ โดยใช้ class "text-nowrap" เพื่มเข้าไป
ในคอลัมน์ข้อมูล ดังนี้
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 | <div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><table class="table table-sm table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">Col 1</th> <th scope="col">Col 2</th> <th scope="col" class="text-nowrap">Col 3 ยาวกว่าปกติ</th> <th scope="col">Col 4</th> <th scope="col">Col 5</th> </tr> </thead> <tbody> <?php for($i=1;$i<=5;$i++){ ?> <tr> <th scope="row"><?=$i?></th> <td class="text-nowrap">ข้อมูลคอลัมน์ 1</td> <td class="text-nowrap">ข้อมูลคอลัมน์ 2 </td> <td class="text-nowrap">ข้อมูลคอลัมน์ 3 ยาวกว่าปกติ</td> <td class="text-nowrap">ข้อมูล 4</td> <td class="text-nowrap">ข้อมูลคอลัมน์ 5 </td> </tr><?php }?> </tbody></table> |
รูปดังผลลัพธ์ข้างต้นจะเห็นว่า เมื่อเรากำหนด class "text-nowrap" เข้าไปใน <td> หรือ <th> ของข้อมูล
ทำให้ไม่มีการตัดข้อความลง ตารางจึงยืดออกในแนวนอน และข้อมูลถูกซ่อนไปโดยมี scrollbar ในแนวนอน
ดูรูปด้านล่าง กรณีเราเลื่อน scrollbar ไปด้านซ้าย
จะเห็นว่า ส่วนของเนื้อหา <div> ด้านบนที่เราทำไว้เพื่อทดสอบตรงข้อความ Content Test จะออกนอกขอบเขต
หน้าจอแสดงผล เกิดช่องว่างขึ้นด้านขวา ซึ่งเป็นสิ่งที่เราไม่ต้องการ เราต้องการให้ table responsive โดยสามารถ
เลื่อนดูข้อมูลตารางในแนวนอน โดยที่ส่วนอื่นไม่ขยับไปด้วย
วิธีการแก้ปัญหาคือ ให้เราทำการกำหนด <div> ที่มี class "table-responsive" คลุมส่วนของตาราง ดังนี้
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 | <div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><div class="table-responsive"><table class="table table-sm table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">Col 1</th> <th scope="col">Col 2</th> <th scope="col" class="text-nowrap">Col 3 ยาวกว่าปกติ</th> <th scope="col">Col 4</th> <th scope="col">Col 5</th> </tr> </thead> <tbody> <?php for($i=1;$i<=5;$i++){ ?> <tr> <th scope="row"><?=$i?></th> <td class="text-nowrap">ข้อมูลคอลัมน์ 1</td> <td class="text-nowrap">ข้อมูลคอลัมน์ 2 </td> <td class="text-nowrap">ข้อมูลคอลัมน์ 3 ยาวกว่าปกติ</td> <td class="text-nowrap">ข้อมูล 4</td> <td class="text-nowrap">ข้อมูลคอลัมน์ 5 </td> </tr><?php }?> </tbody></table></div> |
จะเห็นว่า เมื่อเราคลุมส่วนของตารางด้วย <div class="table-responsive"></div> เข้าไปแล้ว ถ้ามีการ
เลื่อนรายการตารางไปในแนวนอน ส่วนของ content text ไม่มีการเลื่อนตาม เกิด scrollbar เฉพาะในส่วน
ของตารางเท่านั้น
การใช้งาน "table-responsive" class จะทำให้ที่ขนาดหน้าจอใดๆ ถ้าหากว่าความกว้างหน้าจอนั้นๆ เกิดการซ่อน
ของรายการในตารางขึ้น หรือก็คือหน้าจอนั้น กว้างน้อยกว่าความกว้างของตารางที่จะแสดงได้ ตัวตารางก็จะแสดง
แบบ responsive ทันที
อย่างไรก็ตามเราสามารถกำหนด Breakpoint สำหรับใช้งาน table-responsive แบบเจาะจง ได้ในรูปแบบดังนี้
1 | .table-responsive{-sm|-md|-lg|-xl} |
ตัวอย่างเช่น
1 2 3 | <div class="table-responsive-sm"> <table>....</table></div> |
การใช้งานแบบระบุเจาะจง breakpoint ข้างต้น คือ ที่ขนาดหน้าจอ breakpoint ขึ้นไป ไม่ต้องใช้งาน table-responsive
อย่างสมมติที่ sm (576px) ก็คือ ถ้าหน้าจอมีขนาดตั้งแต่ 576px เป็นต้นไป ไม่ต้องใช้งาน table-responsive ให้แสดง
ตารางแบบปกติ
การยืนยันการลบข้อมูลในตาราง
หัวข้อนี้ จะเป็นแนวทางการแสดงข้อความยืนยัน ก่อนทำการลบข้อมูลในตาราง ซึ่งจริงๆ แล้วเราสามารถหา plugin
เกี่ยวกับการ alert สวยๆ มาใช้งานได้ แต่ในที่นี้เราจะใช้ confirm() ฟังก์ชั่น ซึ่งใช้งานง่ายและสะดวก เราจะสมมมติ
array ของรายการข้อมูล จากนั้นทำการวนลูปแสดงรายการ เพิ่มคอลัมน์จัดการ ที่มีปุ่ม ลบข้อมูล โดยในปุ่มลบข้อมูล
เรากำหนด class ชื่อ "btn-confirm" เป็น ชื่อที่เรากำหนดขึ้นมาเอง จะใช้ชื่ออื่นก็ได้ ซึ่งเราจะใช้ชื่อนี้อ้างอิงตอน
เรียกใช้งาน นอกจากนั้น ในปุ่ม เราสามารถที่กำหนด title เพื่อบอกว่าปุ่มนี้ใช้ทำอะไร ในที่นี้เรากำหนดเป็น
title="ลบรายการข้อมูล" ซึ่งถ้าไม่กำหนด ค่าที่จะไปแสดงใน confirm ก็จะเป็นค่าเริ่มต้นที่เรากำหนด
รูปแบบการทำงานของเราก็คือ เมื่อผู้ใช้กดปุ่ม ลบ ข้อมูล ก็ให้ขึ้นยืนยัน ว่าต้องการลบข้อมูลนี้จริงหรือไม่ และให้ทำ
การ highlight แถวของรายการที่กำลังจะลบ เพื่อแจ้งเตือนว่าเป็นแถวรายการที่ต้องการลบจริงหรือไม่ ดูโค้ดตัวอย่าง
ทั้งหมดด้านล่าง (สามารถดูตัวอย่าง ที่ DEMO 1 ท้ายบทความ)
demo.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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> </head><body> <?php$arr_simple_data = array( array("id"=>1,"title"=>"รายการทดสอบ 1"), array("id"=>2,"title"=>"รายการทดสอบ 2"), array("id"=>3,"title"=>"รายการทดสอบ 3"), array("id"=>4,"title"=>"รายการทดสอบ 4"), array("id"=>5,"title"=>"รายการทดสอบ 5"),);?><div class="container mb-2"><div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><div class="table-responsive-sm"><table class="table table-sm table-hover"> <thead> <tr> <th scope="col" class="text-center">#</th> <th scope="col">หัวข้อ</th> <th scope="col" class="text-center">จัดการ</th> </tr> </thead> <tbody> <?php foreach($arr_simple_data as $row){ ?> <tr class=""> <th scope="row" class="text-center" width="40"><?=$row['id']?></th> <td class="text-nowrap"> <?=$row['title']?> </td> <td class="text-nowrap text-center" width="40"> <a href="?d_item_id=<?=$row['id']?>" title="ลบรายการข้อมูล" class="btn btn-sm btn-danger btn-confirm">ลบ</a> </td> </tr><?php }?> </tbody></table></div></div> <script type="text/javascript">$(function(){ $(".btn-confirm").on("click",function(){ var obj = $(this); // อ้างอิงปุ่ม obj.parents("tr").toggleClass("table-danger"); // เปลี่ยนสีพื้นหลังแถวที่จะลบ // ถ้ามีการกำหนด title ใช้ข้อความใน title มาข้นแจ้ง ถ้าไม่มีใช้ค่าที่กำหนด "ลบรายการข้อมูล" var alertMsg = (obj.attr("title")!=undefined)?obj.attr("title"):"ลบรายการข้อมูล"; setTimeout(function(){ // หน่วงเวลาเพื่อให้ การกำหนดสีพืนหลังแถวทำงานได้ if(!confirm("ยืนยันการทำรายการ "+alertMsg+" ?")){ obj.parents("tr").toggleClass("table-danger"); // ไม่ยืนยันการลบ เปลี่ยนสีพื้นหลังกลับ }else{ window.location = obj.attr("href"); // ถ้ายืนยันการลบ ก็ให้ลิ้งค์ทำงาน } },100); // หน่วงเวลา 100 มิลลิวินาที return false; // ไม่ให้ลิ้งค์ทำงานปกติ ให้เข้าไปในเงื่อนไข confirm แทน }); });</script></body></html> |
รูปแบบการเรียกใช้งานในส่วนของ javascript ข้างต้น เราสามารถสร้างไว้ใน include ไฟล์ แล้วนำไปใช้ในหน้าต่างๆ
ที่มีการลบรายการข้อมูลในแถวได้ ทันที เพียงแค่กำหนด class "btn-confirm" ให้กับปุ่มลบข้อมูล และกำหนด title
ว่าต้องการแจ้งการยืนยันการทำรายการอะไร เมื่อมีการคลิกที่ปุ่มลิ้งค์นั้นๆ ก็จะขึ้นแจ้งให้ยืนยันการทำรายการ
การใช้งาน Checkbox Button เพื่ออัพเดทสถานะ
อีกรูปแบบการใช้งานในตารางที่เรามักพบก็คือ การปิดเปิดสถานะใดๆ ของรายการข้อมูล ทั้งนี้เพราะ การเพิ่ม
checkbox เพื่อให้ผู้ใช้สามารถแก้ไข สถานะของรายการนั้นได้ ทันที โดยไม่ต้องไปอัพเดทในหน้าแก้ไขข้อมูล
จะทำให้ทำงานได้สะดวกขึ้น ยกตัวอย่าง เราจะเพิ่มสถานะของรายการเข้าไป เป็น "ใช้งาน" กับ "ปิดใช้งาน" โดย
ให้ค่าเป็น 1 และ 0 ตามลำดับ ลงไปในข้อมูลทดสอบ (สามารถดูตัวอย่าง ที่ DEMO 2 ท้ายบทความ)
demo.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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> </head><body> <?php$arr_simple_data = array( array("id"=>1,"title"=>"รายการทดสอบ 1","status"=>0), array("id"=>2,"title"=>"รายการทดสอบ 2","status"=>0), array("id"=>3,"title"=>"รายการทดสอบ 3","status"=>1), array("id"=>4,"title"=>"รายการทดสอบ 4","status"=>0), array("id"=>5,"title"=>"รายการทดสอบ 5","status"=>0),);?><div class="container mb-2"><div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><div class="table-responsive-sm"><table class="table table-sm table-hover"> <thead> <tr> <th scope="col" class="text-center">#</th> <th scope="col">หัวข้อ</th> <th scope="col" class="text-center">สถานะ</th> <th scope="col" class="text-center">จัดการ</th> </tr> </thead> <tbody> <?php foreach($arr_simple_data as $row){ ?> <tr class=""> <th scope="row" class="text-center" width="40"><?=$row['id']?></th> <td class="text-nowrap"> <?=$row['title']?> </td> <td class="text-nowrap text-center" width="50"> <div class="btn-group-toggle btn-status-check" data-toggle="buttons"> <label class="btn btn-sm <?=($row['status']==1)?"btn-success":"btn-light"?>"> <input type="checkbox" <?=($row['status']==1)?"checked":""?> value="<?=$row['id']?>" > ใช้งาน </label> </div> </td> <td class="text-nowrap text-center" width="40"> <a href="?d_item_id=<?=$row['id']?>" title="ลบรายการข้อมูล" class="btn btn-sm btn-danger btn-confirm">ลบ</a> </td> </tr><?php }?> </tbody></table></div></div> <script type="text/javascript">$(function(){ $(".btn-status-check").on("click",function(){ var obj = $(this); var checkStatus = obj.find(":checkbox").prop("checked"); var dataID = obj.find(":checkbox").val(); var checkVal = (checkStatus)?0:1; // สลับจากค่าเดิม ถ้าเดิมถูกเลือก แสดง่ว่าเป็น 1 ต้องสลับเป็น 0 setTimeout(function(){ // หน่วงเวลานิดหน่อย เพื่อให้บางค่าอัพเดทถูกต้อง if(checkStatus){ // ถ้าเดิมมีการเลือกไว้อยู่แล้ว หรือในที่นี้มีสถานะเป็น 1 // สถานะจะสลับเป็น 0 หรือถุกติ้กออก obj.find("label").addClass("btn-light").removeClass("btn-success active"); obj.find("label :checkbox").prop("checked",false); }else{ // ถ้าเดิมยังไม่ถูกเลือก // สถานะจะสลับเป็น 1 หรือถุกติ้กเลือก obj.find("label").addClass("btn-success").removeClass("btn-light active"); obj.find("label :checkbox").prop("checked",true); } console.log(dataID); // ค่า id ของรายการที่เราจะอัพเดท console.log(checkVal); // ค่าการกำหนดสถานะใหม่ 1 หรือ 0 // นำค่า id และ ค่าสถานะ 1 และ 0 ไปอัพเดทผ่าน ajax },5); // หน่างเวลา 5 มิลลิวินาที }); $(".btn-confirm").on("click",function(){ var obj = $(this); // อ้างอิงปุ่ม obj.parents("tr").toggleClass("table-danger"); // เปลี่ยนสีพื้นหลังแถวที่จะลบ // ถ้ามีการกำหนด title ใช้ข้อความใน title มาข้นแจ้ง ถ้าไม่มีใช้ค่าที่กำหนด "ลบรายการข้อมูล" var alertMsg = (obj.attr("title")!=undefined)?obj.attr("title"):"ลบรายการข้อมูล"; setTimeout(function(){ // หน่วงเวลาเพื่อให้ การกำหนดสีพืนหลังแถวทำงานได้ if(!confirm("ยืนยันการทำรายการ "+alertMsg+" ?")){ obj.parents("tr").toggleClass("table-danger"); // ไม่ยืนยันการลบ เปลี่ยนสีพื้นหลังกลับ }else{ window.location = obj.attr("href"); // ถ้ายืนยันการลบ ก็ให้ลิ้งค์ทำงาน } },100); // หน่วงเวลา 100 มิลลิวินาที return false; // ไม่ให้ลิ้งค์ทำงานปกติ ให้เข้าไปในเงื่อนไข confirm แทน }); });</script></body></html> |
ตัวอย่างส่วนของโค้ดสำหรับนำค่าไปอัพเดทสถานะในฐานข้อมูล ตัดมาเฉพาะส่วนของ javascript
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 | $(".btn-status-check").on("click",function(){ var obj = $(this); var checkStatus = obj.find(":checkbox").prop("checked"); var dataID = obj.find(":checkbox").val(); var checkVal = (checkStatus)?0:1; // สลับจากค่าเดิม ถ้าเดิมถูกเลือก แสดง่ว่าเป็น 1 ต้องสลับเป็น 0 setTimeout(function(){ if(checkStatus){ // ถ้าเดิมมีการเลือกไว้อยู่แล้ว หรือในที่นี้มีสถานะเป็น 1 // สถานะจะสลับเป็น 0 หรือถุกติ้กออก obj.find("label").addClass("btn-light").removeClass("btn-success active"); obj.find("label :checkbox").prop("checked",false); }else{ // ถ้าเดิมยังไม่ถูกเลือก // สถานะจะสลับเป็น 1 หรือถุกติ้กเลือก obj.find("label").addClass("btn-success").removeClass("btn-light active"); obj.find("label :checkbox").prop("checked",true); } console.log(dataID); // ค่า id ของรายการที่เราจะอัพเดท console.log(checkVal); // ค่าการกำหนดสถานะใหม่ 1 หรือ 0 // ตัวอย่างสมมติเราส่งแบบ ajax ไปที่ไฟล์ ajax_status_json.php $.post("ajax_status_json.php",{ data_id:dataID, check_val:checkVal },function(res){ if(res && res!=null){ if(res.status_code==1){ console.log("อัพเดทข้อมูลเรียบร้อยแล้ว"); } } }); },5); }); |
ไฟล์ dbconnect.php
1 2 3 4 5 6 7 8 9 10 11 | <?php$mysqli = new mysqli("localhost", "root","","test"); /* check connection */if ($mysqli->connect_errno) { printf("Connect failed: %s\n", $mysqli->connect_error); exit(); } if(!$mysqli->set_charset("utf8")) { printf("Error loading character set utf8: %s\n", $mysqli->error); exit(); } |
ตัวอย่างไฟล์ ajax_staus_json.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 | <?phpsession_start();header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); require_once("dbconnect.php");$json_data = array();if(isset($_POST['data_id']) && $_POST['data_id']!="" && !is_null($_POST['check_val']) ){ $data_id = (int) $_POST['data_id']; $data_checkval = (int) $_POST['check_val']; $sql = " UPDATE simple_table SET item_active='".$data_checkval."' WHERE item_id='".$data_id."' "; if($mysqli->query($sql)){ $json_data = array( "status_code"=>1, "status_message"=>"successful" ); }else{ $json_data = array( "status_code"=>0, "status_message"=>"fail" ); }}else{ $json_data = array( "status_code"=>0, "status_message"=>"fail" ); } // แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_data); if(isset($_POST['callback']) && $_POST['callback']!=""){ echo $_POST['callback']."(".$json.");"; }else{ echo $json; } }?> |
การซ่อนแสดงข้อมูลเพิ่มเติมในตาราง
ก่อนจบเนื้อหา ขอเพิ่มเติมเทคนิคเล็กน้อย สำหรับการแสดงข้อมูลเพิ่มเติมในตาราง ที่บางครั้งเราจำเป็นต้อง
แสดงข้อมูลบางอย่างในตาราง แต่เราไม่ต้องการที่จะแสดงข้อมูลนั้นๆ ทันที แต่จะซ่อนไว้ก่อน หากต้องการแสดง
ข้อมูลของรายการใด ให้ผู้ใช้คลิกเลือกที่รายการนั้น รายการข้อมูลเพิ่มเติมก็จะแสดง หากคลิกอีกทีข้อมูลก็จะถูกซ่อน
ไป วิธีการนี้ เราใช้เทคนิค jquery อย่างง่ายคือ เรียกใช้ css class "d-none" สำหรับ ซ่อนรายการ และ "d-table-row"
สำหรับแสดงแถวรายการ (สามารถดูตัวอย่าง ที่ DEMO 3 ท้ายบทความ)
demo.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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> </head><body> <?php$arr_simple_data = array( array("id"=>1,"title"=>"รายการทดสอบ 1","status"=>0), array("id"=>2,"title"=>"รายการทดสอบ 2","status"=>0), array("id"=>3,"title"=>"รายการทดสอบ 3","status"=>1), array("id"=>4,"title"=>"รายการทดสอบ 4","status"=>0), array("id"=>5,"title"=>"รายการทดสอบ 5","status"=>0),);?><div class="container mb-2"><div class="row bg-light py-3"> <div class="col text-center"> Content Test </div></div><div class="table-responsive-sm"><table class="table table-sm table-hover"> <thead> <tr> <th scope="col" class="text-center">#</th> <th scope="col">หัวข้อ</th> <th scope="col" class="text-center">สถานะ</th> <th scope="col" class="text-center">จัดการ</th> </tr> </thead> <tbody> <?php foreach($arr_simple_data as $row){ ?> <tr class=""> <th scope="row" class="text-center" width="40"><?=$row['id']?></th> <td class="text-nowrap" onClick="$('#item-<?=$row['id']?>').toggleClass('d-none d-table-row')"> <?=$row['title']?> </td> <td class="text-nowrap text-center" width="50"> <div class="btn-group-toggle btn-status-check" data-toggle="buttons"> <label class="btn btn-sm <?=($row['status']==1)?"btn-success":"btn-light"?>"> <input type="checkbox" <?=($row['status']==1)?"checked":""?> value="<?=$row['id']?>" > ใช้งาน </label> </div> </td> <td class="text-nowrap text-center" width="40"> <a href="?d_item_id=<?=$row['id']?>" title="ลบรายการข้อมูล" class="btn btn-sm btn-danger btn-confirm">ลบ</a> </td> </tr> <tr class="d-none" id="item-<?=$row['id']?>"> <td colspan="4" class="bg-light"> <?=$row['title']?> </td> </tr><?php }?> </tbody></table></div></div> <script type="text/javascript">$(function(){ $(".btn-status-check").on("click",function(){ var obj = $(this); var checkStatus = obj.find(":checkbox").prop("checked"); var dataID = obj.find(":checkbox").val(); var checkVal = (checkStatus)?0:1; // สลับจากค่าเดิม ถ้าเดิมถูกเลือก แสดง่ว่าเป็น 1 ต้องสลับเป็น 0 setTimeout(function(){ if(checkStatus){ // ถ้าเดิมมีการเลือกไว้อยู่แล้ว หรือในที่นี้มีสถานะเป็น 1 // สถานะจะสลับเป็น 0 หรือถุกติ้กออก obj.find("label").addClass("btn-light").removeClass("btn-success active"); obj.find("label :checkbox").prop("checked",false); }else{ // ถ้าเดิมยังไม่ถูกเลือก // สถานะจะสลับเป็น 1 หรือถุกติ้กเลือก obj.find("label").addClass("btn-success").removeClass("btn-light active"); obj.find("label :checkbox").prop("checked",true); } console.log(dataID); // ค่า id ของรายการที่เราจะอัพเดท console.log(checkVal); // ค่าการกำหนดสถานะใหม่ 1 หรือ 0 },5); }); $(".btn-confirm").on("click",function(){ var obj = $(this); // อ้างอิงปุ่ม obj.parents("tr").toggleClass("table-danger"); // เปลี่ยนสีพื้นหลังแถวที่จะลบ // ถ้ามีการกำหนด title ใช้ข้อความใน title มาข้นแจ้ง ถ้าไม่มีใช้ค่าที่กำหนด "ลบรายการข้อมูล" var alertMsg = (obj.attr("title")!=undefined)?obj.attr("title"):"ลบรายการข้อมูล"; setTimeout(function(){ // หน่วงเวลาเพื่อให้ การกำหนดสีพืนหลังแถวทำงานได้ if(!confirm("ยืนยันการทำรายการ "+alertMsg+" ?")){ obj.parents("tr").toggleClass("table-danger"); // ไม่ยืนยันการลบ เปลี่ยนสีพื้นหลังกลับ }else{ window.location = obj.attr("href"); // ถ้ายืนยันการลบ ก็ให้ลิ้งค์ทำงาน } },100); // หน่วงเวลา 100 มิลลิวินาที return false; // ไม่ให้ลิ้งค์ทำงานปกติ ให้เข้าไปในเงื่อนไข confirm แทน }); });</script></body></html> |
หวังว่าเนื้อหาข้างต้นจะเป็นแนวทางสำหรับนำไปประยุกต์ใช้งานต่อไป
