能够根据输入数据自行构建的管理表库。支持客户端和服务器端分页;客户端和服务器端搜索;自定义过滤视图;自动菜单隐藏列并支持自定义工具。客户端导出功能为: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 wiki 的链接,其中包含详细说明。 |
改进了获取数据的逻辑 | 允许在 HTTP GET 方法(在查询字符串中过滤)或 HTTP POST 方法(作为 JSON POST 数据过滤)之间进行选择。 |
LRU缓存 | 最近最少使用的缓存机制,通过过滤器缓存最后n页,以减少AJAX请求的数量。 |
表数据获取逻辑 | 允许定义返回呈现表本身所需数据的函数(例如自定义过滤器视图的字典) |
过滤器的缓存 | 每个表的过滤器都使用客户端存储(可配置)进行缓存,因此它们在页面刷新时会保留下来。 |
改进的CS排序 | 可以像数字一样排序的字符串(例如“25%”、“25.40 EUR”、“217°”)在排序时会自动解析为数字。 |
改进的CS排序 | 客户端按多个属性排序。 |
改进的CS搜索 | 客户端搜索功能已得到改进:搜索适用于日期和数字以及其他格式化字符串的文化相关字符串表示形式。 |
改进了对事件处理程序的支持 | 自定义事件处理程序自动接收单击的项目作为参数(如果适用)。 |
改进了对自定义按钮的支持 | 现在可以配置为每个项目呈现的额外字段(例如按钮)。 |
改进了对其他媒体的支持 | 支持 NodeJS 控制台应用程序和使用 NodeJS 发送的电子邮件正文的 HTML 表渲染。 |
KingTable库实现了两种工作模式:
并且支持优化和简单集合。请参阅专门的 wiki 页面以获取更多信息。
固定表显示的集合不需要服务器端分页,但仍可能受益于客户端分页。在处理应用程序时,通常会处理不会随时间增长的集合,并且它们的大小很小。例如,电子商务网站中销售服装的类别表,或者大多数应用程序中的用户角色表。在这些情况下,将整个集合返回给客户是有意义的。定义固定 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 收集如需了解更多信息,请参阅专门的 wiki 页面。
有关完整信息,请参阅专门的 wiki 页面。 KingTable 库包含实现客户端本地化的逻辑,用于显示按钮的正确名称(刷新、页码、每页结果等)。
请参阅专用 wiki 页面,了解如何与您的项目和服务器端代码集成的说明。