jquery实现自定义树形表格的方法【自定义树形结构table】
本文实例讲述了jquery实现自定义树形表格的方法。分享给大家供大家参考,具体如下:
话不多说,直接上代码(本代码仅提供思路):
functioncreateTables(data,t,p){
$("#datatable"+t+'tbody').empty();
varcount=data.length;
varhtml='';
if(count>0){
for(vari=0;i0){
btn='';
}else{
btn='';
}
html+=''+
''+btn+data[i].name+'('+data[i].title+')'+''+
''+(data[i].source_name?data[i].source_name:'')+' '+
''+data[i].show_time+' '+
''+dataFormat(data[i].current_record,data[i].unit)+' '+
''+dataFormat(data[i].prev_record,data[i].unit)+' '+
''+dataFormat(data[i].last_record,data[i].unit)+' '+
''+dataFormat(data[i].budget,data[i].unit)+' '+
''+dataFormat(data[i].budget_rate,'%')+' '+
''+dataFormat(data[i].record_rate)+' '+
''+dataFormat(data[i].mom,'%')+' '+
''+dataFormat(data[i].yoy,'%')+' '+
' '+
'';
if(data[i]._child&&data[i]._child.length>0){
html=createNewTable(data[i]._child,html,1,t);
}
}
}else{
html='暂无数据 ';
}
$("#datatable"+t+'tbody').html(html);//插入的表格
initTreeAction(t);//结构初始化
}
functioncreateNewTable(data,html,y,t)
{
varcounts=data.length;
varnum=++y;
for(vari=0;i0){
css='text-indent:'+(num==2?20:(num-1)*20)+'px;';
btn='';
}else{
btn='';
}
html+=''+
''+btn+data[i].name+'('+data[i].title+')'+''+
''+(data[i].source_name?data[i].source_name:'')+' '+
''+data[i].show_time+' '+
''+dataFormat(data[i].current_record,data[i].unit)+' '+
''+dataFormat(data[i].prev_record,data[i].unit)+' '+
''+dataFormat(data[i].last_record,data[i].unit)+' '+
''+dataFormat(data[i].budget,data[i].unit)+' '+
''+dataFormat(data[i].budget_rate,'%')+' '+
''+dataFormat(data[i].record_rate)+' '+
''+dataFormat(data[i].mom,'%')+' '+
''+dataFormat(data[i].yoy,'%')+' '+
' '+
'';
if(data[i]._child&&data[i]._child.length>0){
html=createNewTable(data[i]._child,html,num,t);
}
}
returnhtml;
}
functionshowLowData(obj)
{
varmId=$(obj).attr('data-tid');
varisOpen=$(obj).hasClass('open');
if(isOpen){
$(obj).removeClass('open');
if($(obj).hasClass('layui-icon')){
$(obj).html('');
}
}else{
$(obj).addClass('open');
if($(obj).hasClass('layui-icon')){
$(obj).html('');
}
}
$(obj).parents('tbody').find('tr').each(function(){
varmt=$(this).find('.mt-icon');
varpid=mt.attr('data-pid');
varOpen=mt.hasClass('open');
vartype=mt.attr('data-type');
if(mId==pid){
if(isOpen){
$(this).hide();
if(type=='dir'&&Open==isOpen){
mt.trigger('click');
}
}else{
$(this).show();
}
}
});
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQueryform操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。