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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 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
DC动漫人物排行
2020/03/03 欧美动漫
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Javascript倒计时代码
2010/08/12 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
python表格存取的方法
2018/03/07 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
销售经理工作职责范文
2013/12/03 职场文书
求职信写作要突出重点
2014/01/01 职场文书
护士自我评价范文
2014/01/25 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
一年级语文教学反思
2014/02/13 职场文书
班主任寄语大全
2014/04/04 职场文书
超越自我演讲稿
2014/05/21 职场文书
股指期货心得体会
2014/09/10 职场文书
学校食堂标语
2014/10/06 职场文书
客户付款通知书
2015/04/23 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS