layui的布局和表格的渲染以及动态生成表格的方法


Posted in Javascript onSeptember 18, 2019

整体的效果:

layui的布局和表格的渲染以及动态生成表格的方法

layui的布局和表格的渲染以及动态生成表格的方法

一、首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上;

layui的布局和表格的渲染以及动态生成表格的方法

二、建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用;

三、将整个页面分为三部分body标签中要引用的class为class="layui-layout-body"

3.1、头部部分:用一个大的div包裹,class="layui-layout layui-layout-admin",然后可以设计自己的logo或者所需要的二级导航,具体实现代码如下所示:

layui的布局和表格的渲染以及动态生成表格的方法

3.2、对左边的设置,因为要实现的效果是点击左边显示右边的内容,所以在左边最重要的是iframe框架和新建的两个html文件;在右边的主题内容区域,将iframe的name值的设置为重点,因为在左边得超链接是根据<a>标签里得target=“iframe的name”值才能实现点击左边显示右边的内容,具体实现代码如下:

<!--用layui布局左边的样式-->
    <div class="layui-side layui-bg-black" style="margin-top: 58px;">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed"><a href="D_righter.html" rel="external nofollow" target="option">数据表格</a></li>
          <li class="layui-nav-item layui-nav-itemed"><a href="表单.html" rel="external nofollow" target="option">表单</a></li>
          <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" rel="external nofollow" >数据表格</a></li>
        </ul>
      </div>
    </div>

3.3、右边是内容的主题部分,刚开始映入眼帘的就是D_righter.html只需要一个iframe框架中的src属性告诉左边他们跳转的目标是右边即可,具体代码如下:

<div class="layui-body" style="margin-top: 58px;">
      <div style="padding: 15px; height: 100%;">
        <iframe id="option" name="option" src="D_righter.html" style="overflow: visible;" scrolling="no" frameborder="no" width="100%" height="100%"></iframe>
      </div>

    </div>

到此主页部分设置完毕!

第二部分:D_righter.html(也就是动态生成表格部分)

由于只是测试代码,并没有后台数据库的支持,所以接口会出现异常;

注意:总共有三种渲染方式,今天介绍两种:方法渲染和自动渲染;今天用的是方法渲染;

方法渲染:其实这是“自动化渲染”的手动模式,本质类似,只是“方法级渲染”将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个选择器

自动渲染:自动是用自动渲染表格的方法,也就是在一段table容器内配置好相应的参数,由table模块内部实现自动渲染。

1、带有class="layui-table"的table标签;

2、对标签设置属性lay-data=""用于配置一些基础参数;

3、在 <th> 标签中设置属性lay-data=""用于配置表头信息

具体实现代码如下,

layui的布局和表格的渲染以及动态生成表格的方法

第三部分:表单的实现

layui 针对各种表单元素做了较为全面的UI支持,无需去书写那些 UI 结构,你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点,必须给表单体系所在的父元素加上class="layui-form",一切的工作都会在你加载完form模块后,自动完成。

<form class="layui-form" action="">
   <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
     <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
     <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
     <select name="city" lay-verify="required">
      <option value=""></option>
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">广州</option>
      <option value="3">深圳</option>
      <option value="4">杭州</option>
     </select>
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
     <input type="checkbox" name="like[write]" title="写作">
     <input type="checkbox" name="like[read]" title="阅读" checked>
     <input type="checkbox" name="like[dai]" title="发呆">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
     <input type="checkbox" name="switch" lay-skin="switch">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
     <input type="radio" name="sex" value="男" title="男">
     <input type="radio" name="sex" value="女" title="女" checked>
    </div>
   </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
     <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
   </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>

  </form>

必须放入 layui 所规范的元素结构,form 模块才会对其进行重置渲染。值得注意的是,在具体的每一块表单元素中,仍是像往日一样写 input 等标签即可。另外,我们对我们所规范的结构进行了响应式的支持,而针对一些不同的表单排版,比如行内表单,也只需要设定所定义好的 class 即可。

以上这篇layui的布局和表格的渲染以及动态生成表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
js 数据类型判断的方法
Dec 03 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 #Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 #Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 #Javascript
解决layer 动态加载select 失效的问题
Sep 18 #Javascript
webpack的tree shaking的实现方法
Sep 18 #Javascript
js实现窗口全屏示例详解
Sep 17 #Javascript
js实现简单页面全屏
Sep 17 #Javascript
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Python中生成Epoch的方法
2017/04/26 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python for i in range ()用法详解
2020/09/18 Python
如何通过python计算圆周率PI
2020/11/11 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
土木工程应届生求职信
2013/10/31 职场文书
销售经理工作职责范文
2013/12/03 职场文书
银行实习生的自我评价
2014/01/13 职场文书
商场中秋节活动方案
2014/02/07 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
孩子教育的心得体会
2014/09/01 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Python 正则模块详情
2021/11/02 Python