[记] layui 更新单元格内容

最新推荐文章于 2025-05-29 10:27:40 发布

qq_33641175

最新推荐文章于 2025-05-29 10:27:40 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_33641175/article/details/113619245

版权

前端专栏收录该内容

11 篇文章

订阅专栏

总述

编辑列内容, 对输入内容进行校验, 如校验失败, 将单元格内容置空
在单元格中插入自定义元素, 并通过操作自定义元素更新表格内容, (通过template在table中插入3个radio, 通过选择不同按钮修改表单值)
在单元格编辑事件监听中修改单元格值(需要同时修改table.cache中的值和动态input的value[关键])

图示

未选中"修改"时, 修改"新售价", 给出提示, 并将"新售价"置空
选中"修改"是, 可以修改"新售价"
再次未选中"修改"是, 置空"新售价"

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Table 表格编辑</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<table class="layui-table" lay-filter="booksTable" id="booksTable"></table>

		<script type="text/html" id="actionTpl">
			<input type="radio" name="action-type-name-{{d.seqid}}" value="0" title="无操作" lay-filter="action-type" {{d.actionType === '0' ? 'checked':''}}>
			  <input type="radio" name="action-type-name-{{d.seqid}}" value="1" title="删  除" lay-filter="action-type" {{d.actionType === '1' ? 'checked':''}}>
			  <input type="radio" name="action-type-name-{{d.seqid}}" value="2" title="修  改" lay-filter="action-type" {{d.actionType === '2' ? 'checked':''}}>
		</script>

		<script src="layui/layui.all.js" charset="utf-8"></script>
		<script>
			var datas = [
				{"seqid": "10001","bookName": "张三专辑","bookPrice": "199","newBookPrice": "","actionType": '0'},
				{"seqid": "10002","bookName": "李四专辑","bookPrice": "155","newBookPrice": "","actionType": '0'},
			];
			var tableOption = {
				elem: '#booksTable',
				cols: [[
						{field: 'seqid',title: '书籍ID',minWidth: 80,sort: true},
						{field: 'bookName',title: '数据名',minWidth: 120},
						{field: 'bookPrice',title: '售价',minWidth: 120},
						// 这里没有field, 因为后面更新的时候会把templet弄掉
						{title: '操作',minWidth: 220,event: 'action-type-sync',templet: '#actionTpl'},
						{field: 'newBookPrice',title: '新售价',minWidth: 100,edit: 'text'}
				]],
				data: datas,
				even: true,
				id: 'booksTable',
			};

			(function() {
				var table = layui.table,$ = layui.$;
				table.render(tableOption);
				
				//监听单元格编辑, 校验单元格输入
				table.on('edit(booksTable)', function(obj) {
					var value = obj.value //得到修改后的值
						,data = obj.data //得到所在行所有键值
						,field = obj.field; //得到字段
						console.log(data)
					if (field === 'newBookPrice') {
						if (data.actionType !== '2') {// 修改按钮未选中
							layer.msg('请调整该记录的"操作"类型为"修改"后再修改金额.');
							// 将cache值置空, 只是修改cache中的值, 不能影响页面显示
							obj.update({newBookPrice: ''});
							// [关键]  将输入框置空, 否则后续监听器会依据此input的值修改页面显示
							$(this).val('');
						}
					}
				});
				// 监听单元格事件, 根据选项, 修改金额
				table.on('tool(booksTable)', function(obj) {
					console.log(118)
					var value = $(this).find('input:checked').val();
					obj.update({
						newBookPrice: value === '2' ? obj.data.newBookPrice : '',
						actionType: value
					})
				});
			})();
		</script>
	</body>
</html>