2021 年 11 月 26 日星期五
作者:Sandy Galloway

介绍 StateRestore

StateRestore 是 DataTables 的一个新扩展,它基于 stateSave 初始化选项,允许用户保存多个状态,然后在以后恢复它们。当然,有几个初始化选项允许用户自定义扩展的行为以满足他们的个人需求。状态可以保存在会话存储中,或者通过 ajax 发送并保存在服务器上。

您可以在下面看到一个示例 - 点击创建状态按钮保存第一个状态

姓名职位办公室年龄开始日期薪资
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计师东京632011-07-25$170,750
Ashton Cox初级技术作家旧金山662009-01-12$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计师东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavascript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域总监旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域总监伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发者爱丁堡422010-12-22$92,575
Jennifer Chang区域总监新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发者伦敦532009-10-22$114,500
Prescott Bartlett技术作家伦敦272011-05-07$145,000
Gavin Cortez团队主管旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务总监旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw总监纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发者纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
Zenaida Frank软件工程师纽约632010-01-04$125,250
Zorita Serrano软件工程师旧金山562012-06-01$115,000
Jennifer Acosta初级 Javascript 开发人员爱丁堡432013-02-01$75,650
Cara Stevens销售助理纽约462011-12-06$145,600
Hermione Butler区域总监伦敦472011-03-21$356,250
Lael Greer系统管理员伦敦212009-02-27$103,500
Jonas Alexander开发者旧金山302010-07-14$86,500
Shad Decker区域总监爱丁堡512008-11-13$183,000
Michael BruceJavascript 开发人员新加坡292011-06-27$183,000
Donna Snider客户支持纽约272011-01-25$112,000
姓名职位办公室年龄开始日期薪资

下载

StateRestore 扩展可以通过 DataTables CDN 使用 我们的下载构建器 和我们 CDN 的直接访问 (链接如下) 获得。如果您更喜欢使用包管理器,您也可以从 NPMNuGET 安装它。

CSS
JS

功能

StateRestore 使用了两个主要的按钮。第一个 createState 用于创建新状态。当按下此按钮时,将创建一个新状态,该状态将反映表格的当前状态。然后可以通过按下 savedSates 按钮访问此状态。这将显示一个集合,其中包含每个已保存状态的拆分 stateRestore 按钮。

拆分按钮的主要操作将重新加载其各自的状态回 DataTable。触发下拉菜单将显示状态名称和另外三个次要操作按钮。第一个,saveState,将用表格的当前状态覆盖该按钮所代表的状态。第二个按钮,deleteState,将从存储中删除该状态。第三个,renameState,将根据用户在显示的模态框中输入的值重命名状态。

使用

除了核心功能集之外,StateRestore 还有一些配置选项。更基本的选项包括禁用新状态的创建、现有状态的保存、状态的重命名以及状态的删除。还可以为第一次加载表格的用户预定义状态。

一个主要的附加功能是创建模态框。当用户按下 createState 按钮时,它会向用户显示一个模态框。这将始终允许他们设置状态的名称,但也可以启用切换哪些 DataTables 元素保存在该状态中。例如,您可能只想保存 SearchBuilder 状态,而不保存列顺序。 stateRestore.toggle 允许这样做。在下面的示例中查看此行为。

姓名职位办公室年龄开始日期薪资
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计师东京632011-07-25$170,750
Ashton Cox初级技术作家旧金山662009-01-12$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计师东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavascript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域总监旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域总监伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发者爱丁堡422010-12-22$92,575
Jennifer Chang区域总监新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发者伦敦532009-10-22$114,500
Prescott Bartlett技术作家伦敦272011-05-07$145,000
Gavin Cortez团队主管旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务总监旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw总监纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发者纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
Zenaida Frank软件工程师纽约632010-01-04$125,250
Zorita Serrano软件工程师旧金山562012-06-01$115,000
Jennifer Acosta初级 Javascript 开发人员爱丁堡432013-02-01$75,650
Cara Stevens销售助理纽约462011-12-06$145,600
Hermione Butler区域总监伦敦472011-03-21$356,250
Lael Greer系统管理员伦敦212009-02-27$103,500
Jonas Alexander开发者旧金山302010-07-14$86,500
Shad Decker区域总监爱丁堡512008-11-13$183,000
Michael BruceJavascript 开发人员新加坡292011-06-27$183,000
Donna Snider客户支持纽约272011-01-25$112,000
姓名职位办公室年龄开始日期薪资

完整的配置选项列表可以在 文档 中找到。

布局

StateRestore 使用 Buttons 扩展初始化并插入页面中。有关如何最好地将它们包含在页面中的信息,请参阅 Buttons 文档。您可以在 这里 找到所有 StateRestore 按钮的文档。

反馈

在发布时,StateRestore 不兼容 ColReorder、KeyTable 或 SearchPanes。对于 ColReorder 和 SearchPanes,这是我们将在未来修复的事情,但这需要对代码进行一些重写。这项工作已经开始,我们希望能够在不久的将来发布一个具有更高兼容性的版本。

虽然这只是一个 1.0.0 版本,但在过去几个月里已经进行了大量的测试和工作,以确保 StateRestore 是一个强大的扩展,可以在生产环境中使用。

我希望 StateRestore 可以增强您的项目,并且像往常一样,我们欢迎您对 StateRestore 的初始版本提供反馈 在论坛中,以及您认为将来会使扩展受益的任何其他功能!