bootstrap table伸缩树特效

function detailFormatter(index,row){
			// 返回提交记录详情
			console.log(row);
			var html="";
			html+="<ul class='d-lists'>";
			if(row.details.length>0){
				for(var i=0;i<row.details.length;i++){
					html+="<li>";
					html+="<div style=\"float: left;width:90%\"><span>"+row.details[i].submitTxt+"</span></div>";
					html+="<div style=\"float: right;width: 10%\"><span class=\"d-date\" style=\"float:right\">"+row.details[i].createTime+"</span></div>";
					html+="<div style=\"clear: both;\"></div>";
					html+="</li>";
				}
			}else{
				html+="<li>暂无提交记录详情</li>";
			} 
			
			html+="</ul>";
			return html;
		}

设置隐藏图标细节

 detailView: false,
 detailFormatter: detailFormatter,

覆盖源码生成的样式detail-icon

{
	title:'完成情况',
	formatter:function(value,row,index){
		return "<a href='javascript:' class=\"detail-icon\" ><i class=\"glyphicon glyphicon-plus icon-plus\"></i></a> ";  
	}
}

默认的detailView设置为true，会显示在第一列，一般操作栏都在最后一栏。
参考博客链接地址 https://blog.csdn.net/u010934312/article/details/84827855

由于是封装了bootstrap table，使用的是ruoyi框架，原生的bootstrap table类似。
符源码：

$(function() {
			
			// 解决内容不自动渲染问题
			var content = [[${task.taskContent}]];
			$("#content").html(content);
			
		    var options = {
		        url: prefix + "/getTaskUserTablelist/"+taskId,
		        sortName: "taskId",
		        modalName: "任务完成情况",
		        sortName: "finishTime",
		        sortOrder: "desc",
		        pagination:true,
		        detailView: false,
		        detailFormatter: detailFormatter,
		        columns: [
		       /*  {
		            checkbox: true
		        }, */
		        /* {
		            field: 'id',
		            title: '序号'
		        }, */
		        {
	                field: 'no',
	                title: '序号',
	                align: "center",
	                width: 40,
	                formatter: function (value, row, index) {
	                    //获取每页显示的数量
	                    var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
	                    //获取当前是第几页
	                    var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
	                    //返回序号，注意index是从0开始的，所以要加上1
	                    return pageSize * (pageNumber - 1) + index + 1;
	                }
	            },
		        {
		            field: 'userName',
		            title: '接收人'
		        },
		        {
		            field: 'readFlag',
		            title: '阅读',
		            formatter(value,row,index){
		            	if(value=='0'){
		            		return '未读';
		            	}else if(value=='1'){
		            		return '<span style="color:#0268fd">已读</span>';
		            	}
		            },
		            sortable: true
		        },
		        {
		            field: 'finishFlag',
		            title: '完成状态',
		            formatter(value,row,index){
		            	if(value=='0'){
		            		return '未完成';
		            	}else if(value=='1'){
		            		return '<span style="color:#0268fd">已完成</span>';
		            	}
		            },
		            sortable: true
		        },
		        {
		            field: 'finishTime',
		            title: '完成时间',
		            sortable: true,
		            formatter(value,row,index){
		            	if(value){
			            	return value.substring(0,16);
		            	}else{
		            		return "";
		            	}
		            }
		        },
		        
		      /*   {
		            title: '完成情况',
		            align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
		                actions.push('<a class="btn btn-primary btn-xs " href="javascript:void(0)" onclick="showSubmit(\'' + row.id + '\')"><i class="fa fa-check-square-o"></i>展开</a> ');
		                return actions.join('');
		            }
		        }, */
		        {
		        	title:'完成情况',
		        	formatter:function(value,row,index){
		        		return "<a href='javascript:' class=\"detail-icon\" ><i class=\"glyphicon glyphicon-plus icon-plus\"></i></a> ";  
		        	}
		        }
		        
		        ]
		    };
		    $.table.init(options);
		});

效果图：