怎么做table 表格下拉树

最新推荐文章于 2022-11-15 16:16:06 发布

朱智文

最新推荐文章于 2022-11-15 16:16:06 发布

阅读量3.6k

点赞数

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/u014236541/article/details/52527457

版权

jquery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何创建带有下拉树功能的表格。首先，加载一级目录，接着通过点击事件来动态加载二级目录，通过插入TR元素实现表格的扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这样的效果需要两部，第一步，加载一级目录，

然后，点击触发事件，加载二级目录，插入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 ' οnclick='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:;" οnclick="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>