17.数据表格.下
学习要点：
1. 工具和监听
一．工具和监听
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' )
})
})
