当前位置： 首页 > news >正文

【LayUI】数据表格监听事件

news 2025/8/7 6:44:49

目录

一、效果图

 二、完整示例

1、方法渲染

2、自动渲染

三、API介绍

1、表头参数

2、工具栏事件

3、单元格工具栏事件

4、其他事件

layui数据是使用频率较高的一个组件，用于在表格中对数据进行一系列动态化的操作，有众多涵盖日常业务操作的一些事件。

一、效果图

  • 工具栏：获取选中行数据、是否全选、批量操作等
  • 表头：

        ID列：支持排序

        邮箱列：支持单元格编辑，input输入框编辑

        城市列：支持下拉选择

        签名列：支持单元格编辑，textarea文本域编辑

        打卡：支持排序

  • 单元格操作：查看、编辑、删除

 二、完整示例

表格渲染有两种方式，一种时方法渲染，一种是自动渲染。

1、方法渲染

将基础参数的设置放在了JS代码中，且原始的table标签只需要一个选择器。

下面是示例是方法渲染。

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" type="text/css" href="/layuiadmin/layui/css/layui.css"><script src="/layuiadmin/layui/layui.js"></script>
</head>
<body><table class="layui-hide" id="test" lay-filter="test"></table><!-- 顶部工具 --><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button><button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button><button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">多行</button><button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">单行</button></div></script><!-- 城市列 --><script type="text/html" id="cityTpl"><select id="demoCity1" class="layui-border" lay-ignore><option value="浙江杭州">浙江杭州</option><option value="江西南昌">江西南昌</option><option value="湖北武汉">湖北武汉</option></select></script><!-- 操作列 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script> </body><script>layui.use(['table'], function(){var table = layui.table;table.render({elem: '#test'		// 指定原始表格元素选择器，建议使用id选择器,url:'https://www.layuicdn.com/docs/v2/static/json/table/demo1.json' // 此处为静态模拟数据，实际使用时需换成真实接口,toolbar: '#toolbarDemo',height: 'full-200' // 最大高度减去其他容器已占有的高度差,cellMinWidth: 80,totalRow: true // 开启合计行,page: true		//开启分页,cols: [[	// 表头{type: 'checkbox', fixed: 'left'},{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},{field:'username', width:80, title: '用户'},{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'},{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){// 处理该字段的导出数据var td = obj.td(this.field); //获取当前 tdreturn td.find('select').val();}},{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;'},{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'},{fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}]]});/******** 工具栏事件  *******/table.on('toolbar(test)', function(obj){var id = obj.config.id;var checkStatus = table.checkStatus(id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(layui.util.escape(JSON.stringify(data)));break;case 'getData':var getData = table.getData(id);console.log(getData);layer.alert(layui.util.escape(JSON.stringify(getData)));break;case 'isAll':layer.msg(checkStatus.isAll ? '全选': '未全选')break;case 'multi-row':table.reload('test', {// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增lineStyle: 'height: 95px;' });layer.msg('即通过设置 lineStyle 参数可开启多行');break;case 'default-row':table.reload('test', {lineStyle: null // 恢复单行});layer.msg('已设为单行');break;};});/******** 触发单元格工具事件 *******/table.on('tool(test)', function(obj){ // 双击 toolDoublevar data = obj.data;	// 当前行的数据if(obj.event === 'detail'){// 执行查看操作...layer.alert('您点击了查看，ID：'+obj.data.id);} else if(obj.event === 'del'){// 执行删除操作...layer.alert('您点击了删除，ID：'+obj.data.id);} else if(obj.event === 'edit'){// 支持编辑操作...layer.alert('您点击了编辑，ID：'+obj.data.id);}});// 行单击事件table.on('row(test)', function(obj){console.log('您单击了条目，ID：'+obj.data.id)});// 行双击事件table.on('rowDouble(test)', function(obj){console.log('您双击了条目，ID：'+obj.data.id)});// 单元格编辑事件table.on('edit(test)', function(obj){console.log(obj)var field = obj.field //得到字段var value = obj.value //得到修改后的值var data = obj.data; //得到所在行所有键值});})</script>
</html>

    2、自动渲染

    在一段table容器中配置好相应的参数，有table模块内容不自动对其完成渲染，而无需你写初始的渲染方法。

    自动渲染需要注意以下三点

    • 带有class="layui-table"的<table>标签；
    • 对标签设置属性lay-data=""用于配置一些基础属性；
    • 在<th>标签中设置属性lay-data=""用于配置表头信息

    下面示例是自动渲染，在lay-data里配置基础属性，在lay-data里配置表头信息。

    <table class="layui-table" lay-data="{height:315, url:'https://www.layuicdn.com/docs/v2/static/json/table/demo1.json', page:true, id:'test', totalRow: true}" lay-filter="test"><thead><tr><th lay-data="{type: 'checkbox', fixed: 'left'}"></th><th lay-data="{field:'id',fixed: 'left', width:80, sort: true, totalRowText: '合计：'}">ID</th><th lay-data="{field:'username', width:80}">用户</th><th lay-data="{field:'email',width:150,edit: 'text'}">邮箱</th><th lay-data="{field:'city',width:115,templet: '#cityTpl'}">城市</th><th lay-data="{field:'sign',width:260,edit: 'textarea'}">签名</th><th lay-data="{field:'checkin',width:100,sort:true,  totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}">打卡</th><th lay-data="{field:'id',width:125,toolbar: '#barDemo'}">操作</th></tr></thead>
</table>

    三、API介绍

    1、表头参数

    • type：设置列的类型，可选值：normal、checkbox、radio、numbers、space
    • fixed：固定列，可选值：left固定在左、right固定在右
    • field：数据的字段名
    • title：表头标题
    • sort：是否允许排序，推荐对值为数字的列进行排序
    • style：自定义单元格css样式
    • hide：是否初始隐藏列，默认为false
    • edit：单元格开启编辑方式，支持值：text单行输入框、textarea多行输入框
    • totalRow：是否开启该列的自动合计功能，默认false，
    • event：自定义单元格点击事件名
    • templet：自定义列模板
    • exportTemplet：用于表格导出时的内容输出
    • toolbar：绑定行工具模板，可在每行对应的列中出现一些自定义的操作性按钮
    ,cols: [[	// 表头{type: 'checkbox', fixed: 'left'},{field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},{field:'username', width:80, title: '用户'},{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'},{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){//console.log(obj)// 处理该字段的导出数据var td = obj.td(this.field); //获取当前 tdreturn td.find('select').val();}},{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;'},{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'},{fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
]]

    2、工具栏事件

    html里添加自定义工具模块

    <script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button><button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button><button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">多行</button><button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">单行</button></div>
</script>

    JS里添加工具栏事件

    /******** 工具栏事件  *******/
table.on('toolbar(test)', function(obj){var id = obj.config.id;var checkStatus = table.checkStatus(id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(layui.util.escape(JSON.stringify(data)));break;case 'getData':var getData = table.getData(id);console.log(getData);layer.alert(layui.util.escape(JSON.stringify(getData)));break;case 'isAll':layer.msg(checkStatus.isAll ? '全选': '未全选')break;case 'multi-row':table.reload('test', {// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增lineStyle: 'height: 95px;' });layer.msg('即通过设置 lineStyle 参数可开启多行');break;case 'default-row':table.reload('test', {lineStyle: null // 恢复单行});layer.msg('已设为单行');break;case 'LAYTABLE_TIPS':layer.alert('Table for layui-v'+ layui.v);break;};
});

    3、单元格工具栏事件

    在单元格工具栏操作列即“barDemo”里添加自定义操作按钮，如查看、编辑、删除等，并绑定事件，根据事件执行不同的操作。

    HTML里添加自定义操作按钮

    <script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

    JS里添加监听事件

    table.on('tool(test)', function(obj){ // 双击 toolDoublevar data = obj.data;	// 当前行的数据if(obj.event === 'detail'){// 执行查看操作...} else if(obj.event === 'del'){// 执行删除操作...} else if(obj.event === 'edit'){// 支持编辑操作...}
});

    4、其他事件

    行单击事件、行双击事件、单元格编辑事件等

    // 行单击事件
table.on('row(test)', function(obj){layer.alert('您单击了条目，ID：'+obj.data.id);
});
// 行双击事件
table.on('rowDouble(test)', function(obj){console.log(obj);layer.alert('您双击了条目，ID：'+obj.data.id);
});// 单元格编辑事件
table.on('edit(test)', function(obj){console.log(obj)var field = obj.field //得到字段var value = obj.value //得到修改后的值var data = obj.data; //得到所在行所有键值
});

    其他关于数据表格的操作可参看文档 table 数据表格文档 - Layui

    http://www.dtcms.com/a/317505.html

    相关文章：

  • 界面规范的其他框架实现-列表-layui实现
  • 最新教程 | CentOS 7 下 MySQL 8 离线部署完整手册（含自动部署脚本）
  • 【后端】java 抽象类和接口的介绍和区别
  • PromptPilot 与豆包新模型：从图片到视频，解锁 AI 新玩法
  • 8.6笔记
  • JSON、JSONObject、JSONArray详细介绍及其应用方式
  • Day 33: 动手实现一个简单的 MLP
  • 如何快速掌握大数据技术？大四学生用Spark和Python构建直肠癌数据分析与可视化系统
  • 【python中级】关于Flask服务在同一系统里如何只被运行一次
  • DDoS 防护的未来趋势：AI 如何重塑安全行业？
  • 【历史人物】【范仲淹】简历与生平
  • 应急响应知识总结
  • 主流linux版本分类与说明
  • mysql死锁的常用解决办法
  • 【Linux系统】进程间通信：命名管道
  • Java SPI 机制初探｜得物技术
  • linux下的串口通信原理及编程实例
  • 二、Envoy静态配置
  • 时序预测（论文解读）-金融领域的滞后性
  • 客流特征识别准确率提升 29%：陌讯多模态融合算法在零售场景的实战解析
  • 【渲染流水线】[应用阶段]-[遮挡剔除]以UnityURP为例
  • NY112NY117美光固态闪存NY119NY123
  • 【Linux】重生之从零开始学习运维之主从MGR高可用
  • 在docker容器里面使用docker
  • 生成模型实战 | Transformer详解与实现
  • SQL的条件查询
  • 【Mysql】重生之从零开始学习运维之proxysql读写分离
  • docker相关操作记录
  • DSP2837X CLA开发实战教程
  • 解决Node.js v12在Apple Silicon（M1/M2）上的安装问题