layui框架学习(37:学习laytpl基本语法)

news2024/9/22 9:57:59

  layui中的模板引擎模块laytpl属于轻量的 JavaScript 模板引擎,支持在页面中将指定的数据按指定的模板进行展示或处理,此处的模板是指一段包含html和脚本的文本(感觉类似asp.net core中的razor标记语言,在网页中嵌入基于服务器的代码的标记语法)。Layui的数据表格模块支持列设置基于laytpl语法的自定义模板,从而使列展现特定的内容或样式。由于之前没有接触过laytpl语法,本文学习并记录laytpl语法的基本用法,以便后续更好地学习tree数据表格模块中的自定义列模板用法及示例。
  laytpl模块解析模板主要通过render函数,其调用形式如下,其中template参数为包含laytpl语言的模板字符串,data为待处理的数据,供template使用,html为基于data和template的模板解析结果,供回调函数使用。

	laytpl(template).render(data, function(html)laytpl(template).render(data);//返回解析结果

在这里插入图片描述
  laytpl基本语法主要包括四类,均以“{{”开头,以“}}”结尾(也可以自定义分隔符,详见参考文献2)。:
  1){{ d.field }}或{{= d.field }}。输出数据中的指定属性内容,如果存在 HTML,将进行转义。不带html及带html内容的测试效果如下图所示:

在这里插入图片描述在这里插入图片描述
  2){{= d.field }}。转义输出,若字段存在 HTML,将进行转义。带html内容的测试效果如下图所示:
在这里插入图片描述
  3){{# JavaScript 语句 }},支持嵌入JavaScript 语句,一般用于逻辑处理(参考文献6中给出了条件语句和循环语句的写法)。带html内容的循环语句测试效果如下图所示:在这里插入图片描述  模板字符串的存放位置,可以直接作为输入参数嵌入laytpl语句中,也可以用script标签嵌入网页内,需要时提取使用即可,详细的可以查看参考文献6-7,在此不再赘述。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://layui.gitee.io/v2/demo/laytpl.html
[6]https://blog.51cto.com/u_10535186/5382651
[7]https://blog.csdn.net/weixin_43664448/article/details/130142722

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/909105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入理解CyclicBarrier

CyclicBarrier翻译过来是回环栅栏,它可以实现让一组线程等待至某个状态之后再全部同步执行,这个状态叫屏障点。当所有等待线程都被释放后,CyclicBarrier可以重置再次使用。 CyclicBarrier的功能是由ReentrantLock和Condition共同实现的&…

java: 无法访问org.springframework.boot.SpringApplication 错误的类文件

项目场景: 提示:这里简述项目相关背景: java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Software/env-java/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.1.2/spring-boot-3.1.2.ja…

Docker基础操作入门

1 初识 Docker 1.1 简介 我们写的代码会接触到好几个环境:开发环境、测试环境以及生产环境 Docker概念 Docker 是一个开源的应用容器引擎,诞生于 2013 年初,基于 Go 语言实现, dotCloud 公司出品(后改名为Docker In…

钝感力:项目经理的隐形盾牌

钝感力的定义 钝感力的起源和意义 钝感力,或者说对外部刺激的不敏感性,起源于我们的生存本能。在古代,人们面对各种危险和挑战,需要有一定的抗压能力,才能在恶劣环境中生存下来。这种能力使得我们的祖先能够在面对猛兽…

R package org.Hs.eg.db to convert gene id

文章目录 install使用org.Hs.egENSEMBL将Ensembl id convert to gene idorg.Hs.egGENENAME 将Ensembl id convert to gene nameorg.Hs.egSYMBOL 将 gene symbol convert to gene id我现在有一些ensembl id 如何转为 gene name注意你会遇到一些record不全的情况,gtf文…

Certify The Web (IIS)

一、简介 Certify The Web 适用于 Windows的SSL 证书管理器用户界面,与所有 ACME v2 CA 兼容,为您的 IIS/Windows 服务器轻松地安装和自动更新来自 Letencrypt.org 和其他 ACME 证书授权机构的免费 SSL/TLS 证书,设置 https 从未如此简单。 …

T599聚合物电容器:在汽车应用中提供更长的使用寿命的解决方案

自从电子技术被引入汽车工业以来,汽车的技术含量一直在提升。诸多技术被应用在汽车上,使汽车的形象更接近于轮子上的超级计算机。更多传感器、更强大的计算能力和电力被装载到汽车上,汽车应用中的电子产品数量正在迅速增长。随着电动汽车和自…

jeecg如何创建报表并配置到菜单中

当使用jeecg创建单表之后,需要进行报表显示,并把报表配置到菜单中,该如何操作呢?下面进行详细讲解。这里以课程表这张表为例进行讲解。 一.表单创建完成,并配置好菜单栏。具体步骤略,如下图: 二.创建积木报表 1.左侧边栏展开低代码开发菜单,进入报表设计器栏目 2.进…

数据库中字段不给值或给““,默认存什么

准备 在mysql数据库中有一张stu表,下面是表的结构和数据和Student类 开始测试一(不给值) 情况一:添加一条数据,但是跳过math列 可以看到,表的int类型的默认为null. 查id2的这条数据,用student类去接 结果math是0,因为实体类的int元素不会是null,会默认给个0 用hashMap<st…

Vue教程(五):样式绑定——class和style

1、样式代码准备 样式提前准备 <style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px …

【Java 高阶】一文精通 Spring MVC - 基础概念(一)

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

微信小程序使用npm引入三方包详解

目录 1 前言2 微信小程序npm环境搭建2.1 创建package.json文件2.2 修改 project.config.json2.3 修改project.private.config.json配置2.4 构建 npm 包2.5 typescript 支持2.6 安装组件2.7 引入使用组件 1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或…

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面&#xff1a; 还要实习&#xff0c;每次时间好少呀&#xff0c;进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …

一、pikachu之SQL注入

文章目录 一、SQL注入步骤二、数字型注入(post注入)三、字符型注入(get)四、搜索型注入五、XX型注入六、“insert/updata”注入 一、SQL注入步骤 寻找传参页面&#xff1b;判断是否存在注入点&#xff1b; 字符型注入&#xff1f;数字型注入&#xff1f; 判断字段的数量&#…

二、4.makefile、断言和位图内存池

在 Linux 中&#xff0c;文件分为属性和数据两部分&#xff0c;每个文件有三种时间&#xff0c;分别用于记录与文件属性和文件数据相关的时间&#xff0c;这三个时间分别是 atime、 mtime 、 ctime 。 atime&#xff0c;即 access time&#xff0c;和示访问文件数据部分时间&a…

SprintBoot Bean管理

SpringBoot中获取Bean对象 下面这段代码在测试类中进行&#xff0c;下面通过三种方式获取bean对象。 import org.springframework.context.ApplicationContext;// 注意一定要引入上面的依赖SpringBootTest class TliasWebManagementApplicationTests {Testvoid getBeanTest(){…

AI夏令营第三期 - 基于论文摘要的文本分类与关键词抽取挑战赛笔记

赛题&#xff1a;基于论文摘要的文本分类与关键词抽取 背景&#xff1a;高效的从海量医学文献中提取疾病诊断和治疗关键信息 任务&#xff1a;通过论文摘要判断论文是否为医学文献 样例 数据集&#xff1a;csv文件&#xff0c;字段&#xff1a;标题、作者、摘要、关键词 评价指…

uniapp 引入海康H5player实现视频监控的播放

uniapp直接调用海康H5player方法&#xff0c;只能在web浏览器页面正常播放&#xff0c;实机运行会因为找不到文件的相对路径而报错无法播放。因此需要通过web-view或iframe引入html的方式来实现实时视频监控的播放。具体步骤如下&#xff1a; 1、首先将海康h5player的相关文件…

服装定制小程序的秘诀

随着互联网的快速发展&#xff0c;越来越多的企业开始关注互联网商业模式的创新。其中&#xff0c;定制化服务成为了各行各业的关注焦点之一。尤其是在服装行业&#xff0c;定制化服装已经成为许多消费者的追求。而面对这一市场需求&#xff0c;如何创造成功的互联网新商业模式…

https非对称加密算法

非对称加密算法原理 在客户端公开公钥&#xff0c;服务端保存私钥 1.客户端第一次请求先请求443端口&#xff0c;从443端口下载公钥。 2.客户端将数据进行公钥算法进行加密&#xff0c;将秘文发送到服务端 服务端收到秘文后&#xff0c;通过私钥算法进行解密得到明文数据。…