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: 90% } .but { margin-top: -5px } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">职位管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">职位代码</label> <div class="layui-input-inline"> <input type="text" name="code" id="code" 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"><i class="layui-icon layui-icon-addition"></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="edit" id="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> </script> </fieldset> <script> var tableIns; layui.use(['table', 'util'], function () { var table = layui.table; // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/JobManagem/GetList', // 此处为静态模拟数据,实际使用时需换成真实接口 page: true, cols: [[ { type: 'numbers', width: '15%', title: '序列号' }, { field: 'JobName', width: '20%', title: '职位名称' }, { field: 'JobCode', width: '20%', title: '职位代码' }, { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { console.log(d); // 得到当前行数据 console.log(this); // 得到表头当前列配置项 console.log(d.LAY_NUM); // 得到序号。或其他特定字段 // 返回模板内容 return '<a href=" ' + d.id + '" class="layui-table-link">' + d.title + '</a >' } }, { title: '操作', width: '25%', templet: '#toolDemo' } ]], }); //编辑,删除 table.on('tool(test)', function (obj) { // 双击 toolDouble var data = obj.data; // 获得当前行数据 // console.log(obj) if (obj.event === 'edit') { //编辑 } else { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { obj.del(); // 删除对应行(tr)的DOM结构 layer.close(index); // 向服务端发送删除指令 }); } }); }); //重载,模糊查询 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 formatDate(dateStr) { // 提取时间戳 var timestamp = parseInt(dateStr.replace(/\/Date\((\d+)\)\//, '$1')); // 创建 Date 对象 var date = new Date(timestamp); // 获取年、月、日 var year = date.getFullYear(); var month = String(date.getMonth() + 1).padStart(2, '0'); var day = String(date.getDate()).padStart(2, '0'); // 返回格式化后的日期 return year + '-' + month + '-' + day; } </script> </body> </html>现在只实现了查询,修改和添加以及删除都没实现,这一段是前端代码下面是后端代码using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using System.Web; using System.Web.Mvc; using WebApplication1.Models; using WebApplication1.Scripts; using Newtonsoft.Json; namespace WebApplication1.Controllers { public class JobManagemController : Controller { AoutEntities db = new AoutEntities(); ReturnListJsonData jsonData = new ReturnListJsonData(); // GET: JobManagem public ActionResult Index() { return View(); } #region 模糊查询 /// <summary> /// 模糊查询 /// </summary> /// <param name="page"></param> /// <param name="limit"></param> /// <param name="name"></param> /// <param name="code"></param> /// <returns></returns> public ActionResult GetList(int page, int limit, string name, string code) { var list = db.Job.Where(a => a.IsDel == false).ToList(); // if (!string.IsNullOrEmpty(name)) { list = list.Where(a => a.JobName.Contains(name)).ToList(); } if (!string.IsNullOrEmpty(code)) { list = list.Where(a => a.JobCode.Contains(code)).ToList(); } var offset = (page - 1) * limit; var data = list.OrderByDescending(a => a.ModifyDate).Skip(offset).Take(limit); jsonData.code = 0; jsonData.count = list.Count; jsonData.data = data; return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion } }帮我进行功能的实现
最新发布
07-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

静安书以沫

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

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

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

打赏作者

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

抵扣说明:

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

余额充值