简单的表格渲染

简单的表格渲染

开发工具与关键技术：VS2015、数据库、layui组件，渲染表格
作者：易金亮
撰写时间：2019.05.02

在项目中，因为涉及到大量的数据，所以总是少不了表格的存在，那么，表格是怎样做出来的呢？这就要用到表格的渲染了，下面我就来说说如何进行表格的渲染。
表格的渲染大致分为以下几个步骤：

1. 将数据附加到数据库中
2. 在项目视图中给定一个存放表格的容器。
3. 在项目控制器中查询数据库中的数据。
4. 在项目视图中执行渲染。
5. 渲染完成。
   通过以上几步我们就可以完成一个表格的渲染了，下面我就来说说它的具体操作。首先第一步，将数据附加到数据库中，如下截图所示：
   
   
   如上图所示，我们将数据附加到数据库后如上左图所示，我们可以看到它只有一张表，表里的数据如上右图所示，分别有员工ID、员工编号、员工姓名、联系电话、家庭地址五列，将数据附加到数据库之后接下来就应该来到我们的项目中了，然后就是第二步了：在项目视图中给定一个存放表格的容器：如下截图所示：
   
   如上截图所示，我们在视图中给它放一个空的table标签，然后给它一个ID，方便后面我们通过ID给它添加数据，现在的效果如下截图所示：
   
   存放表格的容器定好后接下来就是第三步了：在项目控制器中查询数据库中的数据。我们来到控制器给它写查询的方法，其具体代码如下截图所示：
   
   通过如上截图所示的代码，我们就把员工表中的数据查询出来了并且给它进行了分页，查询出数据后接下来我们又该来到视图了，我们该在视图中执行渲染了，也就是第四步：在项目视图中执行渲染。其具体代码如下截图所示：
   
   如上代码所示，我们先通过layui.use()加载table内置模块，然后就是给它一些配置参数了，通过elem指定原始表格，也就是上面我们设定的那个存放数据的容器，通过ID指定它，然后就是url路径了：指定到控制器下面的查询。接下来就是表头设置了，设置完表头在给它设置分页，这样就完成了吗？当然不是，如上截图所示，“操作”那一列我们给它设置了一个自定义列模板，于是我们还要在给它写一个方法，如下截图所示：
   
   如上截图代码所示，我们在自定义列模板中给它放两个按钮，分别是修改和删除，就这样我们的表格就渲染完成了，其效果如下截图所示：