20181205学习总结

学习总结

2018-12-05

今天继续进行企业微信自建应用【成绩管理】功能的开发。进一步学习了前端开发框架layui数据表格的使用方法和技巧。

数据表格table模块学习总结：

table 模块是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

 

创建一个table实例最简单的方式：

在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，绑定容器、设置数据接口、在表头设定对应的字段。三种初始化的支持，你可按照个人喜好和实际情况灵活使用。

 “方法级渲染”

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器。其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。

自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。需要关注的是以下三点： 
1) 带有 class="layui-table" 的 <table> 标签。 
2) 对标签设置属性 lay-data="" 用于配置一些基础参数 
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。

转换静态表格

页面已经存在了一段有内容的表格，它由原始的table标签组成，这时需要赋予它一些动态元素，同样可以很轻松地去实现。