首页 > 其他分享 >layui9

layui9

时间:2022-11-29 12:45:37浏览次数:70  
标签:field title JS width 渲染 table layui9

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" 的 标签。

       

 

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

标签:field,title,JS,width,渲染,table,layui9
From: https://www.cnblogs.com/chenyutong0321/p/16935107.html

相关文章