KingTable
1.0.0
ไลบรารีสำหรับตารางการดูแลระบบที่สามารถสร้างเองได้บนพื้นฐานของข้อมูลอินพุต รองรับการแบ่งหน้าฝั่งไคลเอ็นต์และเซิร์ฟเวอร์ การค้นหาฝั่งไคลเอ็นต์และเซิร์ฟเวอร์ มุมมองตัวกรองแบบกำหนดเอง เมนูอัตโนมัติเพื่อซ่อนคอลัมน์และรองรับเครื่องมือที่กำหนดเอง คุณลักษณะการส่งออกฝั่งไคลเอ็นต์เป็นรูปแบบ: csv, json, xml, Excel xlsx (ใช้ปลั๊กอิน)
การสาธิตต่อไปนี้พร้อมใช้งานออนไลน์:
โปรดทราบว่าตัวกรองจะคงอยู่โดยอัตโนมัติเมื่อรีเฟรชหน้าอย่างไร ตัวอย่างเช่น การใช้คุณลักษณะการค้นหาหรือการเปลี่ยนหน้าในการสาธิต HTML แบบสมบูรณ์รายการใดรายการหนึ่ง จากนั้นกดปุ่ม F5 เมื่อทำการค้นหา ให้สังเกตว่าอัลกอริธึมการค้นหาฝั่งไคลเอ็นต์ยังจัดเรียงผลลัพธ์ตามความเกี่ยวข้องได้อย่างไร (จำนวนครั้ง ลำดับของคุณสมบัติที่สร้างการจับคู่)
หมายเหตุ: การสาธิตทั้งหมดนี้เป็น ตารางแบบตายตัว : ตารางที่มีข้อมูลทั้งหมดที่โหลดอยู่ในหน่วยความจำ มีการแบ่งหน้าและกรองในฝั่งไคลเอ็นต์ หากต้องการดูตัวอย่างตารางที่แบ่งหน้าโดยใช้คำขอ AJAX (บนฝั่งเซิร์ฟเวอร์) โปรดดูเอกสารประกอบเฉพาะและเซิร์ฟเวอร์การพัฒนาที่ให้ไว้ในพื้นที่เก็บข้อมูล
สามารถติดตั้งไลบรารี KingTable ได้โดยใช้ npm
npm install kingtableโมดูลสามารถนำเข้าได้โดยใช้ไวยากรณ์ CommonJS:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )หรือไวยากรณ์การนำเข้า ES6:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" ไลบรารี KingTable สามารถใช้ในการดาวน์โหลดและใช้ไฟล์การแจกจ่ายในโฟลเดอร์ dist
< script src =" kingtable.js " > </ script > เวอร์ชันก่อนหน้าของไลบรารี KingTable มีอยู่ที่: https://github.com/RobertoPrevato/jQuery-KingTable
อ้างถึงหน้าวิกิ รายการตัวเลือกที่เป็นไปได้ทั้งหมดมีอยู่ในหน้าตัวเลือกเฉพาะ
ต่อไปนี้เป็นตารางที่แสดงคุณสมบัติที่เพิ่มเข้ามาใน KingTable 2.0
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ซอร์สโค้ด ES6 | ซอร์สโค้ด ES6 ไลบรารีถูกแปลงเป็น ES5 เพื่อการแจกจ่าย |
| หน่วยทดสอบซอร์สโค้ด | ซอร์สโค้ดถูกรวมเข้ากับภารกิจ Gulp, Karma, Jasmine สำหรับการทดสอบหน่วย การทดสอบมากกว่า 300 รายการ - ยังคงเติบโต! |
| การอ้างอิงที่ถูกลบออก | ลบการพึ่งพาออกจาก jQuery, Lodash, I.js, R.js |
| ข้อยกเว้นที่ได้รับการปรับปรุง | ข้อยกเว้นที่ยกขึ้นประกอบด้วยลิงก์ไปยังวิกิ GitHub พร้อมคำแนะนำโดยละเอียด |
| ปรับปรุงตรรกะในการดึงข้อมูล | อนุญาตให้เลือกระหว่างวิธี HTTP GET (กรองในสตริงการสืบค้น) หรือวิธี HTTP POST (กรองเป็นข้อมูล JSON POST) |
| แคช LRU | กลไกการแคช ที่ใช้น้อยที่สุด เพื่อแคช n หน้าสุดท้ายด้วยตัวกรอง เพื่อลดจำนวนคำขอ AJAX |
| ตรรกะการดึงข้อมูลตาราง | อนุญาตให้กำหนดฟังก์ชันที่ส่งคืนข้อมูลที่จำเป็นในการแสดงผลตาราง (เช่น พจนานุกรมสำหรับมุมมองตัวกรองแบบกำหนดเอง) |
| การแคชตัวกรอง | ตัวกรองสำหรับแต่ละตารางจะถูกแคชโดยใช้ที่เก็บข้อมูลฝั่งไคลเอ็นต์ (กำหนดค่าได้) ดังนั้นจึงยังคงอยู่เมื่อรีเฟรชหน้า |
| ปรับปรุงการเรียงลำดับ CS | สตริงที่สามารถจัดเรียงได้เหมือนตัวเลข (เช่น "25%", "25.40 EUR", "217°") จะถูกแยกวิเคราะห์เป็นตัวเลขโดยอัตโนมัติเมื่อเรียงลำดับ |
| ปรับปรุงการเรียงลำดับ CS | การเรียงลำดับฝั่งไคลเอ็นต์ตามคุณสมบัติหลายรายการ |
| ปรับปรุงการค้นหา CS | คุณลักษณะการค้นหาฝั่งไคลเอ็นต์ได้รับการปรับปรุง: การค้นหาทำงานในการแสดงวันที่และตัวเลขและสตริงที่จัดรูปแบบโดยขึ้นอยู่กับวัฒนธรรม |
| ปรับปรุงการสนับสนุนตัวจัดการเหตุการณ์ | ตัวจัดการเหตุการณ์แบบกำหนดเองจะได้รับรายการที่คลิกเป็นพารามิเตอร์โดยอัตโนมัติ ถ้ามี |
| ปรับปรุงการรองรับปุ่มแบบกำหนดเอง | ตอนนี้คุณสามารถกำหนดค่าฟิลด์พิเศษ (เช่น ปุ่ม) ที่จะแสดงผลสำหรับแต่ละรายการได้แล้ว |
| ปรับปรุงการรองรับสื่ออื่นๆ | รองรับแอปพลิเคชันคอนโซล NodeJS และตาราง HTML ที่แสดงเนื้อหาอีเมลที่ส่งโดยใช้ NodeJS |
ไลบรารี KingTable ใช้โหมดการทำงานสองโหมด:
และรองรับทั้งคอลเลกชันที่ปรับให้เหมาะสมและเรียบง่าย อ้างถึงหน้าวิกิเฉพาะสำหรับข้อมูลเพิ่มเติม
ตารางคงที่กำลังแสดงคอลเลกชันที่ไม่จำเป็นต้องมีการแบ่งหน้าฝั่งเซิร์ฟเวอร์ แต่อาจยังคงได้ประโยชน์จากการแบ่งหน้าฝั่งไคลเอ็นต์ เมื่อทำงานกับแอปพลิเคชัน มักจะเกิดขึ้นเพื่อจัดการกับคอลเลกชันที่ไม่ได้ตั้งใจจะขยายใหญ่ขึ้นเมื่อเวลาผ่านไป และคอลเลกชันเหล่านี้มีขนาดเล็ก ตัวอย่างเช่น ตารางหมวด หมู่ ในเว็บไซต์อีคอมเมิร์ซสำหรับขายเสื้อผ้า หรือตาราง บทบาทของผู้ใช้ ในแอปพลิเคชันส่วนใหญ่ ในกรณีเหล่านี้ เป็นการสมเหตุสมผลที่จะคืนคอลเลกชันทั้งหมดให้กับลูกค้า มีสองวิธีในการกำหนด KingTable แบบคงที่:
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;ตารางคงที่ทำการค้นหาและแบ่งหน้าในฝั่งไคลเอ็นต์
ตารางปกติคือตารางที่แสดงคอลเลกชันที่ต้องมีการแบ่งหน้าฝั่งเซิร์ฟเวอร์ เนื่องจากมีจุดมุ่งหมายที่จะขยายเมื่อเวลาผ่านไป กรณีนี้จะเกิดขึ้นในกรณีส่วนใหญ่ เช่น ตาราง ผลิตภัณฑ์ และ ลูกค้า ในเว็บไซต์อีคอมเมิร์ซ
var table = new KingTable ( {
url : "/api/profiles"
} ) ;เมื่อได้รับการตอบกลับ AJAX ตารางปกติคาดว่าจะได้รับโครงสร้างต่อไปนี้:
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} ไลบรารี KingTable มีคุณลักษณะมากมายเพื่อปรับปรุงการใช้งาน ทั้งสำหรับผู้ใช้ขั้นสุดท้ายและสำหรับโปรแกรมเมอร์ที่ใช้ไลบรารี:
sessionStorage ที่กำหนดค่าได้, localStorage หรือวัตถุที่เข้ากันได้) และคงอยู่เมื่อรีเฟรชหน้า - ตัวกรองจะถูกรวบรวมโดย URL และหากเป็นไปได้ รหัสตารางสำหรับข้อมูลเพิ่มเติม โปรดดูที่หน้าวิกิเฉพาะ
สำหรับข้อมูลทั้งหมด โปรดดูที่หน้าวิกิเฉพาะ ไลบรารี KingTable มีตรรกะในการใช้การแปลฝั่งไคลเอ็นต์ ซึ่งใช้เพื่อแสดงชื่อที่เหมาะสมของปุ่ม (รีเฟรช หมายเลขหน้า ผลลัพธ์ต่อหน้า ฯลฯ)
โปรดดูหน้าวิกิเฉพาะสำหรับคำแนะนำเกี่ยวกับวิธีการรวมเข้ากับโปรเจ็กต์ของคุณและโค้ดฝั่งเซิร์ฟเวอร์
