เนื้อหาตอนที่ 7 นี้ จะศึกษาเกี่ยวกับการใช้งาน ตารางใน jQuery Mobile
โดยเริ่มที่
รู้จักกับ Column toggle
Column toggle เป็นการกำหนด ให้เราสามารถที่จะเลือกแสดง หรือไม่แสดง คอลัมน์
ในตารางได้ รวมทั้งยังสามารถแสดง popup เลือกซ่อน หรือแสดง คอลัมน์ ในตารางได้
เริ่ม การสร้างตาราง และการใช้งาน ทดสอบจากเริ่มต้น
เราจะสร้าง ตาราง 5 คอลัมน์ 10 แถว โดยใช้ 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 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header" data-position="fixed"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li> <li><a href="#" data-icon="calendar">เมนู 2</a></li> <li><a href="#" data-icon="audio">เมนู 3</a></li> <li><a href="#" data-icon="alert">เมนู 4</a></li> <li><a href="#" data-icon="gear">เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <table> <thead> <tr> <th># </th> <th>ชื่อ</th> <th>ราคา</th> <th>ราคา</th> <th>จำนวน</th> </tr> </thead> <tbody> <?php for($i=1;$i<=10;$i++){ ?> <tr> <td><?=$i?></td> <td>สินค้ารายการที่ <?=$i?></td> <td><?=date("d-m-Y")?> บาท </td> <td><?=$i*100?> บาท </td> <td><?=$i?> รายการ</td> </tr> <?php } ?> </tbody> </table> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --></div><!-- /page --></body></html> |
จากโค้ดตาราง ด้านบน เราจะเพิ่มคุณสมบัติ column chooser ให้กับตาราง
โดยต้องกำหนด attributes 2 ค่า ได้แก่
data-role="table" และ data-mode="columntoggle"
นอกจากนั้น เราควรกำหนด id ของ ตาราง เพื่อให้สัมพันธ์กับการใช้งาน
ในการสร้าง popup เลือกแสดงคอลัมน์
ก็จะได้เป็น
<table data-role="table" data-mode="columntoggle" id="my_table" >
ส่วนของ การซ่อน หรือแสดง คอลัมน์
ปกติ ถ้าไม่มีการกำหนดค่าใดๆ คอลัมน์ทั้งหมด จะแสดงปกติ
หากต้องซ่อนคอลัมน์ใด และให้แสดงใน popup เป็นตัวเลือกซ่อนหรือแสดง แทน ให้กำหนด
data-priority="1" ในส่วนของ th ของหัวข้อคอลัมน์
ตัวเลข 1 คือการกำหนด ความสำคัญในการแสดง ของคอลัมน์นั้น กรณีกำหนดตางเป็นแบบ
responsive หรือยืดหยุ่น ตามขนาดหน้าจอ
โดยมีค่าตั้งแต่ 1 - 6 แสดงถึง ความสำคัญ มากสุด ไป น้อยสุด
ซึ่งกรณีกำหนด ui-responsive จะอธิบายในลำดับต่อๆ ไป
สำหรับคอลัมน์ที่ไม่ได้กำหนด data-priority ก็จะแสดงในตาราง ตลอด และไม่แสดงใน
popup เลือก การซ่อน หรือแสดง คอลัมน์
โค้ด
1 2 3 4 5 6 7 8 9 | <thead> <tr> <th># </th> <th>ชื่อ</th> <th data-priority="2">วันที่</th> <th>ราคา</th> <th data-priority="1">จำนวน</th> </tr></thead> |
อธิบาย
คอลัมน์ที่ 1 2 และ 4 จะแสดงในตารางตลอด และไม่แสดงใน popup
คอลัมน์ที่ 3 และ 5 จะไม่แสดง แต่จะแสดงให้เลือก ใน popup
ตัวอย่าง
โค้ด
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 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header" data-position="fixed"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li> <li><a href="#" data-icon="calendar">เมนู 2</a></li> <li><a href="#" data-icon="audio">เมนู 3</a></li> <li><a href="#" data-icon="alert">เมนู 4</a></li> <li><a href="#" data-icon="gear">เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <table data-role="table" data-mode="columntoggle" id="my_table" > <thead> <tr> <th># </th> <th>ชื่อ</th> <th data-priority="2">วันที่</th> <th>ราคา</th> <th data-priority="1">จำนวน</th> </tr> </thead> <tbody> <?php for($i=1;$i<=10;$i++){ ?> <tr> <td><?=$i?></td> <td>สินค้ารายการที่ <?=$i?></td> <td><?=date("d-m-Y")?> บาท </td> <td><?=$i*100?> บาท </td> <td><?=$i?> รายการ</td> </tr> <?php } ?> </tbody> </table> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --></div><!-- /page --></body></html> |
มาดูต่อ ส่วนของการกำหนดตารางแบบ responsive และความสัมพันธ์กับการใช้งาน
data-priority
เราจะกำหนดให้ตารางเป็นแบบ responsive โดยเพิ่มคลาส class="ui-responsive" ในตาราง
จะได้เป็น
<table data-role="table" data-mode="columntoggle" id="my_table" class="ui-responsive">
สำหรับตารางที่กำหนด class="ui-responsive" ถึงแม้จะกำหนด การซ่อน คอลัมน์ด้วย data-priority
แต่หากหน้าจอมีขนาดใหญ่ จำนวนคอลัมน์ก็จะแสดง ข้อมูล ตามความกว้างของหน้าจอ และการกำหนด
ความสำคัญของ data-priority
ตัวอย่าง
โค้ด
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 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header" data-position="fixed"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li> <li><a href="#" data-icon="calendar">เมนู 2</a></li> <li><a href="#" data-icon="audio">เมนู 3</a></li> <li><a href="#" data-icon="alert">เมนู 4</a></li> <li><a href="#" data-icon="gear">เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <table data-role="table" data-mode="columntoggle" id="my_table" class="ui-responsive" > <thead> <tr> <th># </th> <th>ชื่อ</th> <th data-priority="2">วันที่</th> <th>ราคา</th> <th data-priority="1">จำนวน</th> </tr> </thead> <tbody> <?php for($i=1;$i<=10;$i++){ ?> <tr> <td><?=$i?></td> <td>สินค้ารายการที่ <?=$i?></td> <td><?=date("d-m-Y")?> บาท </td> <td><?=$i*100?> บาท </td> <td><?=$i?> รายการ</td> </tr> <?php } ?> </tbody> </table> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --></div><!-- /page --></body></html> |
คำอธิบาย
จะเห็นว่า ตารางมีการกำหนด class="ui-responsive" ซึ่งมีผลต่อคอลัมน์ ที่ 5
จากที่ หากไม่กำหนดเป็น responsive คอลัมน์ ที่ 5 จะไม่แสดงในตาราง แต่แสดงใน popup
แต่เมื่อมีการกำหนดเป็น responsive คอลัมน์ ที่ 5 จะแสดง ตามขนาดของหน้าจอ
ที่ยังพอให้คอลัมน์อีก 1 คอลัมน์แสดงข้อมูลได้
ข้อสงสัยเพิ่มเติม ในเมื่อ คอลัมน์ที่ 3 และ 5 กำหนด data-priority อะไรคือตัวเลือก
ที่จะแสดงหรือไม่แสดง ของ 2 คอลัมน์นี้
ตอบ ตำเลขความสำคัญที่กำหนดเข้าไป 1 มีค่าความสำคัญ มากกว่า 2
ตารางจึงเลือกแสดง คอลัมน์ที่ 5 ที่มีความสำคัญมากว่าก่อน แบบนี้ เป็นต้น
ดูเพิ่มเติมกับการกำหนดในตาราง ตามค่าต่อไปนี้
ส่วนของ class
ui-responsive คลาสสำหรับ กำหนดให้ตารางเป็นเแบบ responsive
table-stripe คลาสสำหรับ กำหนดการสลับสี แถวในตาราง
table-stroke คลาสสำหรับ กำหนดให้มีเส้นค้นระหว่างแถวในตาราง
ui-body-a คลาสสำหรับ กำหนดสี theme ให้ตาราง
ui-shadow คลาสสำหรับกำหนด การแสดงแบบมีเงา
ส่วนของ attributes
data-column-popup-theme="a" กำหนด theme ให้กับ popup เลือกคอลัมน์
data-column-btn-theme="b" กำหนด theme ของ ปุ่ม แสดง popup
data-column-btn-text="แสดงคอลัมน์.." กำหนด ข้อความ ปุ่ม แสดง popup
ตัวอย่าง
โค้ด
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 | <!DOCTYPE html> <html><head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head><body><!-- Start of page HOME --><div data-role="page" id="page_home"> <div data-role="header" data-position="fixed"> <a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a> <h1>Home</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="heart">เมนู 1</a></li> <li><a href="#" data-icon="calendar">เมนู 2</a></li> <li><a href="#" data-icon="audio">เมนู 3</a></li> <li><a href="#" data-icon="alert">เมนู 4</a></li> <li><a href="#" data-icon="gear">เมนู 5</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> <div data-role="content"> <table data-role="table" data-mode="columntoggle" id="my_table" class="ui-body-a ui-shadow ui-responsive table-stripe " data-column-btn-text="แสดงคอลัมน์.." data-column-popup-theme="a" data-column-btn-theme="b" > <thead> <tr> <th># </th> <th>ชื่อ</th> <th data-priority="2">วันที่</th> <th>ราคา</th> <th data-priority="1">จำนวน</th> </tr> </thead> <tbody> <?php for($i=1;$i<=10;$i++){ ?> <tr> <td><?=$i?></td> <td>สินค้ารายการที่ <?=$i?></td> <td><?=date("d-m-Y")?> บาท </td> <td><?=$i*100?> บาท </td> <td><?=$i?> รายการ</td> </tr> <?php } ?> </tbody> </table> </div><!-- /content --> <div data-role="panel" id="left_panel" data-display="push"> <ul data-role="listview" data-icon="false" data-divider-theme="a"> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 1</a></li> <li><a href="#">เมนูที่ 2</a></li> <li><a href="#">เมนูที่ 3</a></li> <li><a href="#">เมนูที่ 4</a></li> <li data-role="list-divider">หัวข้อแบ่ง</li> <li><a href="#">เมนูที่ 6</a></li> <li><a href="#">เมนูที่ 7</a></li> </ul> </div><!-- /panel --> <div data-role="footer" data-position="fixed"> <h4>ส่วน footer ใส่ตามใจชอบ</h4> </div><!-- /footer --></div><!-- /page --></body></html> |
โปรดติดตามเนื้อหาตอนต่อไป
