layui中布局和表格的渲染以及动态生成表格的示例分析-创新互联

这篇文章主要介绍了layui中布局和表格的渲染以及动态生成表格的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为日喀则企业提供专业的成都网站设计、成都做网站，日喀则网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

整体的效果：

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值的设置为重点，因为在左边得超链接是根据标签里得target=“iframe的name”值才能实现点击左边显示右边的内容，具体实现代码如下：

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

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

注意：总共有三种渲染方式，今天介绍两种：方法渲染和自动渲染；今天用的是方法渲染；

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

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

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

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

感谢你能够认真阅读完这篇文章，希望小编分享的“layui中布局和表格的渲染以及动态生成表格的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

layui中布局和表格的渲染以及动态生成表格的示例分析-创新互联

其他资讯