layui中table表格的基本 *** 作

最近抽空总结了下layui中table表格的相关配置，解释的比较全面，可供大家参考，页面效果如下：

table表格html部分：

table表格渲染js (包含分页器及返回数据处理等）:

table表格 *** 作列事件：

首先，最简单的先渲染一个表格，参考官方示例：

这里先讲讲一些渲染细节：

layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。

另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：

否则用传统方式拼接html字符串就相形见绌了（不推荐）：

接着，看一下分页：

从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：

同样，响应参数名也是可以定制的，参考response属性：

注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：

parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。

-----------------------快乐的分割线，前方jojo高能-----------------------

可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：

拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666 *** 作。

这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。

因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。

js实现：

layui.use(['table','form'],

function()

{

$

=

layui.jquery

table

=

layui.table

tableIns

=

initTable()

})

//加载列表

function

initTable(){

//

执行渲染

tableIns

=

table.render({

id:

'idTest',

elem

:

'#deviceTable',

//

指定原始表格元素选择器（推荐id选择器）

size:

'lg',

height

:

'full-20',

//

容器高度

url

:

'/csCloud-admin/deviceController/getDeviceList.do',

where:

{

'orgId':$("#orgId").val(),

'coldNum':$("#coldNum").val(),

'devType':$("#devType").val(),

'isUsed':$("#isUsedId").val()

},

method

:

'post',

cols

:

[

[

//

标题栏

{

field

:

'rownum',

title

:

'序号',

width

:

100,

sort

:

true

},

{

field

:

'devNum',

title

:

'设备编号',

width

:

200

},

{

field

:

'devAlias',

title

:

'设备别名',

width

:

100

},

{

field

:

'devTypeVal',

title

:

'设备类型',

width

:

100

},

{

field

:

'devModel',

title

:

'设备型号',

width

:

100

},

{

field

:

'stateVal',

title

:

'设备状态',

width

:

100

},

{

field

:

'coldNum',

title

:

'冷库编号',

width

:

100

},

{

field

:

'orgName',

title

:

'所属机构',

width

:

300

},

{

field

:

'isUsedValue',

title

:

'状态',

width

:

100

},

{

fixed

:

'right',

width

:

300,

align:'center',

toolbar

:

'#barDemo'

}

]

],

//

设置表头

page

:

true,

limits

:

[

10,30,

60,

90,

150,

300

],

limit

:

10

})

return

tableIns

}

jsp实现：

<div

class="layui-fluid">

<div

class="layui-row">

<div

class="layui-col-lg12">

<table

id="deviceTable"></table>

</div>

</div>

</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v1.0示例讲解

---