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

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

我们提供的服务有：成都网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、泸水ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的泸水网站制作公司

整体的效果：

一、首先百度搜索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属性告诉左边他们跳转的目标是右边即可，具体代码如下：

输入框

密码框

辅助文字

选择框

北京上海广州深圳杭州

复选框

开关

单选框

文本域

立即提交重置