17.数据表格.下
学习要点：
1.
工具和监听
本节课我们来开始了解
Layui
的内置模块：
table
数据表格。
一．工具和监听
1.
顶部自定义工具条和右边自定义工具条可实现增删改的操作命令；
<
script
type
="text/html"
id
="toolBar"
>
<
div
class
="layui-btn-container"
>
<
button
class
="layui-btn layui-btn-sm"
lay-event
="add"
>
新增数据
</
button
>
</
div
>
</
script
>
<
script
type
="text/html"
id
="rightBar"
>
<
div
class
="layui-btn-container"
>
<
button
class
="layui-btn layui-btn-xs"
lay-event
="update"
>
修改
</
button
>
<
button
class
="layui-btn layui-btn-xs
layui-btn-danger"
lay-event
="delete"
>
删除
</
button
>
</
div
>
</
script
>
//
顶部绑定
toolbar
:
'#toolBar'
,
//
右侧绑定
,{
title
:
'
操作
'
,
width
:
180
,
fixed
:
'right'
,
toolbar
:
'#rightBar'
}
2.
顶端监听事件，具体操作如下：
<!--
需要设置
lay-filter-->
<
table
id
="table"
lay-filter
="test"
></
table
>
//
监听事件
table
.
on
(
'toolbar(test)'
, (
obj
)
=>
{
//
获得当前事件名，比如：
add
console
.
log
(
obj
.
event
)
//
获取当前表格的配置信息
console
.
log
(
obj
.
config
)
})
//
判断按钮并实现操作
switch
(
obj
.
event
) {
case
'add'
:
//
写入服务器数据
layer
.
alert
(
'
正在写入数据库，
ajax
模拟弹窗
~'
, (
index
)
=>
{
//
点了确定后关闭自己
layer
.
close
(
index
)
//
刷新表格
table
.
reload
(
obj
.
config
.
id
)
})
break
}
3.
右侧监听事件，具体操作如下：
//
监听事件，右侧工具条
table
.
on
(
'tool(test)'
, (
obj
)
=>
{
console
.
log
(
obj
)
switch
(
obj
.
event
) {
case
'update'
:
//
弹出修改界面
layer
.
alert
(
'
当前数据为
ID
：
'
+
obj
.
data
.
id
, (
index
)
=>
{
//
点了确定后关闭自己
layer
.
close
(
index
)
//
刷新表格
table
.
reload
(
'firstTable'
)
})
break
case
'delete'
:
//
弹出删除界面
layer
.
alert
(
'
当前数据为
ID
：
'
+
obj
.
data
.
id
, (
index
)
=>
{
//
点了确定后关闭自己
layer
.
close
(
index
)
//
刷新表格
table
.
reload
(
'firstTable'
)
})
break
}
})
4.
单元格编辑监听，具体如下：
//
单元格编辑
table
.
on
(
'edit(test)'
, (
obj
)
=>
{
//
弹出修改界面
layer
.
alert
(
'
当前数据为
ID
：
'
+
obj
.
data
.
city
, (
index
)
=>
{
//
点了确定后关闭自己
layer
.
close
(
index
)
//
刷新表格
table
.
reload
(
'firstTable'
)
})
})