Atitit 数据与模板绑定法 目录 1.1. templet - 自定义列模板 1 1.2. 方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如: 1 1.2.
Atitit 数据与模板绑定法
目录
1.1. templet - 自定义列模板 1
1.2. 方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如: 1
1.2.1. codelayui.code 1
1.3. 方式二:函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示: 2
1.3.1. codelayui.code 2
1.4. 方式一:绑定模版选择器。 2
1.4.1. codelayui.code 2
1.4.2. HTMLlayui.code 2
类型:String,默认值:无
在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。
templet 提供了三种使用方式,请结合实际场景选择最合适的一种:
- 如果自定义模版的字符量太大,我们推荐你采用【方式一】;
- 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
- 如果自定义模板的字符量很小,我们推荐你采用【方式三】
- 方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:
- codelayui.code
- 方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:
- templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
- 注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
- 方式二:函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:
- codelayui.code
- 方式二:函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:
- table.render({
- cols: [[
- {field:'title', title: '文章标题', width: 200
- ,templet: function(d){
- return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>'
- }
- }
- ,{field:'id', title:'ID', width:100}
- ]]
- });
- 方式一:绑定模版选择器。
- codelayui.code
- 方式一:绑定模版选择器。
- table.render({
- cols: [[
- {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
- ,{field:'id', title:'ID', width:100}
- ]]
- });
- 等价于:
- <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
- <th lay-data="{field:'id', width:100}">ID</th>
下述是templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据
- HTMLlayui.code
- <script type="text/html" id="titleTpl">
- <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
- </script>
- 注意:上述的 {{d.id}}、{{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段:
序号:{{ d.LAY_INDEX }} (该额外字段为 layui 2.2.0 新增) - 由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):
- <script type="text/html" id="titleTpl">
- {{# if(d.id < 100){ }}
- <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
- {{# } else { }}
- {{d.title}}(普通用户)
- {{# } }}
- </script>
Atitit 数据与模板绑定法 目录 1.1. templet - 自定义列模板 1 1.2. 方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如: 1 1.2.相关推荐
- elementUI表格组件:自定义列模板(完整案例)
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址 页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
- django模板层 (标签,过滤器,自定义inclusion_tag,模板的继承与导入)
后端朝前端页面传递数据的方式:return HttpResponse(''字符串类型) 具体参照上一篇博客的视图层此处主要介绍通过 render方式传值:第一种: return render(requ ...
- knockoutjs ajax分页,KnockoutJS 3.X API 第四章之数据控制流foreach绑定
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...
- Database之SQLSever:SQLSever数据表管理(GUI法/SQL语句命令法两种方法实现建立表、修改表,以及增、删、改、查)之详细攻略
Database之SQLSever:SQLSever数据表管理(GUI法/SQL语句命令法两种方法实现建立表.修改表,以及增.删.改.查)之详细攻略 目录 一.两种方法建立表.修改表,插入多条数据记录 ...
- knockoutJS学习笔记06:ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
- Win10系列:JavaScript 模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- 由数据范围反推算法复杂度以及算法内容
文章目录 一.由数据范围反推算法复杂度以及算法内容 二.数据范围 三.其他知识点 1. long 和 int 的大小跟系统位数有关 2. memset 常用赋值 一.由数据范围反推算法复杂度以及算法内 ...
- Knockout模板绑定
目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方便.默认情况, Knockout用的是流行的jquery.tmpl模板引擎.使用它的话,需要在安装页面下 ...
- vuex中获取的数据使用v-model绑定出问题
get selectedProp() {return this.$store.state.selectedProp;} 获取的数据selectedProp直接绑定在表单元素上会有错,因为不能直接对vu ...
最新文章
- Unity网络多玩家游戏开发教程(上册)
- java一个接口执行结束释放内存_java的灵魂--JVM虚拟机
- Room是怎样和LiveData结合使用的?(源码分析)
- 爬虫模拟登陆手机验证码_网络爬虫干货总结,这次比较全面!
- 《C++ Primer》7.3.1节练习
- 深入php面向对象和模式
- 在Eclipse里搭建Go开发的环境
- springboot下载TXT文件时会将后台返回的成功信息一并返回
- 山东大学2022软件测试技术复习纲要
- 修改服务器cimc地址,【交换机在江湖】实战案例十三 HUAWEI S系列交换机802.1x特性对接H厂商IMC服务器配置指导...
- jmeter接口测试
- 淘宝联盟API对接过程记录(1)
- 12306列车时刻表查询api功能实现
- 显卡内存和计算机内存,512M和1GB显卡显示内存大小有什么区别
- python将excel时间_Python学习笔记(一)Python时间戳与Excel的日期
- matlab在矿物加工中的应用,试述《矿物加工数学模型》在矿物加工中的作用
- Vivado关于综合(Synthesis)后存在Hold时序违例(Hold<0),但实现(Implementation)后无时序违例(hold>= 0)的问题
- 《基础微积分教材中译版》上线计划预告
- sybase用户权限管理3 _角色授予
- 谈一谈安卓mk文件用法
热门文章
- hcl启动设备失败_水电站,黑启动是什么?
- 信息与计算科学偏计算机的学校,信息与计算科学:披着计算机“外衣”的数学专业...
- 多个路由指向同一个页面_ASP.NET实战008:MVC路由实现详解
- 新车可以无牌上路7天_无牌农用拖拉机车斗载人上路?交警说了,不可以!
- C语言深入学习系列 - 字节对齐内存管理
- 类中的反射 装逼利器
- Windows NT/2k/XP/Vista 管理员密码重置
- 51cto,一个创造能让IT人员成长的论坛
- Nova reboot 和 lock 操作 - 每天5分钟玩转 OpenStack(32)
- 第一冲刺阶段(第四天)