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

  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.rhkb.cn/news/105270.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cent OS 中各个文件夹功能

目录 一、根目录简述 二、目录详细分级说明 (一)bin (二)sbin (三)lib (四)etc (五)dev (六)usr (七&#xff09…

vue组件的使用

一、首先要穿件组件构造器对象,或者导入组件 1..在本部分注册组件其中组件为子组件 2.在本部分注册组件 二、而后注册组件 1.在本部分注册组件其中组件为子组件 2.在本部分注册组件 三、 接着,使用组件。 1.在本部分注册组件其中组件为子组件 其中v-i…

开源硬件:下一个技术革命?

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

【Git游戏】提交的技巧

修改历史的提交 rebase 通过git rebase -i 将要修改的提交提到最前端, 然后修改,再通过git commit --amend提交该记录,最后通过git rebase -i 在替换会原始的位置 (该过程中有可能会产生rebase confict) cherry-pick …

EMR电子病历系统 SaaS电子病历编辑器源码 电子病历模板编辑器

EMR(Electronic Medical Record)指的是电子病历。它是一种基于电子文档的个人医疗记录,可以包括病人的病史、诊断、治疗方案、药物处方、检查报告和护理计划等信息。EMR采用计算机化的方式来存储、管理和共享这些信息,以便医生和医…

浅谈视频汇聚平台EasyCVR视频平台在城市安全综合监测预警台风天气中的重要作用

夏日已至,台风和暴雨等极端天气频繁出现。在城市运行过程中,台风所带来的暴雨可能会导致城市内涝等次生灾害,引发交通瘫痪、地铁停运、管网泄漏爆管、路面塌陷、防洪排涝、燃气爆炸、供热安全、管廊安全、消防火灾等安全隐患,影响…

储能运行约束的Matlab建模方法

最近一段时间有很多人问我最优潮流计算中储能系统的建模方法。部分朋友的问题我回复了,有些没有回消息的,我就不再一一回复了,在这里我写一篇博客统一介绍一下。 1.储能系统介绍 首先,让【GPT】简单介绍一下储能系统:…

Qt --- 显示相关设置 窗口属性等

主界面,窗口 最小化 最大化 关闭按钮、显示状态自定义: setWindowFlags(Qt::CustomizeWindowHint); setWindowFlags(Qt::WindowCloseButtonHint); //只要关闭按钮 setWindowFlags(Qt::WindowFlags type) Qt::FrameWindowHint:没有边框的窗口 Qt::Window…

WPF基础入门-Class3-WPF数据模板

WPF基础入门 Class3&#xff1a;WPF数据模板 1、先在cs文件中定义一些数据 public partial class Class_4 : Window{public Class_4(){InitializeComponent();List<Color> test new List<Color>();test.Add(new Color() { Code "Yellow", Name &qu…

Spring源码编译-for mac

超详细的spring源码编译 记&#xff1a;编译成功时间&#xff1a;2023.08.19 环境准备&#xff1a; 1.idea 2023.1.1 Community Edition 2.jdk1.8 3.gradlegradle-5.6.4 4.spring源码(版本&#xff1a;spring-framework-v5.2.25.RELEASE) 一.spring源码下载 github 加速网站&…

day-30 代码随想录算法训练营 回溯part06

332.重新安排行程 思路&#xff1a;使用unordered_map记录起点机场对应到达机场&#xff0c;内部使用map记录到达机场的次数&#xff08;因为map会进行排序&#xff0c;可以求出最小路径&#xff09; class Solution { public:vector<string>res;unordered_map<stri…

基于数据湖的多流拼接方案-HUDI概念篇

目录 一、为什么需要HUDI&#xff1f; 1. 传统技术选型存在哪些问题&#xff1f; 2. Hudi有什么优点&#xff1f; 基于 Hudi Payload 机制的多流拼接方案&#xff1a; 二、HUDI的应用场景 1. 什么场景适合使用hudi&#xff1f; 2. 什么场景不适合使用hudi&#xff1f; …

Oracle 查询(当天,月,年)的数据

Trunc 在oracle中&#xff0c;可利用 trunc函数 查询当天数据&#xff0c;该函数可用于截取时间或者数值&#xff0c;将该函数与 select 语句配合使用可查询时间段数据 查询当天数据 --sysdate是获取系统当前时间函数 --TRUNC函数用于截取时间或者数值&#xff0c;返回指定的…

《Go 语言第一课》课程学习笔记(十)

复合数据类型 同构复合类型&#xff1a;从定长数组到变长切片 由多个同构类型&#xff08;相同类型&#xff09;或异构类型&#xff08;不同类型&#xff09;的元素的值组合而成&#xff0c;这类数据类型在 Go 语言中被称为复合类型。 数组有哪些基本特性&#xff1f; Go 语…

Go 语言的实战案例 SOCKS5 代理 | 青训营

Powered by:NEFU AB-IN 文章目录 Go 语言的实战案例 SOCKS5 代理 | 青训营 引入TCP echo serverauth 认证请求阶段relay阶段 Go 语言的实战案例 SOCKS5 代理 | 青训营 GO语言工程实践课后作业&#xff1a;实现思路、代码以及路径记录 引入 代理是指在计算机网络中&#xff…

STL---list

目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用注意事项 2.list接口介绍及模拟实现 2.1构造​编辑 2.2容量 2.3修改 3.list迭代器 4.迭代器失效 5.模拟实现 6.vector和list的区别 1. list的介绍及使用 1.1 list的介绍 list的文档介绍 1. list是可以在常…

MySQL下载安装配置

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

电脑文件删除了可以找回吗?分享一种简单恢复删除电脑文件办法!

电脑文件删除了可以找回吗&#xff1f;可以。在原理上讲电脑删除的文件是有希望恢复的&#xff0c;因为操作系统在删除文件的时候并会不会立刻将文件彻底删除。当文件被删除的时候&#xff0c;其文件记录被删除&#xff0c;并且被文件占用的磁盘空间被标记为空闲。 这样对于用户…

成集云 | 旺店通多包裹数据同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 随着品牌电商兴起&#xff0c;线上线下开始逐渐融为一体&#xff0c;成集云以旺店通ERP系统为例&#xff0c;通过成集云-旺店通连接器&#xff0c;将旺店通ERP系统多包裹数据同步至钉钉实现数据互通&#xff0c;帮助企业解决了电商发货存在的错…

【STM32RT-Thread零基础入门】 7. 线程创建应用(多线程运行机制)

硬件&#xff1a;STM32F103ZET6、ST-LINK、usb转串口工具、4个LED灯、1个蜂鸣器、4个1k电阻、2个按键、面包板、杜邦线 文章目录 前言一、RT-Thread相关接口函数1. 获取当前运行的线程2. 设置调度器钩子函数 二、程序设计1. 头文件包含及宏定义2. 线程入口函数定义3. main函数设…