layui - 父子表

最新推荐文章于 2024-04-09 14:30:35 发布
qq_37131747
最新推荐文章于 2024-04-09 14:30:35 发布
阅读量1.2k
点赞数 1
分类专栏： layui 文章标签： layui 前端 javascript
原文链接：https://blog.csdn.net/jackson_hou03/article/details/97894817
版权
layui 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
效果图
代码
<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta id="viewport" name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
		<link rel="shortcut icon" href="img/jujianguan28x28.png" />
		<meta name="description" content="重庆人才网" />
		<meta name="keywords" content="重庆人才网" />
		<title>layui - 父子表</title>
		<link rel="stylesheet" href="//res.layuion.com/layui/dist/css/layui.css?t=1637741861917" media="all">
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<table id="bmtable" class="layui-hide" lay-filter="baoming"></table>
		<style>
			.c1 {
				color: rgb(9, 80, 13);
			}

			.c2 {
				color: rgb(223, 18, 18);
				cursor: pointer;
			}
		</style>
		<script type="text/html" id="nametpl">
			<span class="c2">{{d.college_name}}</span>
		</script>
		<script type="text/html" id="toolbartpl">
			<a class="layui-btn layui-btn-xs" href="javascript:collegeadd({{d.id}},'{{d.college_name}}')">编辑</a>
			<a class="layui-btn layui-btn-xs" href="index.php?c=zhaosheng&act=professionaladd&c_id={{d.id}}">添加专业</a>
		</script>

		<script type="text/html" id="toolbartpl_child">
			<a class="layui-btn layui-btn-xs" href="javascript:professionalDel({{d.id}})">删除</a>
			<a class="layui-btn layui-btn-xs" href="index.php?c=zhaosheng&act=professionaladd&id={{d.id}}">编辑</a>
		</script>
		<script src="//res.layuion.com/layui/dist/layui.js?t=1637741861917"></script>
		<script type="text/javascript" charset="utf-8">
			var bmtable;
			var childurl = "{yun:}$childurl{/yun}";
			layui.use(['table', 'form'], function() {
				var table = layui.table;
				var form = layui.form;
				bmtable = table.render({
					elem: "#bmtable",
					url: '{yun:}$url{/yun}',
					cellMinWidth: 80,
					limit: 10,
					page: true,
					cols: [
						[{
								type: 'checkbox'
							}, {
								field: 'id',
								title: 'ID',
								width: 80
							}, {
								field: 'college_name',
								title: '院系名称',
								event: 'collapse',
								templet: '#nametpl'
							}, {
								field: 'ctime',
								title: '时间'
							}, {
								fixed: 'right',
								title: '',
								toolbar: '#toolbartpl'
							}

						]
					],
					done: function(res, curr, count) {
						console.log(res)
					}
				});


				//监听工具条
				table.on('tool(baoming)',
					function(obj) {
						var data = obj.data;
						if (obj.event === 'collapse') {
							var trObj = layui.$(this).parent('tr'); //当前行
							var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
							var content = '<table></table>' //内容
							//表格行折叠方法
							collapseTable({
								elem: trObj,
								accordion: accordion,
								content: content,
								success: function(trObjChildren, index) { //成功回调函数
									//trObjChildren 展开tr层DOM
									//index 当前层索引
									trObjChildren.find('table').attr("id", index);
									table.render({
										elem: "#" + index,
										url: childurl + '&c_id=' + data.id,
										limit: 10,
										cellMinWidth: 80,
										page: true,
										cols: [
											[{
													field: 'id',
													width: 80,
													title: 'ID',
													sort: true
												},
												{
													field: 'name',
													title: '院系专业'
												},
												{
													field: 'introduce',
													title: '专业介绍',
													sort: true
												},
												{
													field: 'ctime',
													title: '时间'
												}, {
													fixed: 'right',
													title: '',
													toolbar: '#toolbartpl_child'
												}
											]
										]
									});

								}
							});

						}
					});

				function collapseTable(options) {
					var trObj = options.elem;
					if (!trObj) return;
					var accordion = options.accordion,
						success = options.success,
						content = options.content || '';
					var tableView = trObj.parents('.layui-table-view'); //当前表格视图
					var id = tableView.attr('lay-id'); //当前表格标识
					var index = trObj.data('index'); //当前行索引
					var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index +
						'"]'); //左侧当前固定行
					var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index +
						'"]'); //右侧当前固定行
					var colspan = trObj.find('td').length; //获取合并长度
					var trObjChildren = trObj.next(); //展开行Dom
					var indexChildren = id + '-' + index + '-children'; //展开行索引
					var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' +
						indexChildren + '"]'); //左侧展开固定行
					var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' +
						indexChildren + '"]'); //右侧展开固定行
					var lw = leftTr.width() + 15; //左宽
					var rw = rightTr.width() + 15; //右宽
					//不存在就创建展开行
					if (trObjChildren.data('index') != indexChildren) {
						//装载HTML元素
						var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan +
							'"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw +
							'px" class="layui-table-cell">' + content + '</div></td></tr>';
						trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
						var fixTr = '<tr data-index="' + indexChildren + '"></tr>'; //固定行
						leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
						rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
					}
					//展开|折叠箭头图标
					trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass(
						"layui-icon-right layui-icon-down");
					//显示|隐藏展开行
					trObjChildren.toggle();
					//开启手风琴折叠和折叠箭头
					if (accordion) {
						trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass(
							"layui-icon-down").addClass("layui-icon-right");
						trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
						rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
						leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
					}
					success(trObjChildren, indexChildren); //回调函数
					heightChildren = trObjChildren.height(); //展开高度固定
					rightTrChildren.height(heightChildren + 115).toggle(); //左固定
					leftTrChildren.height(heightChildren + 115).toggle(); //右固定
				}
				// layui.table.on('checkbox(baoming)', function(obj){
				// 	console.log(obj.checked); //当前是否选中状态
				// 	console.log(obj.data); //选中行的相关数据
				// 	console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
				// });	


			});

			function collegeDel() {
				var data = layui.table.checkStatus("bmtable").data;
				if (data.length == 0) {
					layer.msg("请选择要删除的数据!", 2, 8);
					return;
				}
				layer.confirm("确定要删除吗?", function(index) {
					var arr = new Array();
					data.forEach(function(ele) {
						arr.push(ele["id"]);
					});
					var body = {
						"data": arr
					};
					$.post("", body, function() {
						layer.close(index);
						bmtable.reload();
					});

				});
			}

			function collegeadd(id = 0, name = '') {
				var title = "添加院系";
				if (id) {
					title = "编辑院系";
				}
				layer.prompt({
					title: title,
					value: name
				}, function(value, index, elem) {
					layer.close(index);
					var body = {
						"college_name": value,
						"id": id,
					};
					$.post("", body, function() {
						layer.close(index);
						bmtable.reload();
					});
				});
			}

			function professionalDel(id) {
				layer.confirm("确定要删除吗?", function(index) {
					var body = {
						"id": id
					};
					$.post("", body, function(e) {
						layer.close(index);
						bmtable.reload();
					}, 'json');

				});
			}
		</script>
	</body>

</html>