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或者所需要的⼆级导航，具体实现代码如下所⽰：
3.2、对左边的设置，因为要实现的效果是点击左边显⽰右边的内容，所以在左边最重要的是iframe框架和新建的两个html⽂件；在右边的主题内容区域，将iframe的name值的设置为重点，因为在左边得超链接是根据<a>标签⾥得target=“iframe的name”值才能实现点击左边显⽰右边的内容，具体实现代码如下：
<!--⽤layui布局左边的样式-->
<div class="layui-side layui-bg-black" >
<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" >
<div >
<iframe id="option" name="option" src="D_righter.html" 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 针对各种表单元素做了较为全⾯的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>
layui下载</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的布局和表格的渲染以及动态⽣成表格的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。