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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
javascript实现标签切换代码示例
May 22 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue组件化中slot的基本使用方法
2019/05/01 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python六大开源框架对比
2015/10/19 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python中的TCP socket写法示例
2018/05/11 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
公司门卫工作职责
2014/06/28 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
项目备案申请报告
2015/05/15 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python