怎么做table 表格下拉树

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

朱智文

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

阅读量3.6k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u014236541/article/details/52527457

版权

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

摘要由CSDN通过智能技术生成

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

然后，点击触发事件，加载二级目录，插入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 &