渲染表格

渲染表格      （原理摘抄Layui）

1. 表格的渲染能使我们的代码量大大减少，然后实现更加完整的表格，而无需向使用HTML的方法，表格的渲染实现的功能也更加的方便和精确，它能使我们在经常更改代码的时候实现其自身的功能，它用于对表格进行了一系列的改变，使其绑定数据。

 

1. 渲染表格的方式三种：<1>方法渲染

<2>自动渲染

<3>转换静态表格

 

其中属方法渲染的数据更加完整，也更加的方便。方法渲染是用JS方法的配置完成渲染，无需写过多的HTML，在JS中指定原始元素。

自动渲染是HTML配置，自动渲染，无需写过多的JS，可专注于HTML表头部分。

转换静态表格是转化已有的表格元素，无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可。

1. 方法渲染的写法：最大的优势就是可以脱离HTML文件，而专注于JS本身。

在渲染表格时，首先要声明全局变量employee来作为表格的名称，然后在elem那里获取它的元素，指定原始table容器的选择器。还要声明layui里的layer、layuiTable用于对方法的渲染，然后声明一个函数来执行此方法。

Render()方法返回一个对象，它可用于对当前表格进行“渲染重载”。重载（reload）它的写法也有两种：

<1>table.reload(ID,options)  参数ID即为基础参数id对应的值，参数option即为各项基础参数。

 

1.           【HTML】
2. <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
3.  
4. 【JS】
5. table.reload('idTest', {
6. url: '/api/table/search'
7. ,where: {} //设定异步数据接口的额外参数
8. //,height: 300
9. });              (摘自Layui表格)

 

<2>tableins.reload(options) 对象tableins来源于table.render()方法的实例，参数options即为各项基础参数。

 

1. cols 为表头，设置表格的头部，设置cols的参数有很多，其中常用的有type、title、

field、hide、toolbar、temple等等。它可以设置的值很多，其中field对应的值为数据库中的值，title的值是你要设置表头的名称。

 

1. Templet是自定义模板列，可以设置需要的值。然后它可以设置自定义按钮。在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出，

 

1. URL数据的异步请求参数。在没有用到条件查询，就执行方法渲染，返回本地data参数值(空值)。但是当它有参数值的时候就需要。但它有时候提交的参数也可以是不一样的，它传输的参数还可以是method、where、requst等，method返回的默认值为Post

 

7、page是设置表格显示数据时需不需要分页来实现数据的简单化，是页码的参数值。

Limit每页显示的条数，值务必对应limits参数的选项。Limits每页条数的选择项。

 

8、当我们如果设置了type属性值为number的时候就可以使用上面的监听行事件来监听获取选中行数据，尤其在修改和删除时体现的效果更为明显。

 

9、toolbar开启表格头部工具栏区域，该参数值支持四种类型值：

 

toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器

toolbar: '<div>xxx</div>' //直接传入工具栏模板字符

toolbar: true //仅开启工具栏，不显示左侧模板

toolbar: 'default' //让工具栏左侧显示默认的内置模板

若需要显示打印、导出等功能，则必须开启该函数。