这样的效果需要两部，第一步，加载一级目录，
然后，点击触发事件，加载二级目录，插入tr
/*
默认触发事件
*/
$(function(){
initGridSource2();
});
/**
加载一级数据
**/
initGridSource2=function(){
var initData2 =gridSourcemain.initData2();
var initData3=[];
for(var i =0;i<initData2.length;i++){
if(initData2[i].parentId==0){
initData3.push(initData2[i]);
}
}
gridSourcemain.initSource2(initData3);
};
/*
默认加载一级目录
**/
initSource2:function(sourceData){
var imgStr1 ="<img src='"+basePath+"/images/main/hengxiang_07.png'>";
var hongse1="<img class='imgcss' src='"+basePath+"/images/main/hongse1.png'>";
var hongse2="<img class='imgcss' src='"+basePath+"/images/main/hongse2.png'>";
var huangse1="<img class='imgcss' src='"+basePath+"/images/main/huangse3.png'>";
var huangse2="<img class='imgcss' src='"+basePath+"/images/main/huangse4.png'>";
var lvse="<img class='imgcss' src='"+basePath+"/images/main/lvse5.png'>";
var html = '';
var len=sourceData.length;
for(var i=0;i<len;i++) {
var item = sourceData[i];
var sid=item.sid;
var name=item.name || "";
var integrityRate=item.integrityRate || 0;
var integrityColor = "";
if(integrityRate >= 90) {
integrityColor = lvse;
}else if(integrityRate >= 80 && integrityRate < 90) {
integrityColor = huangse2;
}else if(integrityRate >= 70 && integrityRate < 80) {
integrityColor = huangse1;
}else if(integrityRate >= 40 && integrityRate < 70) {
integrityColor = hongse2;
}else {
integrityColor = hongse1;
}
var timelinessRate=item.timelinessRate || 0;
var timelinessColor = "";
if(timelinessRate >= 90) {
timelinessColor = lvse;
}else if(timelinessRate >= 80 && timelinessRate < 90) {
timelinessColor = huangse2;
}else if(timelinessRate >= 70 && timelinessRate < 80) {
timelinessColor = huangse1;
}else if(timelinessRate >= 40 && timelinessRate < 70) {
timelinessColor = hongse2;
}else {
timelinessColor = hongse1;
}
var effectiveRate=item.effectiveRate || 0;
var effectiveColor = "";
if(effectiveRate >= 90) {
effectiveColor = lvse;
}else if(effectiveRate >= 80 && effectiveRate < 90) {
effectiveColor = huangse2;
}else if(effectiveRate >= 70 && effectiveRate < 80) {
effectiveColor = huangse1;
}else if(effectiveRate >= 40 && effectiveRate < 70) {
effectiveColor = hongse2;
}else {
integrityColor = hongse1;
}
html += "<tr id='"+sid+"'>";
html += "<td class='spaceth ' onclick='gridSourcemain.initSourceDetail("+sid+",\""+name+"\")'>"+imgStr1+"</td>";
html += '<td class="nopadding" title="'+item.name+'">'+' '+name+'</a></td>';
html += '<td class="nopadding" > '+
integrityColor+' '+ integrityRate+"%"
'</div>'+
'</td>';
html += '<td class="nopadding"> '+
timelinessColor+' '+timelinessRate+"%"
'</div>'+
'</td>';
html += '<td class="nopadding"> '+
effectiveColor+' '+effectiveRate+"%"
'</div>'+
'</td>';
html += '</tr>';
}
$("#sourceTbody2").html(html);
},
<span style="font-size:24px;">//触发事件，展开二级目录</span>
initSourceDetail:function(sid2,name){
var imgStr="<img height:32px src='"+basePath+"/images/main/shutiao.png'>";
var hongse1="<img class='imgcss' src='"+basePath+"/images/main/hongse1.png'>";
var hongse2="<img class='imgcss' src='"+basePath+"/images/main/hongse2.png'>";
var huangse1="<img class='imgcss' src='"+basePath+"/images/main/huangse3.png'>";
var huangse2="<img class='imgcss' src='"+basePath+"/images/main/huangse4.png'>";
var lvse="<img class='imgcss' src='"+basePath+"/images/main/lvse5.png'>";
var $isShow=$("#"+sid2+"").attr("data-isShow");
if($isShow=='show'){
//$("#"+sid2+"").attr("data-isShow","show");
$("#"+sid2+"").children("td:first").find("img").attr("src",basePath+"/images/main/hengxiang_07.png");
$("#"+sid2+"").nextAll("tr[data-children="+sid2+"]").hide();
$("#"+sid2+"").attr("data-isShow","hide");
}else if($isShow=='hide'){
$("#"+sid2+"").children("td:first").find("img").attr("src",basePath+"/images/main/xiala.png");
$("#"+sid2+"").nextAll("tr[data-children="+sid2+"]").show();
$("#"+sid2+"").attr("data-isShow","show");
}else{
var initData3=[];
var initData2 =gridSourcemain.initData2();
for(var i =0;i<initData2.length;i++){
if(initData2[i].parentId==sid2){
initData3.push(initData2[i]) ;
}
}
//子节点的数据
for(var i =0;i<initData3.length;i++){
var value =initData3[i];
if(value.parentId==sid2){
var name=value.name || "";
var integrityRate=value.integrityRate || 0;
var integrityColor = "";
if(integrityRate >= 90) {
integrityColor = lvse;
}else if(integrityRate >= 80 && integrityRate < 90) {
integrityColor = huangse2;
}else if(integrityRate >= 70 && integrityRate < 80) {
integrityColor = huangse1;
}else if(integrityRate >= 40 && integrityRate < 70) {
integrityColor = hongse2;
}else {
integrityColor = hongse1;
}
var timelinessRate=value.timelinessRate || 0;
var timelinessColor = "";
if(timelinessRate >= 90) {
timelinessColor = lvse;
}else if(timelinessRate >= 80 && timelinessRate < 90) {
timelinessColor = huangse2;
}else if(timelinessRate >= 70 && timelinessRate < 80) {
timelinessColor = huangse1;
}else if(timelinessRate >= 40 && timelinessRate < 70) {
timelinessColor = hongse2;
}else {
timelinessColor = hongse1;
}
var effectiveRate=value.effectiveRate || 0;
var effectiveColor = "";
if(effectiveRate >= 90) {
effectiveColor = lvse;
}else if(effectiveRate >= 80 && effectiveRate < 90) {
effectiveColor = huangse2;
}else if(effectiveRate >= 70 && effectiveRate < 80) {
effectiveColor = huangse1;
}else if(effectiveRate >= 40 && effectiveRate < 70) {
effectiveColor = hongse2;
}else {
integrityColor = hongse1;
}
var html='';
html += "<tr id='"+value.sid+"' data-children='"+sid2+"'>";
html += "<td class='space'></td>";
html += '<td class="noPadding " title="'+value.name+'"><a href="javascript:;" onclick="gridSourcemain.initSourceDetail('+value.sid+',\''+initData2[i].name+'\')">'+imgStr+''+name+'</a></td>';
html += '<td class="noPadding"> '+
integrityColor+ ' '+integrityRate+"%"
'</div>'+
'</td>';
html += '<td class="noPadding"> '+
timelinessColor+' '+timelinessRate+"%"
'</div>'+
'</td>';
html += '<td class="noPadding"> '+
effectiveColor+' '+effectiveRate+"%"
'</div>'+
'</td>';
html += '</tr>';
$("#"+sid2+"").after(html);
$("#"+sid2+"").children("td:first").find("img").attr("src",basePath+"/images/main/xiala.png");
$("#"+sid2+"").attr("data-isShow","show");
}
}
}
},
jsp:
<div class="row" style="margin-bottom:20px;">
<div class="col-xs-12 col-sm-12 widget-container-col">
<div class="widget-box widget-color-blue ui-sortable-handle">
<div class="widget-header">
<div class="widget-toolbar no-border">
<a data-action="collapse" href="#"><i class="ace-icon fa fa-chevron-up"></i></a>
<a style="visibility: hidden;" data-action="close" href="#"><i class="ace-icon fa fa-times"></i></a>
</div>
</div>
<div class="widget-body">
<div class="widget-main " id="tableWidget" style="max-height:374px;overflow:auto;">
<table id ="tab" style="font-size:13px;" class="table table-bordered table-hover">
<thead class="thin-border-bottom">
<tr style="background:#F2F2F2;background-image: linear-gradient(to bottom,#f8f8f8 0,#ececec 100%);">
<th class="spaceth"></th>
<th class="noborder" >排名</th>
<th class="noborder" >完成率</th>
<th class="noborder" >及时率</th>
<th class="noborder" >有效率</th>
</tr>
</thead>
<tbody id="sourceTbody2">
</tbody>
</table>
</div><!-- /.widget-main -->
</div><!-- /.widget-body -->
</div>
</div>
</div>