layui实现展开行效果

 Table:JS:

function GetListDouble() {
	layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'jquery'], function() {
		var table = layui.table;
		var element = layui.element;
		var $ = layui.jquery //表格

		table.render({
			elem: '#Table2',
			url: 'URL',
			method: 'post',
            //headers和request可酌情添加
			headers: {
				"token": localStorage.getItem('token')
			},
			request: {
				pageName: 'page',
				limitName: 'rows',
			},
            //开启分页
			page: true,
            //给table设置 id
			id: 'Tabledata',
			cols: [
				[{
					type: 'checkbox',
					unresize: true,
					field: 'v_ID',
				}, {
					field: 'v_ContainerType',
					hide: true,
					unresize: true
				}, {
					field: 'CreateTime',
					hide: true,
					unresize: true
				}, {
					field: 'CreateUser',
					hide: true,
					unresize: true
				}, {
					field: 'DeleteMark',
					hide: true,
					unresize: true
				}, {
					field: 'FK_BookingId',
					hide: true,
					unresize: true
				}, {
					field: 'v_AllotmentDate',
					title: '日期',
					unresize: true,
					width: '25%',
                    //给需要展开的列添加状态event，添加模板
					event:'collapse',
					templet: function(res) {
						return '<div style="position: relative;\n' + '    padding: 0 10px 0 20px;">' +CutDate(res.v_AllotmentDate) +
							'<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
					}
				}, {
					field: 'v_ContainerType',
					title: '箱型',
					unresize: true,
					width: '25%',
					templet: function(res) {
						var type = res.v_ContainerType;
						var name = '';
						var localTypes = JSON.parse(localStorage.getItem("Nodes"));
						for (var i = 0; i < localTypes.length; i++) {
							if (type == localTypes[i].MyNodeId) {
								name = localTypes[i].MyNodeName;
							}
						}
						return name;
					}
				}, {
					field: 'v_Quantity',
					title: '数量',
					unresize: true,
					width: '25%'
				}, {
					field: '',
					title: '时间',
					unresize: true,

				}]
			],

			//双击事件
			done: function(res, curr, count) {
				//无数据时也有滚动条
				count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');

				var data = res.data;
				$('.layui-table-body tr').each(function() {
					var dataindex = $(this).attr('data-index');
					var idx = 0;


					for (var item in data) {
						if (dataindex == idx) {
							$(this).dblclick(function() {

							});
							break;
						}
						idx++;
					};
				});


			}
		});
		
		table.on('tool(test)',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){
                        //给当前table添加id和lay-filter
						trObjChildren.find('table').attr("id", index);
						trObjChildren.find('table').attr("lay-filter", index);
                        //渲染table
						table.render({
							elem: "#" + index,
							url: 'URL',
							limit: 3,
							toolbar:'#tablebar',
							defaultToolbar: [],
							// id:index,//用于表格重载
							cellMinWidth: 80,
							cols: [
								[{
										field: 'v_ID',
										type: 'checkbox',
									},
									{
										field: 'v_TruckName',
										title: '订舱号'
									},
									{
										field: 'sex',
										title: '发票号',
									},
									{
										field: 'city',
										title: '目的港'
									},
									{
										field: 'city',
										title: '箱号'
									},
									{
										field: 'city',
										title: '规格'
									},
									{
										field: 'city',
										title: '重量'
									},
									{
										field: 'city',
										title: '封号'
									},
									{
										field: 'city',
										title: '装货日期'
									},
									{
										field: 'city',
										title: '实际到达'
									},
									{
										fixed: 'right',
										align: 'center',
										toolbar: '#barDemo'
									}
								]
							]
						});
                        //重新加载element
						element.init();
                        //监听当前table的头部工具栏点击事件
						table.on('toolbar('+index+')',function(obj){
							var checkStatus = table.checkStatus(obj.config.id);
							var data=checkStatus.data;
							console.log(data);
							switch(obj.event){
								case'selecttime':
									
							}
						})
					}
				})
			}
			
            //监听行的修改按钮点击
			if (obj.event === 'edittime') {
				var NewValue = new Array();
			
				str = $(this)[0].text == "修改" ? "提交" : "修改";
				$(this).text(str); // 按钮被点击后，在“编辑”和“确定”之间切换
			
				var tdvalue = $(this).parent().parent().parent().children("td");
				$(this).parent().parent().parent().children("td").each(function(i) { // 获取当前行的其他单元格
					if (i <tdvalue.length-1&&i>0) {
						var nodeValue=$(this)[0].attributes[1].nodeValue;
						obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
						// 如果没有文本框，则添加文本框使之可以编辑
						if (!obj_text.length) {
							$(this).html("<input type='text' style='width:50%;' value='" + $(this).text() + "'>");
						}
						// 如果已经存在文本框，则将其显示为文本框修改的值
						else {
							$(this).html("<div class='layui-table-cell laytable-cell-"+nodeValue+"'>"+obj_text.val()+"</div>");
							NewValue[i] = obj_text.val();
							element.init();
						}
					}
				});
				var id='',Name='',log1='';
				if ($(this)[0].text == '提交') {
					return;
				} else if ($(this)[0].text == '修改') {
					id=NewValue[0];
					Name=NewValue[1];
					log1=NewValue[2];
					console.log(NewValue);
					
				}
			}
		})
		
		var active = {
			newBtn: function() {
				var checkStatus = table.checkStatus('Tabledata'),
					data = checkStatus.data;
				layer.open({
					type: 2,
					title: '新增单箱',
					maxmin: true,
					area: ['600px', '600px'],
					shadeClose: true,
					area: ['420px', '340px'], //宽高
					content: 'AddForm.html?FK_BookingId=' + GetQueryString('FK_BookingId')
				});
			},
			editBtn: function() {
				var checkStatus = table.checkStatus('Tabledata'),
					data = checkStatus.data;
				if (checkobj(data.length)) {
					//修改
                    //存入localstorge
					var thisValue = {
						"v_ID": data[0].v_ID,
						"FK_BookingId": data[0].FK_BookingId,
						"CreateTime": data[0].CreateTime,
						"CreateUser": data[0].CreateUser,
						"DeleteMark": data[0].DeleteMark,
						"v_AllotmentDate": data[0].v_AllotmentDate,
						"v_ContainerType": data[0].v_ContainerType,
						"v_Quantity": data[0].v_Quantity,
					};
					localStorage.setItem('ThisValue', JSON.stringify(thisValue));
					layer.open({
						type: 2,
						title: '新增单箱',
						maxmin: true,
						area: ['600px', '600px'],
						shadeClose: true,
						area: ['420px', '340px'], //宽高
						content: 'AddForm.html?title=U'
					});
				}
			},
			deleteBtn: function() {
				var checkStatus = table.checkStatus('Tabledata'),
					data = checkStatus.data;
				if (checkobj(data.length)) {
					//删除
					Delone(data[0].v_ID);
				}
			}
		};
		//判断点击类型，上面active必加的点击
		$('.tableDiv .btm').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
}

 

折叠行方法：

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(); //右固定
}