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;i 暂无数据 0){ 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程序设计有所帮助。