表格折叠展开html,Layui数据表格展开折叠(示例代码)

layui

elem:‘#tableOut‘,

data: [

{

id:1, name:‘小米‘, age:‘16‘,

friend: [{ id:2, name:‘大米‘, age:‘28‘}, { id:5, name:‘小虎‘, age:‘16‘}]

},

{

id:2, name:‘大米‘, age:‘28‘,

friend: [{ id:1, name:‘小米‘, age:‘28‘}]

},

{ id:3, name:‘小花‘, age:0},

{ id:4, name:‘小甲‘, age:‘28‘},

{ id:5, name:‘小虎‘, age:‘16‘},

{ id:6, name:‘小贤‘, age:‘28‘}],

page: {},

cols: [[

{

field:‘btn‘,

width:50,

align:‘center‘,

templet:function(d) {return ‘+‘}

},

{ field:‘id‘, title:‘ID‘, sort:true},

{ field:‘name‘, title:‘名称‘, edit:true},

{ field:‘age‘, title:‘年龄‘, sort:true}

]],

});//假释真的需要默认点击搜索在下面table render过之后再调用$dom.click()即可

//监听工具条

table.on(‘tool(tableOut)‘,function(obj) {//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

vardata=obj.data;//获得当前行数据

varlayEvent=obj.event;//获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

//异常不要用它原来的这个作为tr的dom

//var tr = obj.tr; //获得当前行 tr 的DOM对象

var$this =$(this);vartr=$this.parents(‘tr‘);vartrIndex=tr.data(‘index‘);if(layEvent=== ‘addRowTable‘) {//外围的table的id + tableIn_ + 当前的tr的data-index

$(this).attr(‘lay-event‘,‘fold‘).html(‘-‘);vartableId= ‘tableOut_tableIn_‘ +trIndex;var_html=[‘

‘,‘‘,‘‘,//可以嵌套表格也可以是其他内容，如是其他内容则无须渲染该表格

‘

‘,‘‘];

tr.after(_html.join(‘‘));//渲染table

table.render({

elem:‘#‘ +tableId,

data: data.friend||[],

cols: [[

{ field:‘id‘, title:‘ID‘},

{ field:‘name‘, title:‘朋友姓名‘},

{ field:‘age‘, title:‘年龄‘}

]],

});//$(window).resize();

}else if(layEvent=== ‘fold‘) {

$(this).attr(‘lay-event‘,‘addRowTable‘).html(‘+‘);

tr.next().remove();

}

});

});