Layui中templet中a标签的onclick参数传递的问题

本文介绍了在Layui模板引擎中遇到的onclick事件处理函数参数传递问题,原始代码由于引号使用不当导致前端报错。通过去除onclick属性外部的引号并调整语法,成功解决了问题。修正后的代码示例展示了如何正确地在模板中调用函数并传入动态参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Layui中templet中a的onclick参数传递的问题,解决:去掉外层引号

中间不能有空格,分号结尾。

原例子:

οnclick=“jump(this,‘{{d.id}}’,‘{{d.moduleId}}’)”

<script type="text/html" id="bt_Tpl">
    <a class="a_height" onclick="jump(this,'{{d.id}}','{{d.moduleId}}')" href="javascript:void(0);">{{d.bt}}</a>
</script>

前端报错:

onclick="%%%%~COMPRESS~EVENT~1~%%%'"

修改后

<script type="text/html" id="bt_Tpl">
    <a class="a_height" onclick=jump(this,'{{d.id}}','{{d.moduleId}}') href="javascript:void(0);">{{d.bt}}</a>
</script>
@{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { padding: 10px 20px 20px 20px; width: 97% } .but { margin-top: -5px } .editInfo { display: none; } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">基本信息管理</a> <a href="/UserManagem/Index" >员工管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工账号</label> <div class="layui-input-block"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工姓名</label> <div class="layui-input-inline"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but" onclick="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>批量删除</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-export"></i>导出</button> <button type="button" class="layui-btn but" id="searchButton"><i class="layui-icon layui-icon-upload"></i>导入文件</button> </div> </div> </fieldset> <fieldset class="layui-elem-field"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> <!-- 在视图中添加以下隐藏表单 --> <div class="editInfo" style="padding:15px;"> <form class="layui-form" id="editForm"> <input type="hidden" name="ID" id="ID"> <div class="layui-form-item"> <label class="layui-form-label">员工账号</label> <div class="layui-input-block"> <input type="text" name="UserCode" required lay-verify="required" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">员工姓名</label> <div class="layui-input-block"> <input type="text" name="UserName" required lay-verify="required" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="Sex" value="true" title="男" checked> <input type="radio" name="Sex" value="false" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-block"> <input type="text" name="BirthDay" id="BirthDay" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input type="text" name="Email" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="text" name="Tel" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="Address" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="Status" lay-skin="switch" lay-text="离职|在职"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </script> </fieldset> <script> var tableIns; var form; var isEdit; layui.use(['table', 'form',], function () { var table = layui.table; form = layui.form; // 修正:移除重复的var声明 // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/UserManagem/GetList', page: true, cols: [[ { type: 'checkbox', width: '5%', title: '' }, { type: 'numbers', width: '5%', title: '序号' }, { field: 'UserCode', width: '8%', title: '员工账号' }, { field: 'UserName', width: '8%', title: '员工姓名' }, { field: 'Sex', width: '8%', title: '性别', templet: function (d) { return d.Sex ? "男" : "女"; // 修正:使用大写的Sex } }, { field: 'BirthDay', width: '8%', title: '出生日期', templet: function (d) { return convertJsonDate(d.BirthDay); } }, { field: 'BirthDay', width: '8%', title: '年龄', templet: function (d) { return calculateAge(d.BirthDay); } }, { field: 'Status', width: '8%', title: '是否离职', templet: function (d) { return d.Status ? "离职" : "在职"; } }, { field: 'Email', width: '8%', title: '邮箱' }, { field: 'Tel', width: '8%', title: '电话' }, { field: 'CreateDate', width: '8%', title: '创建时间', templet: function (d) { return convertJsonDate(d.CreateDate); } }, { field: 'Address', width: '8%', title: '员工住址' }, { title: '操作', width: '10.5%', templet: '#toolDemo' } ]], done: function (res, curr, count) { // 数据渲染完成后的回调 if (res.code !== 0) { // 假设0是成功状态码 layer.msg('数据加载失败: ' + res.msg, { icon: 5 }); } }, error: function () { // 请求错误的回调 layer.msg('网络请求错误,请检查接口', { icon: 5 }); } }); //编辑,删除 table.on('tool(test)', function (obj) { // 双击 toolDouble var data = obj.data; // 获得当前行数据 var field = obj.field; // 得到字段 var value = obj.value; // 得到修改后的值 var data = obj.data; // 得到所在行所有键值 // console.log(obj) if (obj.event === 'edit') { //编辑 //修改编辑职位 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '编辑职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); //赋值 form.val('demo-val-filter', { "jobname": data.JobName, "jobcode": data.JobCode, "ID": data.ID }); } else { layer.confirm('真的删除员工 [' + data.UserCode + '] 么', function (index) { obj.del(); // 删除对应行(tr)的DOM结构 layer.close(index); // 向服务端发送删除指令 $.ajax({ url: '/UserManagem/DelInfo', type: 'post', data: { id: data.ID }, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 1500 }, function () { Search(); }) } else { layer.msg(res.msg, { icon: 5, time: 1500 }) } } }) }); } }); }); // 处理日期格式函数 function convertJsonDate(jsonDate) { if (!jsonDate) return ''; try { // 提取时间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } catch (e) { console.error('日期格式化错误:', e); return jsonDate; } } //表单提交事件,新增和编辑 form.on('submit(demo1)', function (data) { var field = data.field; // 获取表单字段值 $.ajax({ url: '/UserManagem/Add', type: 'post', data: field, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) }) //重载,模糊查询 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 tableIns.reload({ where: { // 传递数据异步请求时携带的字段 name: nameVal, code: codeVal }, height: 500 // 重设高度 }); } // 处理日期格式函数 function convertJsonDate(jsonDate) { // 提取时间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getUTCFullYear(); const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); const day = date.getUTCDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } //新增职位 function Add() { // 在此处输入 layer 的任意代码 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '新建职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); } function calculateAge(jsonBirthDate) { if (!jsonBirthDate) return ''; try { // 先转换为日期格式 const birthDate = convertJsonDateToDate(jsonBirthDate); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } catch (e) { console.error('年龄计算错误:', e); return ''; } } // 辅助函数:将JSON日期转换为Date对象 function convertJsonDateToDate(jsonDate) { const timestamp = parseInt(jsonDate.match(/\d+/)[0]); return new Date(timestamp); } </script> </body> </html> 实现男女动态选择
最新发布
07-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

静安书以沫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值