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(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

前端layui框架快速上手

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

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

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

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

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

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

浅谈让 layui table 固定列也能监听滚动的方法

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列

layui是什么软件?

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

vue.js和layui一样么?

vue.jsVue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,方

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

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

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

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

laypage组件常见用法总结

laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。核心方法:laypage.render(options)来设置基础参数。一、laypage的常用基

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

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

详解layui后台框架的搭建

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

layui是什么时候开发的?

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

浅谈Layui如何实现input输入和选择

Layui实现input输入和选择的方法:HTML代码: 移交单位* 111 222 333 444 555 其中input的几个style样式简单说一下。position:absolu

详解layui.layer独立组件

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

Layui的简易入门教程

获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

layui框架学习之flow组件常见用法总结

该模块包含信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。下边分别给出了这两种技术的使用方法:一、信息流加载信息流加载的核心方法时flow.load(optio