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 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
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
学习使用PHP数组
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php注销代码(session注销)
2012/05/31 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JsDom 编程小结
2011/08/09 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python软件都是免费的吗
2020/06/18 Python
大四毕业生学习总结的自我评价
2013/10/31 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
信息简报范文
2015/07/21 职场文书
员工考勤管理制度
2015/08/06 职场文书
文明礼貌主题班会
2015/08/14 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技