【LayUI】数据表格监听事件

下页、再停留2025-08-10 11:23

目录

一、效果图

二、完整示例

1、方法渲染

2、自动渲染

三、API介绍

1、表头参数

2、工具栏事件

3、单元格工具栏事件

4、其他事件

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

一、效果图

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

ID列：支持排序

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

城市列：支持下拉选择

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

打卡：支持排序

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

二、完整示例

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

1、方法渲染

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

下面是示例是方法渲染。

html 复制代码 
<!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); //获取当前 td
			        return 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){ // 双击 toolDouble
		  	var 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里配置表头信息。

html 复制代码 
<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：绑定行工具模板，可在每行对应的列中出现一些自定义的操作性按钮
javascript 复制代码 
,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); //获取当前 td
        return 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里添加自定义工具模块

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里添加工具栏事件

javascript 复制代码 
/******** 工具栏事件  *******/
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里添加自定义操作按钮

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里添加监听事件

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

4、其他事件

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

javascript 复制代码 
// 行单击事件
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

热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04[已解决]VSCode右键菜单消失恢复052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示07GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】08KGG转MP3工具|非KGM文件|解密音频09Cursor 终端“卡死/无响应”问题的解法10OpenAI重返开源！GPT-OSS本地部署完全指南