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

---

---

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表格使用：经验总结（含案例、代码、截图）”的全部内容。