El hoyo de la herramienta en la celda de encuadernación de la mesa Layui

1. El código de la función realizada:

  1. formulario
<table id="table_editArea" lay-filter="editAreas"></table>
  1. Herramienta en celda
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
  1. Enlace de escucha de eventos
 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;
            }
        });

2. Descripción del agujero de caída:

**on()中的第一个参数**
tool  
			**不是toolbar!!!**,写toolbar监听不到的,官网有的地方用toolbar,好像是头工具栏的,搞不清楚就晕。。。

Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Usé la barra de herramientas para escuchar el evento de clic de botón en la celda desde el principio, pero no pude encontrar la razón. . .
** en () con un corchete después del primer parámetro

(editAreas)
				**不是table的id!!!**,写table_editArea监听不到,

La descripción del sitio web oficial es bastante precisa, pero si agrega sobre la base de una tabla simple, es fácil de usar

La identificación, porque el ejemplo dado por el sitio web oficial no tiene un filtro laico
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

3. Resolución de problemas:

Es mejor dedicar más tiempo a comparar cuidadosamente las diferentes descripciones.

table.on('tool(editAreas)',function(obj){
    
    

La herramienta es una herramienta, no hay discusión, no hay lugar para definirla, simplemente memorizar, el botón de la barra de herramientas en la celda usa la herramienta , y la barra de herramientas en la cabecera de la tabla usa la barra de herramientas

Supongo que te gusta

Origin blog.csdn.net/yunxiang1224/article/details/107187150
Recomendado
Clasificación