精华内容
下载资源
问答
  • 个人对 layui 页面渲染的理解 1. 需要满足的条件 表单体系所在的父元素加上class="layui-form",这样你里面所包含的元素就可以被 layui 渲染 2. 渲染的本质 原有的html标签不做改变,并对其进行隐藏,依据 layui ...
    • 个人对 layui 页面渲染的理解

        1. 需要满足的条件

            表单体系所在的父元素加上class="layui-form",这样你里面所包含的元素就可以被 layui 渲染 

        2. 渲染的本质

            原有的html标签不做改变,并对其进行隐藏,依据 layui 自身逻辑对 html代码进行修改,变成 layui 所独有的样式和风格

           并可以添加 layui 自带的一些下拉框、switch、input等标签的监听

       3. 可以针对个别的html标签,忽略其渲染

          只需要在标签内添加   lay-ignore,例如下面的例子

    <select lay-ignore >
        <option value="1">A</option>
        <option value="2">B</option>
    </select>

      4. 对动态增加的元素进行渲染

    
    1. 更新渲染全部
    form.render(); 
    
    2.按元素类型进行渲染
    //刷新select选择框渲染
    form.render('select'); 
    
    //刷新checkbox选择框渲染
    form.render('checkbox'); 
    
    //刷新radio选择框渲染
    form.render('radio'); 
    
    3. 渲染特定的元素
    //要渲染的元素
    <select lay-filter="test">
        <option value="1">A</option>
        <option value="2">B</option>
    </select>
    //渲染
    form.render('radio','test'); 
    
    //注: lay-filter="test"  为 过滤器
    
    • 动态新增 元素 渲染案例
    //动态增加html段
    $("#trainedAdd").click(function () {
        var trainedSss = "trainedS" + trainid.toString();
        $("#trained").append("<input type='text' class='layui-input trainedN' placeholder='培训名称'/>" +//动态添加文本  
        "<input type='text' placeholder='培训年度' class='layui-input DateYear trainedY'/>" +//动态添加日期控件
        "<select class='trainedS'  lay-filter='trainedS' >" +
            "<option value=''>请选择</option>" +
        "<option value='041001'>国家</option> <option value='041002'>省级</option>" +
            "<option value='041003'>市级</option><option value='041004'>县级</option></select>");//动态添加下拉框 
        //日期控件 渲染
        lay('.DateYear').each(function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: this,
                type: 'month',
            });
        });
        //下拉框渲染
        form.render('select');
    });

     

     LayUI 官方网站:LayUI官方网站传送门

    展开全文
  • Layui动态渲染下拉框

    千次阅读 2020-05-08 09:55:29
    本例包含测试页面代码,工具方法只有selectUtil <!DOCTYPE html> <html> <head> <...Layui动态下拉框</title> <link rel="stylesheet" href="../../layui/css/...

    本例包含测试页面代码,工具方法只有selectUtil

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Layui动态下拉框</title>
    		<link rel="stylesheet" href="../../layui/css/layui.css" />
    		<style>
    			body {
    				padding: 18px;
    			}
    		</style>
    	</head>
    	<body>
    		<form class="layui-form">
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">选择框</label>
    					<div class="layui-input-inline">
    						<select id="select_type"></select>
    					</div>
    				</div>
    			</div>
    		</form>
    	</body>
    	<script src="../../layui/layui.js"></script>
    	<script>
    		layui.use(['form'], function() {
    			var $ = layui.$,
    				form = layui.form;
    			// 生成测试数据
    			var datas = [];
    			for (var i = 0; i < 40; i++) {
    				datas.push({
    					id: i,
    					text: 'text_' + i
    				});
    			}
    			//动态渲染下拉框
    			selectUtil.render({
    				id: 'select_type',
    				data: datas
    			});
    		});
    	</script>
    	<script>
    		// 动态实现Layui下拉框工具方法
    		var selectUtil = {
    			render: function(param) {
    				var $ = layui.$,
    					form = layui.form;
    				var id = param.id,
    					prop = param.prop || {
    						id: 'id',
    						text: 'text'
    					},
    					datas = param.data || [];
    				var $select = $('#' + id);
    				//重置下拉框
    				$select.empty();
    				$.each(datas, function(index, item) {
    					var $option = $('<option value="' + item[prop.id] + '">' + item[prop.text] + '</option>');
    					$select.append($option);
    				});
    				form.render('select');
    			}
    		}
    	</script>
    </html>
    
    
    展开全文
  • layui json渲染页面

    2020-12-01 14:03:47
    页面渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

    页面渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>中国数字联盟</title>
        <link rel="stylesheet" href="../../jslibs/layui-v2.5.6/layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header header">
                <a href="javascript:history.back(-1)" class="goback"><i class="layui-icon layui-icon-left" style="font-size: 18px; color: #fff;"></i></a>
                <ul class="layui-nav layui-layout-center">
                    <li class="layui-nav-item">首页</li>
                </ul>
            </div>
            <div class="layui-body">
                <!-- 内容主体区域 -->
                <script id="App" type="text/html">
                    <div class="longLogo-group">
                        <a class="longLogo" href="">
                            <img src="{{d.longLogo}}" alt="数字联盟"><span>{{d.longLogotext}}</span>
                        </a>
                    </div>
                    <div class="itemList">
                        <h3 class="recommend">推荐APP</h3>
                        <ul>
                            {{#  layui.each(d.appList, function(index, item){ }}
                            <li class="lit">
                                <div class="layui-inline logo">
                                    <img src="{{item.logo}}" class="layui-circle">
                                </div>
                                <div class="content">
                                    <h3 class="appname">{{item.appName}}</h3>
                                    <div class="companyName">{{item.companyName}}</div>
                                    <div class="introduction">{{item.introduction}}</div>
                                </div>
                            </li>
                            {{#  }); }}
                            {{#  if(d.list.length === 0){ }}
    					    	无数据
    					  {{#  } }}
                        </ul>
                    </div>
                </script>
                <div id="List"></div>
            </div>
        </div>
    
    
        <script src="../../jslibs/layui-v2.5.6/layui/layui.js"></script>
        <script>
            //JavaScript代码区域
            layui.use('laytpl', function(){
                var laytpl = layui.laytpl;
    
                var templateContent = document.getElementById('App').innerHTML;
                var data = { //数据
                        "longLogo":"../slogan/mainLogo.png",
                        "longLogotext":"中创时代数字联盟",
                        "appList":[{
                                "appName":"中创时代数字联盟",// app名称
                                "appNo":"", // app编号
                                "longLogo":"", // 图+文logo
                                "logo":"../slogan/mainLogo.png", // 图形logo
                                "downloadUrl":"", // 下载地址
                                "startUrl":"", // 手机系统打开app的url
                                "companyID":"", // 公司ID
                                "companyName":"凯立达", // 公司名称
                                "introduction":"中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app", // 简介 200字以内
                                "sortNo":"" // 顺序号
                            }]
                    };
                laytpl(templateContent).render(data, function(html){document.getElementById('List').innerHTML = html;});
            });
        </script>
        <style>
            .layui-layout-center {
                position: absolute!important;
                left: 50%;
                top: 0;
                margin-left: -34px;
            }
            .header .goback{
                margin-top: 22px;
                margin-left: 10px;
                display: inline-block;
                vertical-align: top;
            }
            .longLogo-group{
                text-align: center;
                padding:20px;
            }
            .longLogo img {
                width: 68px;
            }
            .longLogo span{
                font-size: 16px;
                margin-left: 5px;
                font-weight: bold;
                color: #5FB878;
            }
            .layui-body{
                left: 0px;
                bottom: 0px;
            }
            .itemList{
                margin-top: 10px;
            }
            .itemList .recommend{
                font-size: 16px;
                color: #393D49;
                padding: 10px 10px;
                background: #f5f5f5;
            }
            .itemList .logo{
                width: 200px;
            }
            .itemList .logo img{
                width: 100%;
            }
            .itemList ul .lit{
                padding: 10px 10px;
                border-bottom: solid 8px #f5f5f5;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
            .itemList ul .lit .content{
                padding-left: 10px;
            }
            .itemList ul .lit .appname{
                font-size: 18px;
                color: #393D49;
                font-weight:bold;
            }
            .itemList ul .lit .companyName{
                font-size: 16px;
                color: #666;
                margin-top: 5px;
            }
            .itemList ul .lit .introduction{
                font-size: 14px;
                color: #999;
                line-height: 22px;
                margin-top: 5px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </body>
    </html>
    
    展开全文
  • // 动态渲染脚本类型下拉框 // 1.发送ajax请求得到data // 2.将data渲染页面上 function getDataList() { // 请求 $.ajax({ type:'post', url: "/cd/workPlatform/tool/detail", success:function...
  • 首先在 layui原对文件上传外层套个函数 以方便页面加载完毕调用 其次是调用方法的位置,我是放在了渲染表格后执行,你的可能和我不一样,但把加载时机找对就解决问题了 以下是动态渲染需要在表格里

    layui动态渲染上传文件功能点击选择文件没反应解决方案

    场景 动态加载出来的table表格
    如下表格
    在这里插入图片描述
    问题 点击选择多文件没有反应 不弹出选择文件的弹框
    如果你和我是同样问题 请向下继续看 如果不同 出门右拐
    解决后的样式

    在这里插入图片描述
    上图是点击【选择多文件】后未上传的状态
    在这里插入图片描述
    上图是上传成功后的状态

    不哔叨了 上代码

    首先在 layui原对文件上传外层套个函数 以方便页面加载完毕调用
    在这里插入图片描述
    其次是调用方法的位置,我是放在了渲染表格后执行,你的可能和我不一样,但把加载时机找对就解决问题了在这里插入图片描述
    以下是动态渲染需要在表格里展示的div上传
    在这里插入图片描述
    上图的两个参数分别为获取 两个按钮的ID 在layui多文件上传都有说明 不详细赘述
    和layui原多文件上传代码相比 就是外层套了个函数 准确调用函数时机即可

    总体来说就是加载时机问题 加载时机找对 按钮就不会失效

    展开全文
  • layui动态渲染生成select的option值

    千次阅读 2018-04-26 18:22:00
    1 脚本语言:设定默认值;直接拼接,然后根据返回值渲染select// 动态渲染脚本类型下拉框 2 // 1.发送ajax请求得到data 3 // 2.将data渲染页面上 4 function getDataList() { 5 // 请求 6 $.ajax({ 7 ...
  • 描诉:有一个用户信息form表单,其中有部门单选框,数据库中有一张dept(部门)表,要动态渲染出所有部门,并默认选中用户所在部门 关键代码: html页面 <div class="layui-form-item"> <label...
  • layui手动渲染

    千次阅读 2018-05-14 11:23:42
    1.从后台传入了进度条的样式作为表格的一列参数....layui-progress layui-progress-big\" lay-showPercent=\"yes\" lay-filter=\"demo\" style=\"width: 60px;\"&gt;\n" +
  • layui动态数据改变页面信息 开发工具与关键技术:VS2015和C#、MVC 作者:朱万鹏 撰写时间:2020年8月18日 一.引用插件 1. 一.的区别,一.要渲染才可以使用弹出层信息等二. 直接layui.mag就可以提示了。 二.动态...
  • layui渲染下拉框

    万次阅读 2018-08-25 20:55:59
     众所周知,layui是一套非常棒的前端框架,虽然layui的官方文档给的十分详细,但我们在做的时候仍然会遇到各种各样的问题,如不会渲染,前台和后台交互不了,  以下,就位大家讲解如何使用layui框架动态为s...
  • 关于layui页面动态元素没有渲染出来的解决方案 本文主要介绍angluarJS与layui整合使用过程中页面加载时一些动态元素没有显示出来的解决办法。 1、首先在对应的JS文件中自定义repeatFinish指令 在js的末尾自定义...
  • layui表格渲染

    2018-12-03 17:49:11
    layui.use([‘laydate’, ‘laypage’, ‘layer’, ‘table’], function(){ //声明变量保存插件对象 var laydate = layui.laydate //日期 ,laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = ...
  • Layui方法渲染表格

    2021-05-07 18:15:25
    文献种类:专题技术文献; 开发工具与关键技术:DW JavaScript ...Layui方法渲染表格 创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 ta
  • 运用Layui插件渲染树形表格

    千次阅读 2019-07-07 21:21:13
    运用Layui插件渲染树形表格 之前也曾介绍过如何运用layui插件渲染表格,但这里的树形表格和上次的表格虽然都是用layui插件渲染的,但是两者并不一样。树形表格虽然也需要用layui插件渲染,但是树形表格本身现在还...
  • 在项目使用使用了thymeleaf+layui做项目时,用户登录成功之后跳转至设定的页面,但是出现button丢失的情况。 用户登录成功之后来到主页面,如上用thymeleaf做页面跳转到设定的页面,显示该内容。 原本页面应该有该...
  • Layui表格渲染

    2019-04-18 08:59:27
    开发工具与关键技术: 作者:朱某人 撰写时间:2019年4月 日 ...这样子就会拖延开发的进度,...所以就有了各种各样的插件,这些插件都有易上手的特性,那么在这里用到的就是名叫Layui的插件,里面内容繁多,今天说的...
  • layUI动态生成html后重新渲染的方法

    千次阅读 2020-05-13 10:25:56
    layUI动态生成html后重新渲染的方法如下,主要方法是element.init() layui.use(['element','layer'], function(){ var element = layui.element; var layer = layui.layer; element.init(); //这行代码就是...
  • layui 模板渲染,ajax再次渲染问题

    千次阅读 2018-09-01 15:21:36
    如一下文档所诉,你写完,做渲染没有一点问题,但是做二级联动,要ajax获取数据后再次渲染 ,坑就出来了。     form.on('select(quiz1)', function(data){ //ajax 获取城市 $.ajax({ url:&...
  • 上面为使用LayUI动态获取数据的实现,但是呢很多同学可能出现数据拉取成功,列表没有数据的问题,包括我也出现这种情况,搞了半天不知道啥原因,最后去官网好好看了一下文档,才发现我返回的状态名称和值和layUI默认...
  • 开发工具与关键技术: MVC 撰写时间:2021/5/18 Layui框架作为我们日常...2.确定放置表格的位置,在页面表格位置处添加,table中自定义好id,方便之后通过table.render()方法指定该容器。 3.layui数据表格有三种初始
  • 在使用springboot框架的前提下,前端layui,在控制器中使用@ResponseBody,将json字符串数据突然转换成了document文本类型,导致json数据直接打印在了前端页面,table表格渲染失败,请问各位大神,要想table渲染成功...
  • Layui表格渲染错位

    千次阅读 2020-05-25 11:15:14
    检查自己是不是多了","。
  • 问题描述:layui表格渲染出现空白行,后台无报错!!! 我断点确认了,路径没有问题,可以跳转到控制器 方法最后输出的数据也没有问题,字段名字也都一样。 苦了我找了一个多小时,毫无头绪! 最后,爷开窍了,发现...
  • 在使用layui渲染页面时,由于ajax的请求数据是异步请求,所以页面首先加载dom元素,加载完了之后ajax的数据才会返回,这就导致页面中用户信息的二次加载,会根据用户的实际信息进行判断应当如何加载,这时候页面会...
  • layui数据表格动态渲染表头

    千次阅读 2020-09-17 18:02:35
    在项目中利用layui数据表格的时候遇见几次需要动态渲染表头的情况,查了些资料,总结了一下,总体都是讲数据表格渲染列的cols:[]这部分代码拿出来进行操作。 当需要对页面中表格进行切换时,对于不同表头需要根据一...
  • 文章目录[隐藏] Layui select 下拉框动态渲染 Layui select 下拉框动态渲染这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,526
精华内容 1,410
关键字:

layui动态渲染页面