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>
Image placeholder
前端答疑
未设置
  31人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue组件基础用法详解

概述在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

MySQL 性能优化:8 种常见 SQL 错误用法!

1、LIMIT语句分页查询是最常用的场景之一,但也通常也是最容易出问题的地方。比如对于下面简单的语句,一般DBA想到的办法是在type,name,create_time字段上加组合索引。这样条件排序都

jquery easyui和layui的区别是什么?

jqueryeasyuijQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

【搞定 Java 并发面试】面试最常问的 Java 并发基础常见面试题总结!

Java并发基础常见面试题总结 1.什么是线程和进程? 1.1.何为进程? 进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。系统运行一个程序即是一个进程从创建,运行到消亡的过程。

Linux下的常见命令总结

一、权限思路:修改权限:----很多文档没有权限需要修改权限1.当命令权限不足时-----sudosudo是用普通用户执行只有管理员才能运行的命令,相比较直接用管理员帐户安全su是切换到root用户(

详解layui.layer独立组件

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

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

开发中常见的Oracle三大故障与调优方法

墨墨导读:怀晓明先生(网名lastwinner),是具有多年数据库开发与项目管理经验的数据库专家。曾获得第一届ITPUB较佳建议奖,在多个大型IT企业多年的工作历练中,积累了丰富的系统架构设计经验。合

PHP 安全问题入门:10 个常见安全问题 + 实例讲解

相对于其他几种语言来说,PHP在web建站方面有更大的优势,即使是新手,也能很容易搭建一个网站出来。但这种优势也容易带来一些负面影响,因为很多的PHP教程没有涉及到安全方面的知识。 此帖子分为几部分

Go语言高级编程_1.6 常见的并发模式

1.6常见的并发模式 Go语言最吸引人的地方是它内建的并发支持。Go语言并发体系的理论是C.A.RHoare在1978年提出的CSP(CommunicatingSequentialProcess,通讯

Go语言高级编程_5.7 layout 常见大型 Web 项目分层

5.7layout常见大型Web项目分层 流行的Web框架大多数是MVC框架,MVC这个概念最早由TrygveReenskaug在1978年提出,为了能够对GUI类型的应用进行方便扩展,将程序划分为:

炸!业界难题,跨库分页的几种常见方案

为什么需要研究跨库分页?互联网很多业务都有分页拉取数据的需求,例如:(1)微信消息过多时,拉取第N页消息;(2)京东下单过多时,拉取第N页订单;(3)浏览58同城,查看第N页帖子;这些业务场景对应的消

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建U

CSS常见布局问题

1、多元素水平居中实现一下效果:平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们

稳定性专题 | Spring Boot 常见错误及解决方法

导读『StabilityGuide』是阿里多位阿里技术工程师共同发起的稳定性领域的知识库开源项目,涵盖性能压测、故障演练、JVM、应用容器、服务框架、流量调度、监控、诊断等多个技术领域,以更结构化的方

一文带你掌握常见的Pandas性能优化方法,让你的pandas飞起来!

微信公众号:「Python读财」如有问题或建议,请公众号留言Pandas是Python中用于数据处理与分析的屠龙刀,想必大家也都不陌生,但Pandas在使用上有一些技巧和需要注意的地方,尤其是对于较大

jquery ui和easyui区别?

jqueryui和easyui区别?●jqueryui是jQuery插件,是由jQuery官方维护的UI方向的插件●easyui也是jQuery插件,是第三方维护的插件●jqueryui是免费的界面库

jquery easyui乱码怎么办?

jqueryeasyui乱码怎么办?之所以出现乱码是因为,我们在引入easyui以后,它里面的汉化包并没产生作用而汉化包没有发生作用的原因有:1.汉化包引入路径有问题,文件找不到404,这个很简单,只

详解layui后台框架的搭建

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

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

jquery easyui是什么?

jQueryEasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者