KingTable下載 - KingTable原始碼下載

KingTable

其他類別

1.0.0

下載

國王桌

能夠根據輸入資料自行建立的管理表庫。支援客戶端和伺服器端分頁；客戶端和伺服器端搜尋；自訂過濾視圖；自動選單隱藏列並支援自訂工具。客戶端匯出功能為：csv、json、xml、Excel xlsx（使用外掛程式）格式。

圖書館的目標

允許使用盡可能少的程式碼來實作管理表。
允許輕鬆自訂生成的 HTML，以適應不同的需求：例如顯示圖片縮圖、錨標記等。
支援需要伺服器端分頁的集合和不需要伺服器端分頁但仍可能受益於客戶端分頁的集合。
避免依賴第三方程式庫，可以與任何其他類型的程式庫重複使用（它是普通的 JavaScript）

現場演示

以下演示可在線取得：

示範索引
色彩示範（豐富的 HTML，可匯出至 Excel xlsx）
人員演示（豐富的 HTML，可匯出至 Excel xlsx）
人員示範（純 HTML，無處理程序）
人物演示（純文字）
如何顯示圖片
金額和貨幣的格式

請注意過濾器如何在頁面刷新時自動保留。例如，使用搜尋功能或在豐富的 HTML 演示之一中變更頁面，然後按 F5。搜尋時，請注意客戶端搜尋演算法如何依相關性（出現次數、產生符合的屬性的順序）對結果進行排序。

注意：所有這些示範都是固定表：所有資訊都載入到記憶體中、在客戶端進行分頁和過濾的表。若要查看使用 AJAX 請求（在伺服器端）分頁的表格範例，請參閱儲存庫中提供的專用文件和開發伺服器。

使用 npm 安裝

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 wiki 的鏈接，其中包含詳細說明。
改進了獲取資料的邏輯	允許在 HTTP GET 方法（在查詢字串中過濾）或 HTTP POST 方法（作為 JSON POST 資料過濾）之間進行選擇。
LRU緩存	最近最少使用的快取機制，透過過濾器快取最後n頁，以減少AJAX請求的數量。
表資料取得邏輯	允許定義傳回呈現表本身所需資料的函數（例如自訂篩選器視圖的字典）
過濾器的緩存	每個表的過濾器都使用客戶端儲存（可配置）進行緩存，因此它們在頁面刷新時會保留下來。
改進的CS排序	可以像數字一樣排序的字串（例如“25%”、“25.40 EUR”、“217°”）在排序時會自動解析為數字。
改進的CS排序	客戶端按多個屬性排序。
改進的CS搜尋	客戶端搜尋功能已改進：搜尋適用於日期和數字以及其他格式化字串的文化相關字串表示形式。
改進了對事件處理程序的支持	自訂事件處理程序會自動接收按一下的項目作為參數（如果適用）。
改進了對自訂按鈕的支持	現在可以配置為每個項目呈現的額外欄位（例如按鈕）。
改進了對其他媒體的支持	支援 NodeJS 控制台應用程式和使用 NodeJS 發送的電子郵件正文的 HTML 表渲染。

模式

KingTable庫實作了兩種工作模式：

已修復（不需要伺服器端分頁的集合）
正常（需要伺服器端分頁的集合）

並且支援優化和簡單集合。請參閱專門的 wiki 頁面以獲取更多資訊。

固定模式

固定表顯示的集合不需要伺服器端分頁，但仍可能受益於客戶端分頁。在處理應用程式時，通常會處理不會隨時間增長的集合，並且它們的大小很小。例如，電子商務網站中銷售服裝的類別表，或大多數應用程式中的使用者角色表。在這些情況下，將整個集合傳回給客戶是有意義的。定義固定 KingTable 有兩種方法：

使用取得集合的url實例化 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 收集，如果可能的話，透過表 id 收集
以上包括：頁碼、頁面大小、排序標準、文字搜尋和可由程式設計師實現的附加過濾器
資料儲存可配置的毫秒數，以避免無用的 AJAX 呼叫（LRU 快取機制）
支援瀏覽器導航按鈕
自動處理ajax錯誤和載入狀態

如需了解更多信息，請參閱專門的 wiki 頁面。