在前端开发中，我们常常需要使用表格来展示数据。而后台开发人员为了方便前端部分人员使用，往往会提供一些常用的 Table Plugin 或 npm 包。其中一个非常实用的 npm 包就是 backgrid_es6。
什么是 backgrid_es6
backgrid_es6 是一个基于 Backbone.js 的前端 Table Plugin，它使用 ES6 语法进行开发。这个插件具有轻量化、定制化和可扩展化的特点，针对开发人员的需求进行了优化和设计。
安装 backgrid_es6
安装该插件的前提是已经引入以下依赖：
- jQuery
- Underscore.js
- Backbone.js
安装命令如下：
npm install backgrid_es6
使用 backgrid_es6
下面示例中，我们使用 backgrid_es6 插件创建一个简单的 Table。
首先，我们需要在 HTML 中定义要渲染 Table 的容器。
<div id="example"></div>
接下来，我们创建一个 Table Model：
-- -------------------- ---- -------
------ - ----- - ---- -----------
----- ---------- - --------------
--------- -
--- ---
----- ---
------- ---
---- ---
-
---
------ ------- -----------然后，我们创建一个 Table Collection：
import { Collection } from 'backbone';
import TableModel from './table-model';
const TableCollection = Collection.extend({
model: TableModel
});
export default TableCollection;接下来，我们创建一个 Table View：
-- -------------------- ---- -------
------ - ---- - ---- -----------
------ -------- ---- ---------------
------ -------- ---- --------------
----- --------- - -------------
----------- ----------------- -
--------------- - -------------------
--------------
--
------- ---------- -
----- ------- - --
----- -----
------ -----
----- --------
-- -
----- -------
------ -----
----- --------
-- -
----- ---------
------ -----
----- --------
-- -
----- ------
------ -----
----- --------
---
----- ---- - --------------------------- -- -
------ --- ---------- ----- ---------------
---
----- ---- - --- ---------------
--------
----------- ----------------
----- ----------------------
---- --------
--
---
----------------------------------
-
---
------ ------- ----------TableView 中，我们使用 Backgrid 插件创建了一个表格，其中：
columns用于定义表头；collection用于定义数据源；body用于定义表格行的渲染方式；TableRow用于渲染单个表格行。
最后，我们创建一个 TableRow：
-- -------------------- ---- -------
------ - ---- - ---- -----------
----- -------- - -------------
-------- -----
------- ---------- -
----- - --- ----- ------- --- - - --------------------
---------------
--------------
----------------
------------------
---------------
---
------ -----
-
---
------ ------- ---------TableRow 中，我们使用了模板字符串快速渲染了表格行数据。
现在，我们就可以使用以下代码来渲染 Table：
-- -------------------- ---- ------- ------ - ---------- - ---- ----------- ------ --------- ---- --------------- ----- ---------- - --- ------------ - --- ------ ----- ------ ------- ------- ---- ---- -- - --- ------ ----- ------- ------- --------- ---- ---- -- --- ----- ----- - --- ----------- ----------- --- ---------- ---
总结
通过以上示例，我们可以看到 backgrid_es6 提供了一种轻量级、简单易用的方式来创建前端 Table。它使用 ES6 语法，你可以轻松地通过定制化和可扩展化来达到你的需求。
关于 backgrid_es6 还有很多有趣的特性，如定制化、分页等，有兴趣的读者可以查看 文档 进一步了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ca81e8991b448e010c