一. 已实现功能的代码:
- 表格
<table id="table_editArea" lay-filter="editAreas"></table>
- 单元格内tool
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
- 事件监听绑定
layui.use(['form', 'layer', 'upload','table'], function () {
$ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
var upload = layui.upload;
var table=layui.table;
//展示已知数据
table.render({
elem: '#table_editArea'
,url: null //数据接口
,cols: [[ //标题栏
{
field: 'textUnit', title: '可编辑的块'}
,{
field: 'leftMargin', title: '距标签左边距离(mm)',edit: 'text'}
,{
field: 'topMargin', title: '距标签上边距离(mm)',edit: 'text'}
,{
field: 'rightMargin', title: '距标签右边距离(mm)',edit: 'text'}
,{
field: 'bottomMargin', title: '距标签下边距离(mm)',edit: 'text'}
,{
fixed: 'right', title: '操作',align:'center' ,width:60,toolbar: '#barDemo'}
]]
,data: [{
"textUnit": "Text1"
,"leftMargin": "1"
,"topMargin": "1"
,"rightMargin": "1"
,"bottomMargin": "1"
}]
//,skin: 'line' //表格风格
// ,even: true
//,page: true //是否显示分页
//,limits: [5, 7, 10]
//,limit: 5 //每页默认显示的数量
});
//删除Text工具栏事件
table.on('tool(editAreas)',function(obj){
console.log(obj);
var oldData=table.cache["table_editArea"];
switch(obj.event){
case "deleteThisItem":
alert(1111);
break;
}
});
二. 掉坑描述:
**on()中的第一个参数**
tool
**不是toolbar!!!**,写toolbar监听不到的,官网有的地方用toolbar,好像是头工具栏的,搞不清楚就晕。。。
我开始就用的toolbar去监听单元格内的按钮点击事件了,怎么都找不到原因,唉,大好的时间都浪费了。。。
**on()中的第一个参数后面带个括号的
(editAreas)
**不是table的id!!!**,写table_editArea监听不到,
官网的描述还是比较确切的,但是如果在简单表格基础上进行添加,很容易就用了
的id了,因为官网给的示例是没有lay-filter的三. 问题解决:
还是得多花些时间仔细比较描述的不同的。
table.on('tool(editAreas)',function(obj){
tool就是tool,没得商量,也没有地方定义过,死记就好了,单元格内的工具条按钮用tool,表格头部的工具条用toolbar