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的左右滚动实现代码
Dec 03 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
js尾调用优化的实现
May 23 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
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
详谈nodejs异步编程
2014/12/04 NodeJs
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
个人银行贷款担保书
2014/04/01 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015年消防工作总结
2015/04/24 职场文书
催款律师函范文
2015/05/27 职场文书
婚庆司仪开场白
2015/05/29 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python