浅谈layui使用模板引擎动态渲染元素要注意的问题

2024-10-20 09:36:09

摸索这个模板引擎碰到的问题，分享一下

本人在实现使用laytpl实现动态渲染菜单，来减少静态代码时候碰到了，元素是成功渲染出来，但是折叠动画效果和点击事件都失效了，然后仔细看了一下官方文档

官方文档原话：跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter)方法即可。注意：2.1.6 开始，可以用 element.render(type, filter);

意思是我们动态渲染页面的时候，渲染完后一定要执行element.init（）进行重新渲染，这样动画效果和事件才能正常运行

以下是我实现layui模板引擎实现动态菜单源码

 var data = {
    menu: [{
      parentTitle: '权限列表',
      icon: 'layui-icon-auz',
      expand: 'layui-nav-itemed', //是否默认展开
      child: [{
        title: '管理员列表',
        href: "{{route('admin.list')}}"
      }, {
        title: '角色列表',
        href: "{{route('role.index')}}"
      }, {
        title: '权限列表',
        href: ""
      }]
    }]
  };

  var getTpl = menuTpl.innerHTML,
    view = document.getElementById('menu');
  laytpl(getTpl).render(data, function(html) {
    view.innerHTML = html;
  });
    //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
  element.render();

这篇浅谈layui使用模板引擎动态渲染元素要注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

layui原生表单验证的实例

在网上看到很多validform和layer配合的验证方式,但是觉得写的不好,不清不楚的,于是研究了一下layui原生的验证 1. 在需要验证的item上加 lay-verify="value" ,在提交按钮上加 lay-submit lay-filter="go" 两个属性 value: required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值(就是自定义验证
解决layui的form里的元素进行动态生成,验证失效的问题

这问题和使用layTpl动态生成页面问题类似,详细进入https://www.jb51.net/article/170000.htm form有点不同就是需要把需要执行form.render()而不是element.render():进行渲染 var data = jsonData; var getTpl = dialogTemplate.innerHTML, view = document.getElementById('dialogContent'); laytpl(getTpl).rend
layui 表单标签的校验方法

layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-ve
layui.js实现的表单验证功能示例

本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"
浅谈layui使用模板引擎动态渲染元素要注意的问题

摸索这个模板引擎碰到的问题,分享一下本人在实现使用laytpl实现动态渲染菜单,来减少静态代码时候碰到了,元素是成功渲染出来,但是折叠动画效果和点击事件都失效了,然后仔细看了一下官方文档官方文档原话:跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时element的相关功能将不会对其有效,你必须手工执行 element.init(type, filter)方法即可.注意:2.1.6 开始,可以用 element.render(type, filter); 意思是我们动态渲染页面的时候
浅谈轻量级js模板引擎simplite

模板地址:https://github.com/zhangshaolong/simplite欢迎各位提出宝贵意见及贡献代码.特点: 1:代码量少,学习成本低: 2:默认jsp语法标签方式,熟悉jsp的朋友可以直接按照jsp的语法书写模板: 3:使用原生js语法进行逻辑处理,只要熟悉js语法即可直接上手,没有学习成本. 4:支持原生js的所有语法作为代码逻辑片段,支持宽泛的书写格式. 5:支持重定义模板语言的标签符,默认的逻辑标签为<%和%>,默认的属性标签为<%=和%>. 6:支持
浅谈vue单一组件下动态修改数据时的全部重渲染

今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定
浅谈layui框架自带分页和表格重载的接口解析问题

首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致! **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code": 0, "msg": "", "data": [ { "id": "1", &qu
浅谈layui分页控件field参数接收对象的问题

第一次使用layui分页控件,遇到的问题..field: 'type.typeName' 获取不到值. 页面代码 table.render({ elem: '#bookTable' ,height: 'full-20' ,url: '/admin/getBook' //数据接口 ,request: { pageName: 'begin' //页码的参数名称,默认:page ,limitName: 'length' //每页数据量的参数名,默认:limit } ,page: true //开启分页
浅谈Layui的eleTree树式选择器使用方法

模块eleTree 介绍.下载地址:https://fly.layui.com/extend/eleTree/ 使用 JS位置 ,layui/lay/modules/eleTree.js: CSS位置 ,layui/css/modules/eleTree/eleTree.css: 页面css引用引用 layui/css/layui.css"和 layui/css/modules/eleTree/eleTree.css : 页面js引用引用 layui/layui.js : 页面div &l
浅谈layui里的上传控件问题

很多时候,项目里都是需要上传功能的,现在就来研究研究, 首先,在html页面引入layui的包,如: <link rel="stylesheet" href="map/plug-in/scripts/layui/css/layui.css" rel="external nofollow" /> <script type="text/javascript" src="map/plug-in/scrip
浅谈MVC+EF easyui dataGrid 动态加载分页表格

首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav
浅谈在函数中返回动态的内存

1.有以下题目: #include <iostream> using namespace std; void GetMemeory(char* p) { p=(char*)malloc(sizeof(char)*100); } int main() { char *str=NULL; GetMemeory(str); strcpy(str,"Thunder"); strcat(str,"Downloader"); printf(str); system(
浅谈function(函数)中的动态参数

我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

浅谈layui使用模板引擎动态渲染元素要注意的问题

相关推荐

随机推荐