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