文章目录

layui表格使用：经验总结（含案例、代码、截图）
- 一、原生table案例
- - 1.1. 原生table案例 · 效果截图：
  - 1.2. 原生table案例 · 代码示下：
- 二、案例转化：layui-table，使用 · `经验总结：`
- - 2.1. 如何将原生table直接实时转化为layui-table?
  - 2.2. layui-table表格：各种边框设置
  - 2.3. 全选、取消全选
  - 2.4. 其他使用技巧

layui表格使用：经验总结（含案例、代码、截图）

引言 · 问题：

html原生表格table如何实时转换为layui-table表格？转化的开关在哪里？

layui表格组件layui-table（分为静态表格、动态表格），有哪些使用技巧？

layui-table如何实现自动分页、自动排序、自动全选？

一、原生table案例

1.1. 原生table案例 · 效果截图：

1.2. 原生table案例 · 代码示下：

link layui.min.css   原生table案例 · 代码示下:<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>全部收藏</legend></fieldset>--><!--全部收藏列表--><div class="content">                                <!-- 工具栏 --><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-primary layui-btn-xs layui-hide-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-danger layui-btn-xs layui-hide-xs" lay-event="del">删除</a><a class="layui-btn layui-btn-xs layui-hide-md" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a></script><div class="layui-btn-group demoTable" style="margin-bottom: 10px;"><button class="layui-btn changebtn" data-type="parseTable">{L('collect')}: 立即转化为数据表格</button></div><!-- 表格 --><style>/*原生table专用样式*/table{width: 100%;}table th{text-align: left;}table tr:hover{background-color: #f5f5f5;}table tr td{padding: 15px 15px;}table tr td a:hover{color: #009688;text-decoration: underline;}table tr td a.layui-btn:hover{text-decoration: none;}</style><form method="post" action="" id="myform" name="myform"><table lay-filter="aiticle-table-demo" lay-data="{width: 100%, height:auto, toolbar: '#toolbarDemo', page:true, limit: 5, limits:[5,10,15,20,25,30], id:'aiticle-table-demo'}" class="table"><thead><tr><th lay-data="{type:'checkbox', fixed: 'left'}" class="layui-hide-xs"></th><th lay-data="{width:60, field:'id', sort: true, fixed: true}" class="layui-hide-xs">ID</th><th lay-data="{width:100, field:'username'}" class="layui-hide-xs">作者</th><th lay-data="{ field:'sign', sort: true}">{L('title')}<!--标题名称--></th><th lay-data="{minWidth:150, field:'joinTime', sort: true}">{L('adddate')}<!--添加时间--></th><th lay-data="{minWidth: 150,align:'center', fixed: 'right', toolbar: '#barDemo'}">{L('operation')}<!--操作--></th></tr> </thead><tbody>{loop $favoritelist $k $v}<tr><td class="layui-hide-xs"></td><td class="layui-hide-xs">{$n}</td><td class="layui-hide-xs">默认</td><td><a href="{$v['url']}" target="_blank">{$v['title']}</a></td><td><em>{format::date($v['adddate'], 1)}</em></td><td><a href="index.php?m=member&c=index&a=favorite&id={$v['id']}" class="layui-btn layui-btn-xs layui-btn-danger">{L('delete')}</a></td></tr>{/loop}</tbody></table></form></div><!--<div id="pages">{$pages}</div>--> 转化专用:
script jquery.min.js
script layui.min.js
《script》
layui.use.table
《/script》

二、案例转化：layui-table，使用 · `经验总结：`

参考代码：
<table lay-filter="aiticle-table-demo" lay-data="{width: 100%, height:auto, toolbar: '#toolbarDemo', page:true, limit: 5, limits:[5,10,15,20,25,30], id:'aiticle-table-demo'}" class="table layui-table" lay-skin="line">
······ 内容略 ······
</table>

2.1. 如何将原生table直接实时转化为layui-table?

如上述代码，通过给<table class="table">标签增加class="layui-table"，即：<table class="table layui-table">即可实现直接转化（这样就不用上文截图中的转化按钮了）。

2.2. layui-table表格：各种边框设置

如上述代码，给<table>标签增加下列属性：
class="layui-table" lay-skin="line
其中，layui-table是应用layui-table组件化UI（事先引入样式文件layui.min.css，功能文件，jquery库.min.js，layui.min.js）；layui-skin设置表格的边框（属性值：line | row | nob）
即可完成设置。

2.3. 全选、取消全选

参考完整说明：layui静态表格：单双击事件、监听、数据渲染、全反选、操作（解说篇）

2.4. 其他使用技巧

原生与lauyitable转化：
只需要增加一个class=layui-table即可完成转化。
需要对表格进行数据操作：
就引用jquery库、layui.min.js，并通过script设置并use.layui-table进行相关操作函数的编程，具体不再赘述。可以参考官方文档、或上述案例地址。
表格边框设置：
给<table>设置属性：<table lay-skin="nob"> （属性值：line | row | nob）根据需求，可以自己拓展应用。
表格的尺寸设置：
给<table>设置属性：<table lay-size="lg"> （属性值：lg | md | sm | xs）根据需求，可以自己拓展应用。
其他，不再赘述。

以上就是关于“layui表格使用：经验总结（含案例、代码、截图）”的全部内容。

layui表格使用：经验总结（含案例、代码、截图）相关推荐

phpcmsV9 添加内容：如何“增加复选框、下拉菜单”（含案例、截图）- 教程篇
文章目录 phpcmsV9 添加内容:如何"增加多选框.下拉菜单"(含案例.截图)- 教程篇步骤: 效果截图:省略 phpcmsV9 添加内容:如何"增加多选框.下拉菜 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）
文章目录 layui进度条:调用.参数设置.动态渲染.数据热更新 (含案例.代码) 一.demo案例 1.1. 应用 · 截图: 1.2. 案例 · 全部代码: 二.自定义案例 2.1. 部分代码: ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）
文章目录 layui复选框组件:如何操控隐藏域实现checked状态切换(含代码.案例.截图) 注意: 案例 · 应用场景 · 说明: 案例 · 截图 · 示下主要代码 · 示下: 使用说明: 博主 ...
中小型研发团队架构落地实践18篇，含案例、代码
1 写在前面中小型研发团队很多,而社区在中小型研发团队架构实践方面的探讨却很少.中小型研发团队特别是 50 至 200 人的研发团队,在早期的业务探索阶段,更多关注业务逻辑,快速迭代以验证商业模式, ...
html 整行选择状态,Layui表格选中指定行的radio单选框并滚动到该行的实现代码
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作. 实现效果: HTML代码: 获取选中行数据设置选中行 layui.use('table', func ...
phpcms发布文章：overflow不显示问题（解决“代码横向溢出”）- 含代码、案例、截图
phpcms发布文章:overflow不显示问题(解决"代码横向溢出")- 含代码.案例.截图方法一:本例后台修改文章,在html源码模式下: 给<pre>标签添加 ...

layui表格使用：经验总结（含案例、代码、截图）

文章目录

layui表格使用：经验总结（含案例、代码、截图）

一、原生table案例

1.1. 原生table案例 · 效果截图：

1.2. 原生table案例 · 代码示下：

二、案例转化：layui-table，使用 · `经验总结：`

2.1. 如何将原生table直接实时转化为layui-table?

2.2. layui-table表格：各种边框设置

2.3. 全选、取消全选

2.4. 其他使用技巧

layui表格使用：经验总结（含案例、代码、截图）相关推荐

最新文章

热门文章

layui表格使用：经验总结（含案例、代码、截图）

文章目录

layui表格使用：经验总结（含案例、代码、截图）

一、原生table案例

1.1. 原生table案例 · 效果截图：

1.2. 原生table案例 · 代码示下：

二、案例转化：layui-table，使用 · 经验总结：

2.1. 如何将原生table直接实时转化为layui-table?

2.2. layui-table表格：各种边框设置

2.3. 全选、取消全选

2.4. 其他使用技巧

layui表格使用：经验总结（含案例、代码、截图）相关推荐

最新文章

热门文章

二、案例转化：layui-table，使用 · `经验总结：`