表格的渲染

一、表格的内容：

要想渲染表格，首先来聊一聊table：table涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列，支持拖拽改变列宽、支持排序，支持多表头，支持单元格的自定义模板，支持表格重载，支持复选框、分页，支持单元格编辑等等一系列功能

创建一个table实例最简单的方式是在页面放置一个元素 

，然后通过   table.render()   方法指定该容器，如下所示：

图一：基础样式

上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式。下面就是它对应的代码：

图二：源代码

根据图一了解到表头部分有的占据一行，有的占据两行，有的占一列，有的占两列，字体也成居中状态，这都是通过表头参数实现的。

而我们可以使用多种方法渲染表格：

图三：渲染方式

新手一般使用方法渲染：其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

图四：渲染参数

执行渲染之前要加载layui模块：将声明的变量赋值

图五：layui模块加载

基础参数：

elem：指定原始table容器的选择器或DOM

cols：设置表头。值是一个二维数组

url： 异步数据接口相关参数

data：直接赋值数据。既适用于只展示一页数据，适用于对一段已知数据进行多页展示

表头参数：

title：设定标题名称

field：设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识

align：单元格排列：left（居左） center（居中） right（具右）

colspan：单元格所占列数（默认：1）。一般用于多级表头

rowspan：单元格所占行数（默认：1）。一般用于多级表头

type：设定列类：

normal（常规）checkbox（复选框）radio（单选框）numbers（序号列）space（空列）

templet：自定义模板

分页：

page: {

limit: 5,

          limits:[5,10,15,20,25]

      }

Limit： 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数

Limits： 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框

page: {

          curr:1

      }

Curr：起始页。一般用于刷新类型的跳页以及HASH跳页