layui框架入门

  • A+
所属分类：Web前端
摘要

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：
便宜好用的国外VPS推荐

layui框架学习

1. table 数据表格文档

1.三种初始化渲染方式

方式 机制 适用场景
01. 方法渲染 用JS方法的配置完成渲染 （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02. 自动渲染 HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分
03. 转换静态表格 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

1.方法渲染

<table id="demo" lay-filter="test"></table> <script> 			layui.use('table',function(){ 				var table = layui.table;			 				//第一个实例 				table.render({ 					elem:'#demo',  //table的id 					height:300, 					url:'js/user.json', 					page:true, 					cols:[[  //表头 					{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} 					      ,{field: 'username', title: '用户名', width:80} 					      ,{field: 'sex', title: '性别', width:80, sort: true} 					      ,{field: 'city', title: '城市', width:80}  					      ,{field: 'sign', title: '签名', width: 177} 					]]					 				});								 			});	 		</script>

2.自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

  1. 带有 class="layui-table" 的 标签。

  2. 对标签设置属性 lay-data="" 用于配置一些基础参数
  3. 在

便宜好用的国外VPS推荐