layer之数据表格

Posted 2020-10-17

1. 最近开发使用到了layer,第一次接触,把开发中遇到的问题,和使用的方法记录下来.
   

数据表格的展示.如下图显示.

2.1

2.2 导入layer包,在这里不多说,参考官网. http://www.layui.com/doc/ 

2.3 先从简单的来显示数据,最后,再来,删除,许可流转....循环渐进.

看代码

<table id="datagrid" class="layui-table" lay-filter="Grid" ></table>

<script type="text/javascript">
layui.use(['table'],function(){
    var table = layui.table; // 加载
    table.render({
	elem: '#datagrid',  // 这个是上面table的id 
	url: '这里是你的action',
	cols: [[
	    {type:'checkbox'},
		field:'index', title: '序号', width:80,templet:'#indexTpl',sort: true},
		{field: 'id', title: '操作',align:'center',templet: '#checkboxisgs',width:250},
		{field:'tsmxId', title: '推送详情',templet: '#checkboxistsmx',sort: true,width:150},
		{field:'flag', title: '公示/未公示',templet: '#checkboxists',sort: true,width:120},
		{field:'zzjgdm', title: '统一社会信用代码或组织机构代码',sort: true,width:200},
		{field:'sqlx', title: '分类',width:300}
		{field:'zhusuo', title: '机构地址',width:300},
		{field:'sqlb', title: '说明',width:300}
	]],
	    page: true, // 是否分页 
	    height: 500,
	    height: 'full-272',
	});
}


</script>

<!-- 序号监听事件 -->
<script type="text/html" id="indexTpl">
	{{d.LAY_TABLE_INDEX+1}}
</script>

怎么添加?
<div class="layui-btn-group Table">
	<button class="layui-btn layui-btn-normal" data-type="add">
		<i class="layui-icon">&#xe608;</i>添加
	</button>
</div>

var $ = layui.$,active = {
	add: function(){
	var checkStatus = table.checkStatus('datagrid')
	layer.open({
		title: "增加信息",
		type: 2,
		maxmin: true,
		area: ['680px', '580px'],
		content: '添加页面',
		// 下面这句是,添加页面关闭后,刷新本页面.
		end: function () {
		location.reload();
	    }
        });
        },
}