前言
在前端开发中，为了实现表格展示数据这个需求，我们通常会用到一些成熟的插件或者库来快速实现，比如 bootstrap-table、element-ui 的 table 组件等。
而我们今天要介绍的是一个基于 Angular 的前端表格插件 smart-table 的服务器端插件 smart-table-server。
smart-table 插件本身已经非常好用了，但在大量数据的情况下，前端进行数据处理会给浏览器带来较大的负担，也不太友好。而 smart-table-server 给 smart-table 提供了一个基于服务器端的数据处理方案，这样就可以让浏览器确保快速地呈现页面。
安装
在使用 smart-table-server 之前，你需要先安装 smart-table 的 npm 包。
--- ------- ------ ----------
然后安装 smart-table-server。
--- ------- ------ ------------------
用法
前端配置
在前端网页中集成 smart-table 和 smart-table-server。
------------ --------------------- -------------------------------- ------- ---------------------------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------
然后在组件中设置配置项。
------ - --------- - ---- ----------------
------ - ---------------- - ---- ---------------------
------------
--------- ---------
--------- -
------------ --------------------- --------------------------------
--
--
------ ----- ------------ -
-------- - ---
------- -----------------
------------- -
----------- - --- ---------------------------------------------- - -------- ------- --------- ------- ---
------------- - -
-------- -
--- -
------ -----
--
----- -
------ ----- ------
--
--------- -
------ ----- ------
--
------ -
------ --------
--
---- -
------ ------
--
--
--
-
-后端配置
在后端开启一个 HTTP 服务，并返回一个包含 data 和 total 数据的 JSON 字符串。这里我们用 Express 框架实现一个简单的例子。
安装 Express。
--- ------- ------ -------
在 server.js 中编写代码。
----- ------- - -------------------
----- --- - ----------
---------------- ----- ---- -- -
----- - ----- ----- - - ----------
----- ----- - -----
----- ---- - ------------------------- --- -- -- -
----- ----- - ------ -- -- - - - --
------ -
--- ------
----- ----- ----------
--------- ----------------
------ ----------------------------
---- ------------------------ - -----
--
---
------------- -- -
---------- ----- ----- ---
-- ------
---
---------------- -- -- ------------------- ------------现在，你可以通过访问 http://localhost:8080/data?skip=0&limit=20 来获取前 20 条数据了。
总结
smart-table-server 让 smart-table 更加灵活、高效，并且支持一些高级的功能，比如前端操作数据等，具有一定的指导意义。如果你是 smart-table 的使用者，并且遇到了大批量数据性能问题等问题，或者需要更多的操作功能，推荐使用 smart-table-server。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055a3581e8991b448d7d72