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
<think>好的,我现在需要帮助用户实现他们的前后端功能,目前他们已经完成了查询功能,但添加、修改和删除还没有实现。首先,我得仔细看一下用户提供的前端代码和后端代码,了解当前的结构和可能存在的问题前端部分使用了Layui框架,表格的渲染是通过layui的table模块完成的,查询功能是通过一个Search函数触发的,向后端发送GET请求获取数据。后端的GetList方法处理分页和模糊查询,并返回JSON数据。现在的问题是,添加、修改和删除功能没有实现,需要补充这些功能。 首先,我应该先考虑前端部分的修改。在表格的操作列中,已经有编辑和删除的按钮,但对应的事件处理函数可能没有实现。比如,在table.on('tool(test)')的事件处理中,当点击编辑时,目前只是注释掉了,需要补全代码。删除的话,用户已经有一个确认对话框,但实际删除可能需要调用后端API,而不仅仅是前端删除DOM元素。 接下来是添加功能,用户界面上有一个添加按钮,但onclick事件没有绑定,需要添加对应的函数,比如openAddDialog,用来打开添加的弹窗,然后提交数据到后端。 然后是后端部分,目前只有GetList方法处理查询,需要新增Create、Update和Delete的方法。这些方法需要处理对应的HTTP请求,比如POST请求来创建或更新数据,DELETE请求来删除数据。同时,数据库操作需要使用EF来保存更改,并处理可能的异常情况。 在前端,添加和编辑可能需要弹出一个表单窗口,用户填写职位名称和代码,然后提交到后端。这时候需要使用Layui的弹出层组件,比如layer.open,加载一个表单页面或者直接在弹窗中生成表单元素。表单提交时,需要验证输入,并通过AJAX请求发送数据到服务器。 对于修改功能,当用户点击编辑时,需要获取当前行的数据,填充到表单中,然后提交更新。后端需要接收这些数据,找到对应的职位记录,更新字段,并保存到数据库。 删除功能需要前端发送删除请求到后端,后端将对应记录的IsDel字段标记为true,或者直接删除记录。根据用户现有的代码,查询时过滤了IsDel为false的记录,所以可能采用的是软删除,所以在删除操作时应该更新IsDel字段而不是物理删除。 此外,还需要考虑数据绑定和刷新。当添加、修改或删除操作完成后,应该重新加载表格数据,以反映最新的状态。例如,在AJAX成功回调中调用tableIns.reload()来刷新表格。 在前端代码中,可能存在的问题包括:表单验证、AJAX请求的正确配置、弹窗的正确显示和关闭,以及错误处理。后端则需要确保API的正确路由,参数绑定,以及数据库操作的正确执行。 现在需要逐步实现每个功能: 1. 添加功能: - 前端:点击添加按钮,弹出表单,填写后提交。 - 后端:创建新的职位记录,保存到数据库。 2. 修改功能: - 前端:点击编辑按钮,弹出带有当前数据的表单,修改后提交。 - 后端:接收ID和更新数据,更新数据库记录。 3. 删除功能: - 前端:点击删除按钮,确认后发送删除请求。 - 后端:接收ID,标记为删除或物理删除。 在前端代码中,需要补充添加按钮的onclick事件,比如添加一个openAddDialog函数。在修改功能中,需要补全table.on('tool(test)')中的编辑部分代码,弹出编辑表单并填充数据。删除功能需要调用后端API,而不仅仅是前端删除DOM。 后端需要新增对应的Action方法,处理POST请求,接收数据,操作数据库,并返回结果。例如,添加CreateJob方法,修改UpdateJob方法,删除DeleteJob方法。需要注意的是,使用EF时,更新操作可能需要先查询实体,再更新属性,最后SaveChanges。 此外,还需要确保前端AJAX请求的URL正确指向后端Action,并且处理CSRF防护(如果有的话)。在ASP.NET MVC中,可能需要使用[ValidateAntiForgeryToken],但用户当前的代码中没有看到相关设置,可能需要添加或者暂时忽略。 在日期格式化方面,前端templet函数可能需要调整,因为当前的返回模板中的d.title可能不存在,应该使用d.ModifyDate,并用formatDate函数处理。 可能还需要调整前端表格的列定义,确保ModifyDate正确显示,使用formatDate函数处理时间戳。 总结步骤: 1. 实现添加功能: - 前端添加弹窗表单。 - 后端添加Create方法。 2. 实现修改功能: - 前端弹窗填充数据并提交更新。 - 后端添加Update方法。 3. 实现删除功能: - 前端发送删除请求。 - 后端添加Delete方法。 在实现过程中,需要注意前后端的数据交互格式,比如使用JSON,以及正确的HTTP方法(POST、DELETE等)。同时,错误处理也是必要的,比如网络错误或数据库异常,前端需要提示用户。 现在,我需要根据这些思路,给出具体的代码实现建议,帮助用户完善功能。</think>以下是实现添加、修改和删除功能的完整方案: 1. 后端新增接口代码(JobManagemController.cs): ```csharp #region 添加职位 public ActionResult AddJob() { var job = new Job(); TryUpdateModel(job); job.ModifyDate = DateTime.Now; job.IsDel = false; db.Job.Add(job); db.SaveChanges(); return Json(new { code = 0, msg = "添加成功" }); } #endregion #region 更新职位 public ActionResult UpdateJob() { var job = new Job(); TryUpdateModel(job); var entity = db.Job.FirstOrDefault(j => j.Id == job.Id); if(entity == null) return Json(new { code = 1, msg = "记录不存在" }); entity.JobName = job.JobName; entity.JobCode = job.JobCode; entity.ModifyDate = DateTime.Now; db.SaveChanges(); return Json(new { code = 0, msg = "更新成功" }); } #endregion #region 删除职位 public ActionResult DeleteJob(int id) { var entity = db.Job.FirstOrDefault(j => j.Id == id); if(entity == null) return Json(new { code = 1, msg = "记录不存在" }); entity.IsDel = true; // 软删除 db.SaveChanges(); return Json(new { code = 0, msg = "删除成功" }); } #endregion ``` 2. 前端功能实现(HTML/JS部分): ```html <!-- 在<script>标签内新增函数 --> // 打开添加窗口 function openAddDialog() { layer.open({ type: 1, title: '添加职位', content: $('#addForm').html(), btn: ['保存', '取消'], yes: function(index, layero){ var formData = { JobName: layero.find('#addName').val(), JobCode: layero.find('#addCode').val() }; $.post('/JobManagem/AddJob', formData, function(res){ if(res.code == 0){ layer.close(index); tableIns.reload(); } layer.msg(res.msg); }); } }); } // 打开编辑窗口 function openEditDialog(data) { layer.open({ type: 1, title: '编辑职位', content: $('#editForm').html(), btn: ['更新', '取消'], success: function(layero){ layero.find('#editId').val(data.Id); layero.find('#editName').val(data.JobName); layero.find('#editCode').val(data.JobCode); }, yes: function(index, layero){ var formData = { Id: layero.find('#editId').val(), JobName: layero.find('#editName').val(), JobCode: layero.find('#editCode').val() }; $.post('/JobManagem/UpdateJob', formData, function(res){ if(res.code == 0){ layer.close(index); tableIns.reload(); } layer.msg(res.msg); }); } }); } <!-- 在<body>底部新增隐藏的表单模板 --> <div id="addForm" style="display:none;padding:20px;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="addName" 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" id="addCode" required lay-verify="required" class="layui-input"> </div> </div> </form> </div> <div id="editForm" style="display:none;padding:20px;"> <form class="layui-form"> <input type="hidden" id="editId"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="editName" 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" id="editCode" required lay-verify="required" class="layui-input"> </div> </div> </form> </div> ``` 3. 修改已有脚本部分: ```javascript // 修改添加按钮绑定事件 <button type="button" class="layui-btn layui-bg-blue but" onclick="openAddDialog()"><i class="layui-icon layui-icon-addition"></i>添加</button> // 修改表格工具栏事件监听 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === 'edit') { openEditDialog(data); } else { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { $.get('/JobManagem/DeleteJob?id=' + data.Id, function(res){ if(res.code == 0){ obj.del(); } layer.msg(res.msg); layer.close(index); }); }); } }); ``` 4. 日期格式化修复: ```javascript // 修改ModifyDate列的templet定义 { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { return formatDate(d.ModifyDate); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

静安书以沫

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

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

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

打赏作者

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

抵扣说明:

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

余额充值