ก่อนอื่นมันเป็นรูปแบบหน้าง่าย คุณสามารถสร้างตาราง HTML ในวิธีการวาดตารางตามปกติจากนั้นควบคุมสไตล์พิเศษและการดำเนินการอื่น ๆ ผ่าน JS (ข้อดีคือตารางนั้นใช้งานง่ายกว่าและสะดวกในการปรับรูปแบบตาราง ฯลฯ และความเร็วเร็ว)
แน่นอนคุณสามารถใส่แท็กตารางบนหน้าและข้อมูลและสไตล์ที่ตามมาทั้งหมดสามารถควบคุมได้ผ่าน JS ฉันจะบอกในภายหลัง (ข้อดีนั้นสะดวกในการควบคุมและแก้ไขข้อมูลโดยเฉพาะอย่างยิ่งรูปแบบ JSON ที่ได้จากวิธี AJAX แต่การปรับสไตล์นั้นลำบากมากขึ้น)
PS: นี่คือเว็บไซต์อย่างเป็นทางการของปลั๊กอินซึ่งมี API ภาษาอังกฤษและตัวอย่าง: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
นอกจากนี้ก่อนที่จะใช้โปรดแนะนำ CSS, JS, JSS, JQuery และ CSS ที่เกี่ยวข้องกับ Bootstrap, JS อย่างน้อย 5 ไฟล์พื้นฐานเหล่านี้
1. วิธีการฟอร์ม HTML
ตัวอย่างที่ 1: ข้อกำหนดการนำเสนอข้อมูลตารางอย่างง่ายส่วนหัวคือสองแถวและมีลูกศรที่ลอยขึ้นและลง
การวิเคราะห์: มันง่ายมาก คุณต้องการ HTML เพื่อนำไปใช้เท่านั้น วาดตามตารางปกติและเพิ่มแอตทริบิวต์ที่กำหนดเองที่ไม่ซ้ำกันของโต๊ะ bootstrap โปรดทราบว่าหากคุณไม่ได้ใช้ JS โปรดเพิ่ม data-toggle ลงในแท็กตารางเริ่มต้น
รหัส HTML:
<div> <table data-toggle = "table" data-height = "268" id = "tablel01"> <thead> <tr> <th data-field = "lhc" data-rowspan = "2" data-align = "center" data-valign = "Middle"> data-valign = "middle"> วันนี้ </th> <th data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "middle"> ในสัปดาห์นี้ </th> <th data-field = "โดย" that-colspan = "3" data-field = "drbq" data-align = "center" data-valign = "middle"> ปัญหานี้ </th> <th data-field = "drtb" data-allign = "center" data-valign = "middle"> ปี </th> <thata-field = "data-field =" data-field data-align = "center" data-valign = "middle"> ปัญหานี้ </th> <th data-field = "bztb" data-allign = "center" data-valign = "กลาง"> ปี </th> <th data-field = "bzhb" data-allign = data-valign = "middle"> ปัญหานี้ </th> <th data-field = "bytb" data-align = "center" data-valign = "กลาง"> ปี </th> <th data-field = "byhb" data-align = "center" data-valign = "Middle" Volume </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-uplow-up'> </i> 4.21 </td> <td> 3125113 </td> Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-uplow-up '> </i> 2.94 </td> </tr> <td> glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 1.45 </td> <td> 234534 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 4.35 </td> <td> glyphicon-arrow-up '> </i> 2.75 </td> <td> 44225 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 0.74 </td> <td> Glyphicon-arrow-up '> </i> 3.45 </td> </tr> <tr> <td> การบริโภคถ่านหิน </td> <td> 43363 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 32422 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-uplow-up '> </i> 4.21 </td> <td> 13345 </td> <td> class = 'glyphicon glyphicon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> ปริมาณถ่านหินที่เข้ามา </td> <td> 34624 </td> <td> <i class = 'glyphicon glyphicon-arrow-down class = 'glyphicon glyphicon-arrow-up'> </i> 1.23 </td> <td> 452346 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.32 </td> glyphicon-arrow-up '> </i> 0.05 </td> <td> 94524 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> การบริโภคถ่านหิน </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-uplow-up '> </i> 2.94 </td> </tr> <td> glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up ' การบริโภค </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> การบริโภคถ่านหิน </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-uplow-up '> </i> 2.94 </td> </tr> <td> glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> การบริโภคถ่านหิน </td> <td> 21341 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> glyphicon-arrow-up '> </i> 2.94 </td> </tbody> </table> </div>
ตัวอย่างที่ 2: ข้อกำหนด: มีเซลล์ที่กำหนดเองที่แสดงความคืบหน้าหลังจากตารางที่สองและแถวแรกต้องมีการแสดงผลทางสถิติทั้งหมด ฟังก์ชั่นทั้งสองนี้จำเป็นต้องใช้ JS เพื่อตั้งค่าแถวและคอลัมน์ที่กำหนดเอง
รหัส HTML:
<div> <table data-toggle = "table" data-height = "268" id = "tablel02"> <thead> <tr> <th data-field = "id" data-allign = "center" data-valign = "Middle"> หมายเลข serial = "thiel-field data-align = "center" data-valign = "middle"> วาไรตี้ </th> <th data-field = "rz" data-allign = "center" data-valign = "กลาง"> ค่าคาร์บอน </th> <th data-field = "MJ" Data-allign = "Center" data-valign = "กลาง" data-valign = "กลาง"> หน่วยถ่านหิน </th> <th data-field = "drlm" data-align = "center" data-valign = "กลาง"> ถ่านหินสะสม </th> <th data-field = "ljlm" data-field = "center" data-valign = "Middle" data-valign = "กลาง"> ปริมาณการวางแผนรายเดือน </th> <th data-field = "yjhjd" data-align = "center" data-valign = "กลาง" data-formatter = "ความคืบหน้า"> ความคืบหน้าการวางแผนรายเดือน การขุด </td> <td> ซัลเฟอร์ต่ำ ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> Ltd. </td> <td> วิศวกรรมถ่านหิน </td> <td> </td> <td> </td> <td> 51888 .72 </td> <td> 70000 </td> <td> 74%</td> </td> ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100%</td> </td> <td> 5 </td> <td> <td> ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0%</td> </td> <td> <td> 6 </td> <td> ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22%</td> </td> <td> <td> ซัลเฟอร์ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </td> <td> การขุด </td> <td> ซัลเฟอร์ต่ำ ถ่านหิน </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> การขุด </td> <td> ถ่านหินซัลเฟอร์ต่ำ </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td>
รหัส JS:
// ประกาศตัวแปรที่ใช้นับรวม (ถ่านหินสะสม, แผนรายเดือน) var yjharr = []; var ljlmarr = []; // ความคืบหน้าของฟังก์ชันคอลัมน์ที่กำหนดเอง (ค่า, แถว) {var width = parseint (row.yjhjd); var red = '#e63737'; blue = ' #b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'ความสูง: 20px; เส้นขอบ: 1px ของแข็ง #b6ccf4;'> <span style = 'display: block; (ความกว้าง> = 100? สีแดง: สีน้ำเงิน)+"; '>"+ค่า+"</span> </div>"} // วิธีการคำนวณฟังก์ชันค่ารวม yjhtotal () {var subyjh = 0; var subljlm = 0; var row = []; i = 0; i <yjharr.length; i ++) {ถ้า (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} สำหรับ (var (var i = 0; i <yjharr.length; i ++) {ถ้า (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} สำหรับ (var (var j = 0; j <ljlmarr.length; j ++) {ถ้า (ljlmarr [j] == "") {ljlmarr [j] = 0;} subljlm+= parsefloat (ljlmarr [j]); 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm.tofixed (2), yjhl: subyjh, yjhjd: '107%'}; แถว}การวิเคราะห์: แถวและคอลัมน์ที่กำหนดเองจำเป็นต้องเพิ่ม data-formatter = 'ชื่อวิธี' โดยที่แถวพารามิเตอร์ในเมธอด Progress () จะถูกดำเนินการเมื่อทุกแถวถูกสร้างขึ้นและวัตถุของแถวจะถูกส่งผ่านเมื่อตารางสร้างแถว
สอง: วิธี JS
ด้วยวิธีนี้มันสะดวกมากในการตั้งค่าพารามิเตอร์สำหรับตารางซึ่งสะดวกมากในการประมวลผลข้อมูลโดยเฉพาะอย่างยิ่งเมื่อตั้งค่าวิธีการร้องขอและที่อยู่ อย่างไรก็ตามโครงการนี้เป็นเพียงหน้าคงที่ในขณะนี้ กรุณาเขียนข้อมูลในอนาคต
ตัวอย่างที่ 1: เหมือนกับข้างบน
html:
<div> <table id = "tablel01"> </bable> </div>
JS:
// table plugin (ตารางที่ 1) เริ่ม $ ('#tablel01'). bootstraptable ({ความสูง: 268, // คอลัมน์ข้อมูลจำลอง: [[{Align: 'center', valign: 'กลาง', ฟิลด์: 'lhc', ชื่อ: 'Day', Colspan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'Bz', ชื่อ: 'สัปดาห์นี้', Colspan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'By', ชื่อ: 'เดือนนี้' ปัญหา '}, {Align:' Center ', Valign:' Middle ', Field:' Drtb ', ชื่อ:' Year-on-Year ', Formatter: Trend}, {Align:' Center ', Valign:' Middle ', Field:' Drhb ', ชื่อ:' Momentum ' {Align: 'Center', Valign: 'Middle', Field: 'Bztb', ชื่อเรื่อง: 'ปีต่อปี', Formatter: Trend}, {Align: 'Center', Valign: 'Middle', Field: 'Bzhb', ชื่อ: 'Moon-Month' ปัญหา '}, {Align:' Center ', Valign:' Middle ', Field:' Bytb ', ชื่อ:' Year-on-Year ', Formatter: Trend}, {Align:' Center ', Valign:' Middle ', Field:' Bytb ', ชื่อ: 'mono-month', formatter: trend}]], data: [{id: 1, lhc: 'กำลังจะมา สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', d rhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq :::::' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1 สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', d rbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' สต็อก ', drbq:' 21341 ', drtb:' 0.21 ', drhb:' 0.33 ', bzbq:' 35624 ', bztb:' 1.62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb:' 2.78 ' แนวโน้มสไตล์ลูกศรลอยตัวขึ้นและลง (ค่าแถว) {var trendicon = row.id%2 === 0?การวิเคราะห์: $ ('#TABLEL01'). Bootstraptable ({}) เป็นธงที่จุดเริ่มต้นของปลั๊กอินเพิ่มพารามิเตอร์ตารางและจากนั้นในข้อมูล: เป็นข้อมูลตารางและในคอลัมน์มันเป็นสถานที่ที่พารามิเตอร์คอลัมน์และข้อมูลตารางถูกตั้งค่า สิ่งที่เป็นตัวแทนเกี่ยวกับรายการนี้คือส่วนหัวของตารางแบ่งออกเป็นสองส่วนดังนั้นจึงต้องเพิ่มสองอาร์เรย์ลงในคอลัมน์ [{}] และ [{}] ทั้งหมดของพวกเขาถูกเขียนในอาร์เรย์ก่อนและซอร์สโค้ดจะผ่านความยาวของคอลัมน์
ตัวอย่างที่ 2:
HTML เดียวกันต้องการเพียงแท็กตารางที่มี ID
JS:
// ปลั๊กอินตาราง (ตารางที่ 2) เริ่มต้น // ประกาศตัวแปรที่ใช้ในการนับรวม (ถ่านหินสะสม, แผนรายเดือน) var yjharr = []; var ljlmarr = []; $ ('#tablel02'). bootstraptable ({ความสูง: 268, // {Align: 'Center', Valign: 'Middle', Field: 'Gys', Title: 'Supplier'}, {Align: 'Center', Valign: 'Middle', Field: 'PZ', ชื่อ: 'mj', ชื่อเรื่อง: 'ราคาถ่านหิน'}, {Align: 'center', valign: 'กลาง', ฟิลด์: 'bmdj', ชื่อ: 'ราคาหน่วยถ่านหินมาตรฐาน'}, {จัดตำแหน่ง: 'กลาง', Valign: วัน '}, {Align:' Center ', Valign:' Middle ', Field:' LJLM ', ชื่อ:' ถ่านหินสะสมที่กำลังจะมา '}, {Align:' Center ', Valign:' กลาง ', สนาม: ความคืบหน้า ', ฟอร์แมต: ความคืบหน้า}], ข้อมูล: [{id: 2, gys:' shuangxin mining ', pz:' ซัลเฟอร์ต่ำ ถ่านหิน ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, Gys: 'Yitai Co. ถ่านหิน ', rz:' ', mj:' ', bmdj:' ', d rlm:' ', ljlm:' 51888.72 ', yjhl:' 70000 ', yjhjd: '74%'}, {id: 4, Gys: ถ่านหิน ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 20041.86 ', yjhl:' 90000 ', yjhjd:' 100%'}, {id: 5, Gys:' Aidi Energy ', Pz: j: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'Hengtai Coal' ถ่านหิน ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}, {id: 6, gys:' Hengtai ถ่านหิน ' mj: '', bmdj: '', drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'Hengtai Coal' ถ่านหิน ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}}); // ข้อมูลการจำลอง red = '#e63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'ความสูง: 20px; border: 1px solid#b6ccf4; style = 'display: block; float: ซ้าย; ความกว้าง: "+width+"%; ความสูง: 100%; พื้นหลังสี: "+(ความกว้าง> = 100? สีแดง: สีน้ำเงิน)+";'> "+ค่า+" </span> </div> "} // วิธีการคำนวณค่าใช้จ่ายทั้งหมด i = 0; i <yjharr.length; i ++) {ถ้า (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} สำหรับ (var i = 0; j = 0; j <ljlmarr.length; j ++) {ถ้า (ljlmarr [j] == "") {ljlmarr [j] = 0;} subljlm+= parsefloat (ljlmarr [j]);} row.pus h ({id: 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm, yjhl: subyjh, yjhjd: '107%'}; แถว}นี่ไม่ได้แตกต่างจากวิธีแรกมากนักมันเป็นเพียงการที่คุณใส่คอลัมน์ที่กำหนดเองในข้อมูลและตั้งค่า เข้าใจง่ายกว่า สำหรับพารามิเตอร์อื่น ๆ โปรดดูเว็บไซต์ทางการ ข้อมูลเป็นแบบไดนามิกและวิธีเพิ่มออนไลน์ มีตัวอย่างมากมายตราบใดที่พวกเขาอยู่ใน. bootstraptable ({})
ด้านบนเป็นส่วนหัวคงที่แบบปรับตัวของปลั๊กอินแบบฟอร์ม Bootstrap Table ที่แนะนำโดยตัวแก้ไข (มีประโยชน์มาก) ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!