精华内容
下载资源
问答
  • flask_layui_template 烧瓶layui模板演示
  • layui模板资源.rar

    2019-10-31 16:56:08
    这里是一些layui模板保存有两个后台管理系统模板和一个轮播图模板,可以用来学习借鉴使用
  • layui模板引擎文档 - layui...layui模板引擎文档 - layui.laytpl官方文档 laytpl 是 JavScript 模板引擎,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上 具体使用 html页面 <script type="text/html" id=

    layui模板引擎文档 - layui.laytpl官方文档

    laytpl 是 JavScript 模板引擎,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上

    具体使用

    html页面

    <script type="text/html" id="operation">
    //当满足id什么条件的时候展示删除操作
      	{{#if(d.Id == 条件){}}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{#}}}
    </script>
    

    初始化表格

     function init() {
                table.render({
                    elem: '#table'
                    , url: “写自己的接口”
                    , method: "POST"
                    , page: true
                    , cellMinWidth: 100
                    , cols: [
                        [
                         {field: 'remark', title: '备注', align: 'center'}
                         , {
                            width: 50,
                            align: 'center',
                            title: '操作',
                            toolbar: '#operation',
                            //绑定上面的html
                            fixed: 'right'
                        }
                        ]
                    ],
                    parseData: function (res) {
    					//返回表格中的数据,html拿到表格中返回的数据做判断
                        return {
                            "code": res.code == 200 ? 0 : res.code,
                            "msg": res.code == 200 ? "" : res.msg,
                            "count": res.page.totalCount, 
                            "data": res.page.list 
                        };
                    }
                });
    

    监听事件

     table.on('tool(manage_table)', function (obj) {
                    if (obj.event === 'del') {
                        layer.confirm('确认删除该行吗?', function (index) {
                            var postData = [];
                            postData.push(obj.data[deleteId])
                            admin.req({
                                url: “删除的接口”,
                                type: 'POST',
                                data: JSON.stringify(postData),
                                contentType: 'application/json;charset=utf-8',
                                done: function () {
                                    layer.msg('删除成功');
                                    //刷新表格
                                    table.reload('table');
                                }
                            });
                        })
                    } 
                });
    
    展开全文
  • layui模板引擎嵌套

    2020-04-01 12:32:11
    layui模板引擎嵌套 实现一个轮播里面嵌套轮播的这样一个功能,我是利用layui模板引擎渲染出这种效果。 比如泳池时多个而且每个里面有泳池的多张图片。 后台返回的数据时这样的 前段代码: <div class="layui-...

    layui模板引擎嵌套

    实现一个轮播里面嵌套轮播的这样一个功能,我是利用layui模板引擎渲染出这种效果。
    比如泳池时多个而且每个里面有泳池的多张图片。
    在这里插入图片描述
    后台返回的数据时这样的
    在这里插入图片描述前段代码:

       <div class="layui-carousel pool" id="banner">
                <div carousel-item id="list" >
                </div>
       </div>
    
    <script type="text/html" id="templateId">
            {{# layui.each(d, function(index, item){ }}
            <div carousel-item>
                <div style="width:270px;height:401px;padding:30px 25px 0 20px">
                    <div class="PoolName">{{item.PoolName}}</div>
                    <div class="PoolLoaction">{{item.PoolAddress}}</div>
                    <div class="name">{{item.PoolName}}</div>
                    <div class="waterNum">{{item.PoolName}}</div>
                    <div style="margin-bottom:24px;">
                        <input type="radio" name="type" id="in" {{item.PoolType=1?"checked":""}}/><label for="in">室内池</label>
                        <input type="radio" name="type" id="out" {{item.PoolType=2?"checked":""}}/><label for="out">室外池</label>
                    </div>
                    <div class="layui-carousel" id="banner{{index}}">
                        <div carousel-item>
                            {{# layui.each(item.ImgUrls, function(index, item){ }}
                            <img src="{{item}}" />
                            {{# }); }}
                        </div>
                    </div>
                </div>
            </div>
            {{# }); }}
        </script>
    
    展开全文
  • Koa2-Mysql-Layui-ejs 基于Koa2 和mysql数据库 ejs模板 前端layui模板的一套管理系统框架
  • layui 模板语法简单使用小例子 layui 模板语法 函数调用 <script type="text/html" id="collect"> {{# var fun = function() { if (d.checkflg == 1) { return '<a id="collection" lay-event=...

    layui 模板语法简单使用小例子

    layui 模板语法 函数调用
    <script type="text/html" id="collect">
        {{#
            var fun = function() {
                if (d.checkflg == 1)  {
                    return '<a id="collection" lay-event="collection"><i class="layui-icon febs-edit-area febs-green">&#xe716;</i>采编</a>';
                } else {
                    return '-';
                }
            }
        }}
        <span>{{ fun() }}</span>
    </script>
    
    layui 模板语法 直接返回文本
    <script type="text/html" id="monitorTypeValue">
        {{#
        var monitorType = {
        1:'监控中',
        0:'取消监控'
        }[d.monitorType];
        }}
        <span>{{ monitorType }}</span>
    </script>
    
    
    
    展开全文
  • 事实上,templet 也可以直接是一段 html 内容,如:三、第四种方法(解决Layui选项卡Tab和Layui模板laytpl冲突问题) 一、介绍 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对...

    一、介绍

    在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。

    • 类型:String,默认值:

    templet 提供了三种使用方式,请结合实际场景选择最合适的一种:

    • 如果自定义模版的字符量太大,我们推荐你采用 方式一
    • 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用 方式二
    • 如果自定义模板的字符量很小,我们推荐你采用 方式三

    二、templet - 自定义列模板的 3 种方式

    1、方式一:绑定模版选择器。

        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 语法,可读取到返回的所有数据
    <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>
    

    2、函数转义。自 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}
      ]]
    });    
    

    3、方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:

    templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
     
    注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
    

    三、第四种方法(解决Layui选项卡Tab和Layui模板laytpl冲突问题)

    • 在使用 选项卡Tabs 时,选项卡 与 laytpl 模板冲突,把 laytpl 模板当成字符串拼接进 我们要写的位置
    //表格初始化
    table.render({
      elem: '#LAY-user-table'
      ,cols: [[
        {field:'title', title: '文章标题', width: 200}
        ,{field:'id', title:'ID', width:100}
        ,{title: '操作', width: 300, align: 'center', fixed: 'right', toolbar: '#table-user-oper'}
      ]]
    });
    
    • 使用 方式一:绑定模版选择器。
    <div class="layui-card-body" id="user-table">
        <table id="LAY-user-Table" lay-filter="LAY-user-Table"></table>
        <script type="text/html" id="table-user-oper">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
    
            {{#  if(d.user_id && d.status == 0) { }}
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
            {{#  } }}
    
            {{#  if(d.close_status == 0) { }}
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>
            {{#  } }}
    
        </script>
    
    </div>
    

    ~~~~~ 分割线:方法 [ 四 ] ~~~~~

    • 如果自定义模板不能正常显示,也没有Js报错,建议采用 方式四
    • 方法四:在Js中拼接laytpl 模板字符串,再append追加到表格元素中
    <div class="layui-card-body" id="user-table">
        <table id="LAY-user-Table" lay-filter="LAY-user-Table"></table>
        <!--<script type="text/html" id="table-user-oper">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
    
            {{#  if(d.user_id && d.status == 0) { }}
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
            {{#  } }}
    
            {{#  if(d.close_status == 0) { }}
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>
            {{#  } }}
    
        </script>-->
    
    </div>
    
    //组装表格每列的操作按钮
    let laytplString =
        '<script type="text/html" id="table-user-oper">\
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>\
            \
            {{#  if(d.user_id && d.status == 0) { }}\
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>\
            {{#  } }}\
            \
            {{#  if(d.close_status == 0) { }}\
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="close">关闭</a>\
            {{#  } }}\
            \
        <\/script>';
    
    $('#user-table').append(laytplString);
    
    展开全文
  • 一、layui模板 <div class="center-top clearfix" id="economiesSummary"> <script type="text/html" id="economiesSummaryTemplate"> <div class="c-box mr50"> <div class="num-tit">...
  • layui模板引擎

    2019-10-01 02:58:10
    《在模板中调用js方法》 1.js代码 layui.define(['laytpl', 'jquery'], function (exports) { var $ = layui.jquery; var laytpl = layui.laytpl; laytpl.timeFormat = function (time) { time = tim...
  • layui 模板引擎

    2019-05-22 09:32:00
    在我接触的项目中,通常用到的前后端交互模板引擎是Layui框架,这个框架非常的简单适用,文档也介绍得一目了然,以下是我在项目中用到的部分代码 一、返回实体类型 $(function(){ var id = common....
  • layui 模板引擎使用

    2021-02-04 11:14:50
    -- 第一步------模板 --> <script id="viewItem" type="text/html"> {{# layui.each(d.list, function(index, item){ }} {{# if (item.type === 'radio' ) { }} <div class="layui-form-item"> &...
  • layui模板资源.zip

    2019-11-13 15:18:32
    包括登录,表单,分页,弹框,多种列表操作,代码完全分离,列表中包括增加修改删除操作按钮和弹框页面,模版总共有两套风格
  • layui 模板使用

    2019-09-21 15:53:26
    1,建立试图 <div id="normal-exchange" > <div id="exchange-infor" >...2、建立模板 <script id="demo" type="text/html"> {{# if(d.exrate==5) { }} 5 {{# }e...
  • 软件架构说明原型:springboot + mybatis-plus + shiro前端:layui模板引擎:freemartker数据库:postgresql 没什么高大上的东西,用来练手还是可以的 安装教程 哪有啥安装教程,克隆下来引入maven工程就开干,记得...
  • layui 模板引擎 例子

    千次阅读 2018-09-19 17:48:27
    //数据模板 &lt;script type="text/html" id="editMenuPl"&gt; &lt;table id="wdy-table" class="layui-table"&gt; &lt;tr&gt; &lt;th&...
  • layUI模板上传图片

    2020-04-29 18:15:02
    }*/ js实现 layui.use('upload', function () { var $ = layui.jquery , upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test1' , url: '../resGallery/upload/' , accept: '...
  • 软件架构说明原型:springboot + mybatis-plus + shiro前端:layui模板引擎:freemartker数据库:postgresql 没什么高大上的东西,用来练手还是可以的 安装教程 哪有啥安装教程,克隆下来引入maven工程就开干,记得...
  • 在项目中遇到一个情况,需要动态获取后台的返回...一种是layui模板引擎进行数据渲染。  但是这种渲染方式在渲染完成之后不能获得后台返回的完整的数据,暂时相处一种解决办法:将返回值作为一个对象用JSON.stri...
  • 一款整体采用Layui制作,大气简洁的个人博客,IT技术博客交流网站模板html下载。包含:首页、博客、留言、日记、友链等总共6个页面。 下载地址:https://www.gaowenjx.com/?id=421 备用下载地址: ...
  • 1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件html A页面跳转到B页面,并传参、取值layui模板引擎,渲染样式Ajax 异步传输数据,动态更新内容 绑定点击事件 <input id ="button" type="button" value...
  • layui 模板引擎的使用

    2019-10-16 10:59:21
    1,创建视图容器 <divid="view"></div> 2,建立试图模板 <scriptid="demo"type="text/html"> <divclass="page"> <divclass="col-md-2"> ...
  • {{# if(items.status == '06'){ }} {{# layui.each(items.answerdata, function(idx1, item1){ }} {{# if(item1.type == '01'){ }} <div class="upload-file"> <div class="files"><img s...
  • 注:https://jfinal.com/share/1023

空空如也

空空如也

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

layui模板