layui布局、表格渲染和动态表格生成方法

总体效果：

首先，百度搜索layui的地址，然后下载layui的压缩包，解压缩压缩包的文件，然后将解压缩的文件复制到您的编译器；

第二，创建一个html文件，介绍两个文件，layui.css和layui.js一定要写对地址，css和js要一起引用；

第三，整个页面分为三个部分。正文标记中要引用的类是class='layui-layout-body '

3.1.头部：用大div包装，class=' layui-layui-layout-admin '，然后可以设计自己的logo或者需要的二次导航。具体实现代码如下：

3.2.对于左边的设置，因为要达到的效果是点击左边显示右边的内容，所以左边最重要的是iframe框架和两个新创建的html文件；在右边的主题内容区域，将iframe的名称值设置为关键点，因为左边的超链接可以根据A标签中target=“iframe的名称”的值，通过点击左边来显示右边的内容。具体实现代码如下：

！-使用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-item ed ' a href=' D _ righer . html ' Rel=' external nofollow ' target=' option '数据表/a/Li class=' layui-nav-item layui-nav-item ed ' a href=' form . html ' Rel=' external nofollow ' target=' option ' form/a/Rel='external nofollow '数据表/a/li /ul /div /div3.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=' Http :d _ rightr . html ' style=' overflow : visible；'滚动='否'框架边框='否'宽度=' 100% '高度=' 100%'/iframe/div/div已设置为此主页！

第二部分：D _扶正器. html(即动态生成表的部分)

因为只是测试代码，后台数据库不支持，所以界面会异常；

注：渲染方法总共有三种，今天介绍两种：方法渲染和自动渲染；今天，我们使用方法来渲染；

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

自动渲染：自动渲染是指自动渲染表格的方法，即在表格容器的某一节中配置相应的参数，在表格模块中实现自动渲染。

1.class='layui-table '的table标记；

2.在标签上设置属性lay-data=' '，配置一些基本参数；

3.在第个标签中设置属性lay-data=' '来配置头信息

具体实现代码如下，

第三部分：形式的实现

Layui为各种表单元素提供了全面的ui支持，因此您不需要编写那些UI结构。你只需要写HTML原始输入的基本标签，选择和textarea。我们在UI上的渲染只需要一点点，我们必须把class='layui-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='请输入标题自动完成=' off ' class=' layui-input '/div/div class=' layui-form-item ' label class=' layui-form-label '密码框/label div class=' layui-input-inline ' input type=' password ' name=' “需要密码”lay-verify=“需要”占位符=”请输入密码自动完成=' off ' class=' layui-input '/div div class=' layui-form-mid layui-word-aux '辅助文字/div/div class=' layui-form-item ' label class=' layui-form-label '选择框/label div class=' layui-input-block ' select name=' city ' lay-verify=' required '选项值=' '/选项选项值='0 '北京/option选项值='1 '上海/option选项值='2 '广州/option选项值='3 '深圳/option选项值='4 '杭州/option/select/div/div class=' layui-form-item ' label class=' layui-form-label '复选框/label div class=' layui-input-block ' input type='复选框name=' like[write]' title='写作输入类型='复选框'名称='像[read]' title='阅读选中输入类型='复选框'名称='像[dai]'标题='发呆/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 class=' layui-form-item ' label class=' layui-form-label '单选框/label div class=' layui-input-block ' input type=' radio ' name=' sex ' value='男标题='男输入类型='收音机'名称='性'值='女标题='女checked/div/div class=' layui-form-item layui-form-text '标签class='layui-form-label '文本域/label div class=' layui-input-block '文本区域名称=' desc '占位符='请输入内容class=' layui-text area '/text area/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 '重置/按钮/div/表单必须放入获得所规范的元素结构，形式模块才会对其进行重置渲染。值得注意的是，在具体的每一块表单元素中，仍是像往日一样写投入等标签即可。另外，我们对我们所规范的结构进行了响应式的支持，而针对一些不同的表单排版，比如行内表单，也只需要设定所定义好的班级即可。

以上这篇获得的布局和表格的渲染以及动态生成表格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。