layui table组件常见用法总结

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

下边整理了一个例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>layer学习</title>
	<link href="/Content/mycss.css" rel="stylesheet" />
	<link href="/Content/layui/css/layui.css" rel="stylesheet" />
	<script src="/Content/layui/layui.js"></script>
</head>

<body>
<!--表格-->
<div id="myTable" lay-filter="test"></div>
<!--工具栏-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="allow">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"{{ 
	d.IsAllow==t rue ? 'checked' : '' 
	}}>
</script>
<script>
layui.use(['table', 'form'], function() {
	var table = layui.table;
	form = layui.form;
	//*******************************渲染表格**********************************
	table.render({
		//------------------------核心参数
		elem: '#myTable' //渲染的dom元素
			,
		url: '/Home/GetUserList' //异步请求接口
			,
		page: true //开启分页
			,
		id: 'elementID' //容器唯一ID
			,
		cols: [
			[ //列设置
				{
					field: 'Id',
					title: '编号',
					sort: true,
					fixed: 'left'
				}, {
					field: 'Name',
					title: '姓名'
				}, {
					field: 'Age',
					title: '年龄'
				}, {
					field: 'Role',
					title: '角色'
				}, {
					field: 'CreateTime',
					title: '创建时间'
				}, {
					title: '自定义模板',
					width: 200,
					templet: function(d) {
					return '姓名:<span style="color: #c00;">' + d.Name + '</span>'
					}
				}, {
					field: 'IsAllow',
					title: '是否使用',
					templet: '#allow',
					unresize: true,
					align: 'center'
				}, {
					fixed: 'right',
					width: 150,
					align: 'center',
					toolbar: '#barDemo'
				}
			]
		]

		//-----------------------------异步请求设置
		,
		method: 'post' //异步请求方式
			,
		headers: {
			hello: 'hengheng'
		} //在request的header中添加数据
		,
		request: { //request设置,默认值如下
			pageName: 'page',
			limitName: 'limit'
		},
		response: { //response设置,默认值如下
			statusName: 'code',
			countName: 'count',
			dataName: 'data',
			msgName: 'msg'
		},
		where: { //向后台添加的额外参数
			nameParm: 'u',
			roleParm: 'o'
		}
		//-----------------------加载的其他选项
		,
		done: function(res, curr, count) {
			//res为接口返回的数据、count为数据总长度
			console.log(res);
			console.log(curr);
			console.log(count);
		},
		text: {
			none: '暂无相关数据' //默认:无数据。
		},
		initSort: {
			field: 'Id' //排序字段为Id
				,
			type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
		}
	})

	//*******************************监听表格**********************************

	table.on('tool(test)', function(obj) { //test为lay-filter值
		var data = obj.data; //获得当前行数据
		var layEvent = obj.event; //获得 lay-event
		var tr = obj.tr; //获得当前行 tr 的DOM对象

		if(layEvent === 'edit') {
			var id = data.Id;
			layer.open({
				type: 2,
				title: '修改' //标题栏
					,
				scrollbar: false,
				area: ['400px', '300px'],
				shade: 0.5,
				id: 'layerId' //设定一个id,防止重复弹出
					,
				moveType: 1 //拖拽模式,0或者1
					,
				content: '/Home/EditUserInfo?id=' + id
			});
		} else if(layEvent === 'del') {
			layer.confirm('真的删除吗?', function(index) {
				obj.del(); //删除对应行(tr)的DOM结构
				layer.close(index);
				var id = data.Id; //向服务端发送删除指令
				$.post("/Home/DeleteUserInfo", {
					"id": id
				}, function(result) {
					if(result.IsSuccess === 1) {
						layer.msg(result.Msg);
						table.reload('elementID');
					} else {
						layer.msg(result.Msg);
						table.reload('elementID');
					}
				})
			});
		}
	});

	//*******************************监听checkbox********************************
	//监听操作----置顶
	form.on('checkbox(allowSetFilter)', function(obj) {
		var pre = {
			"Id": this.name,
			"IsAllow": obj.elem.checked
		};
		//alert(this.name+'----'+obj.elem.checked);
		$.post('/Home/SetAllow', pre, function(result) {
			if(result.IsSuccess === 1) {
				layer.msg(result.msg)
			} else {
				layer.msg(result.msg)
			}
		})
	});

});
</script>
</body>

</html>

推荐文章
layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

如何使用webpack打包layui?(实践)

总的来说打包webpack打包layui要解决几个问题:1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题,基本就能成功打包了首先安装l

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui是什么软件?

layui不是软件,它是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到AP

浅谈layui中的table字段筛选功能

table模块在layui2.0的版本中全新推出,是layui框架最核心的组成之一。本篇文章就来为大家介绍一下layui框架的table模块的字段筛选功能,希望对大家有一定的帮助。先看效果,使用过ex

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

浅谈layui中iframe跳转链接和页面按钮跳转相关问题

一、导航跳转iframe页面问题:关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:在模板页的导航代码: 所有商品 商品列表 商品属性 商品分类 添加 解决方案

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

layui如何实现下载功能?

layui实现下载功能的方法:a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。用原生上传文件标签上传文件,获取上传文件的全路径:$('#file').change(f

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

浅谈layui中使用函数layui.define的方法

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

layui中关于弹出层关闭和刷新问题

描述:主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:1是主页面,2是子弹窗,3是孙弹窗功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3上js代码,先贴出如何在主页面1中

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

layui动态表格之合并单元格

需求:下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:①第一步:再生成表格后调用此方法,以合并重复的单元格done:function(res,curr,count){ merge(

前端layui框架快速上手

一、介绍在使用layui之前,我们先要了解一下layui是什么?我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框

项目中如何优雅地使用函数 layui.define

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

浅谈layui中table.render的使用(附代码)

layui框架提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、layDate、layPage、laytpl、table等。本篇文章给大家浅谈一下layui中table.r

layui如何使用open属性隐藏按钮?

layui中可以在layer.open方法中添加closeBtn:0样式来隐藏按钮。closeBtn-关闭按钮类型:String/Boolean,默认:1layer提供了两种风格的关闭按钮,可通过配置