table 数据表格文档 - layui.table

在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能.

table.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <link rel="stylesheet" href="../layui/css/layui.css" media="all"/>
	</head>
	<body>
		<div style="width: 800px;">
		<table id="demo" lay-filter="filterDemo"></table>
		</div>
		<script src="../layui/layui.js"></script>
		<script>
		layui.use('table', function(){
		  var table = layui.table;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo',
			width:'800px',
		    url:"../json/tabledata.json",
		    page: true //开启分页
		    ,cols: [[ //表头
						  {field: '', title: '', type:'checkbox', LAY_CHECKED:true, fixed: 'left',width:'50'}
						  ,{field:'',title:'序号',type:'numbers',width:'50'}
						  ,{field:'id',title:'ID',sort:true,width:'100'}
						  ,{field: 'username', title: '用户名', edit:true,width:'100'}
						  ,{field: 'pwd', title: '密码',width:'100'}
						  ,{field: 'sex', title: '性别',templet:'#sextemp',width:'100'},
						  {field: '',width:'295',title:'操作',toolbar:'#tooldemo'}
						]],
			toolbar:"#bardemo"
		  }),
		  
		  //tool监听
		  table.on('tool(filterDemo)',function(obj){
			if(obj.event === 'detail'){
				layer.msg("查看");
			}else if(obj.event === 'edit'){
				layer.msg("编辑");
			}else if(obj.event){
				layer.confirm('真的要删除吗？',function(index){
					obj.tr.remove();
					layer.close(index);
				})
			}
		  }),
		  
		  table.on('toolbar(filterDemo)',function(obj){
			  var event = obj.event;
			  if(event === 'delall'){
				  var ss = table.checkStatus('demo');//选中对应id的值
				  var leg = ss.data.length;
				  var cs =  table.checkStatus('demo');
				  layer.confirm("确定删除选中的"+leg+"数据吗",function(index){
					  //删除
					  
					  //服务器删除
					  
					  //关闭
					  layer.close(index);
					  
					  //刷新表格
					  table.reload('demo',function(){
						  where:{}
					  })
				  })
			  }else if(event === 'add'){
				  layer.open({
					  type:2,
					  title:"添加",
					  content:"add.html",
					  area:['80%','80%']
				  })
			  }
			  
		  })
			
			
			
		});
		</script>
		<script type="text/html" id="tooldemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script type="text/html" id="bardemo">
			<button type="button" class="layui-btn layui-btn-xs" lay-event="delall">全部删除</button>
			<button type="button" class="layui-btn layui-btn-xs" lay-event="add">添加</button>
		</script>
		
<!-- 		<script type="text/html" id="sextemp">
			
			{
   
   {#
				if('sex' == 1){
					return '男';
				}
				else if('sex' == 0){
					return '女';
				}
			}}
		</script> -->
	</body>
</html>

table.json

{
	"code":0,
	"msg":"",
	"count":2,
	"data":[{
		"id":"001",
		"username":"111",
		"pwd":"111",
		"sex":"男"
	},{
		"id":"002",
		"username":"111",
		"pwd":"111",
		"sex":"女"
	}
	]
}

table 数据表格文档 - layui.table

table.html

table.json

效果图：

猜你喜欢