解决Layui中templet中a的onclick参数传递的问题
以下是我的模板,主要用在列表页table中的按钮,点击弹窗展开详情页的功能。
<script type="text/html" id="contentTpl"> <a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" οnclick='showContent("{{d.CONTENT}}")' >查看内容</a> </script>
项目跑了许久,突然说点击查看内容没反应,查出原因是,d.CONTENT如果有单引号或者双引号会报js错误。
于是改成下面的形式解决问题。
<script type="text/html" id="contentTpl"> <div><a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" οnclick=showContent('{{d.CONTENT}}') >查看内容</a></div> </script>
直接去吃onclick的单引号,让浏览器渲染,因为在html中,普通的a标签的click事件也是可以不用带单引号或双引号的。
给后人提醒,小心进坑。
以上这篇解决Layui中templet中a的onclick参数传递的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
layui使用templet格式化表格数据的方法
增加js /*---------------------格式化时间开始--------------------------*/ //对Date的扩展,将 Date 转化为指定格式的String //月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, //年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //例子: //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")
-
解决Layui中templet中a的onclick参数传递的问题
以下是我的模板,主要用在列表页table中的按钮,点击弹窗展开详情页的功能. <script type="text/html" id="contentTpl"> <a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" οnclick='showContent("{{d.CONTENT}}")' >查看内容</a&
-
解决Layui数据表格中checkbox位置不居中的方法
1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,
-
解决layui中table异步数据请求不支持自定义返回数据格式的问题
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码 在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype.pullData = function(curr, loadIndex){ var that = this ,options = that.config ,request = options.request ,response = options.response ,sort = function(
-
解决layui中的form表单与button的点击事件冲突问题
layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置,"重新搜索"为<button>标签的位置,此时,button标签的click事件无法响应. 必须将form的宽度减小,到不和button标签重合 如下图: 此时按钮正常响应click 以上这篇解决layui中的form表单与button的点击事件冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复
-
解决Layui中layer报错的问题
问题描述: Uncaught ReferenceError: layer is not defined 解决方法,查看网上说名,是非独立版导致直接使用layer导致,只需要在使用时加一说明,申明一下使用. layui.use(['element','layer'], function(){ var element = layui.element,layer=layui.layer; //一些事件监听 element.on('nav(topBarNav)', function(data){ con
-
解决layui中onchange失效以及form动态渲染失效的问题
最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了. 然后浏览layui社区,了解到layui监控一个控件变化有自己的方法. html <select lay-filter="test"></select> js var form = layui.form(); form.on('select(test)', function(data){ console.log(data); }); 这样操作即
-
layui 对table中的数据进行转义的实例
方法一 通过done回调进行遍历: //方法级渲染 table.render({ id: 'demoList', elem: '#demoList' , url: 'showDemoList' , cols: [[ {checkbox: true, fixed: true, width: '10%'} , {field: 'id', title: '编号', width: '15%', sort: true} , {field: 'pipe_id', title: '机构ID', width:
-
layui的table中显示图片方法
图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="text/javascript"> layui.use('table',function () { var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,
-
Layui弹框中数据表格中可双击选择一条数据的实现
Layui提供的功能如下(预览) 可自行查看:layui官网此模块的链接 着急看双击选中 直接看标黄色部分 假设这是个弹窗里的表格和数据点击圆圈,圆圈变绿则为选中,选中后点击上方查看数据按钮(实际中是确认按钮,实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中) Layui提供的代码如下(查看代码) <body> <!-- 表格空架子 --> <table class="layui-hide" id="test" lay-fil
随机推荐
- Angular表格神器ui-grid应用详解
- 全民学编程之 Hello World
- java实现socket从服务器连续获取消息的示例
- Python中的super用法详解
- 简单时间提示DEMO从0开始一直进行计时
- 探讨:如何通过stats命令分析Memcached的内部状态
- php adodb连接不同数据库
- php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
- JS判断数组那点事
- 浅谈javascript六种数据类型以及特殊注意点
- 几种响应式文字详解
- C#基于COM方式读取Excel表格的方法
- 为Nginx服务器配置黑名单或白名单功能的防火墙
- JNI实现最简单的JAVA调用C/C++代码
- Java连接MySQL数据库增删改查的通用方法(推荐)
- php 截取GBK文档某个位置开始的n个字符方法
- 显示任何进程加载的DLL文件的代码
- vue使用监听实现全选反选功能
- Java自带定时任务ScheduledThreadPoolExecutor实现定时器和延时加载功能
- python爬虫之线程池和进程池功能与用法详解