layui数据表格的渲染方式

最新推荐文章于 2023-08-04 09:28:13 发布

aqzengkuasheng

最新推荐文章于 2023-08-04 09:28:13 发布

阅读量1.3k

点赞数

分类专栏：前端框架文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/123189413

版权

layui 表格渲染自动加载 lay-data 前端开发

关键词由CSDN通过智能技术生成

前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table id="demo"></table>
		
		
		<!-- 方法一：自动渲染 -->
		<!-- 方法渲染 -->
		<!-- 准备标签，设置ID属性值 -->
		<table id="demo2"></table>
		
		
		<!-- 方法2：自动渲染 -->
<!-- 		// 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染
		// 方法。
		// 1) 带有 class="layui-table" 的标签。
		// 2) 对标签设置属性 lay-data="" 用于配置一些基础参数
		// 3) 在标签中设置属性lay-data=""用于配置表头信息 -->	
		<table class="layui-table" lay-data="{url:'user.json',page:true}">
		  <thead>
		    <tr>
		      <!-- <th lay-data="{field:'id'}">ID</th> -->
		       <th lay-data="{field:'id',width:100}">用户名</th>
		     <!--  <th lay-data="{field:'username'}">用户名</th> -->
		 <th lay-data="{field:'username'}"></th>
		     <!--  <th lay-data="{field:'sex', sort: true}">性别</th> -->
		 <th lay-data="{field:'sex',sort:true}">性别</th>
		    </tr>
		  </thead>
		</table>
		
		<!-- 方法3：转换静态表格 -->
		<table lay-filter="demo">
		    <thead>
		        <tr>
		            <th lay-data="{field:'username', width:100}">昵称</th>
		            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
		            <th lay-data="{field:'sign'}">签名</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>贤心1</td>
		            <td>66</td>
		            <td>人生就像是一场修行a</td>
		        </tr>
		    </tbody>
		</table>
		
		<script type="text/javascript">
			//加载table模块
			layui.use("table",function(){
				
				var table=layui.table;
				//加载table示例
				// table.render({
				// 	elem:'#demo' ,//demo是容器的ID属性值
    //                 url:"user.json",
				// 	cols:[[
				// 		{field:'id',title:"用户编号",sort:true,width:120},
				// 		{field:'username',title:"用户名",sort:true,width:80},
				// 		{field:'sex',title:"性别",sort:true,width:80},
				// 		{field:'city',title:"城市",sort:true,width:80},
				// 		{field:'sign',title:"签名"}
				// 	]]   //设置列
				// });
				
				
				// 方法一：方法渲染
				 // table.render({
				 //        elem: '#demo2' // 指定原始表格元素选择器（推荐id选择器）
				 //       ,url: 'user.json' // 数据接口
				 //       ,height: 315 // 容器高度
				 //       ,page:true // 开启分页
				 //       ,cols: [[  // 设置表头
				 //           {field: 'id', title: 'ID'}
				 //           ,{field: 'username', title: '用户名'}
				 //           ,{field: 'sex', title: '性别'}
				 //       ]]
				 //     });  
				 
				  // 转换静态表格
				     table.init('demo', {
				         height: 315 // 设置高度
				         // 支持所有基础参数
				    });

			});
		</script>
	</body>
</html>