项目需要的样子是这样的:
服务数据格式如下:
var vecProjects = [ { strProjectName: 'web前端', strStage: "前期", strProjectDate: '2017-1-1~2017-10-1', strBudget: "5000", vecEmployee: [ { strArea: 'a', strUserName: '邓**', strTimes: '50', strJobContent: '哈哈哈哈' }, { strArea: 'a', strUserName: '何**', strTimes: '50', strJobContent: '哈哈哈哈' }, { strArea: 'a', strUserName: '李**', strTimes: '50', strJobContent: '哈哈哈哈' } ] }, { strProjectName: 'web前端', strStage: "中期", strProjectDate: '2017-1-1~2017-10-1', strBudget: "5000", vecEmployee: [ { strArea: 'a', strUserName: '**邓', strTimes: '50', strJobContent: '哈哈哈哈' }, { strArea: 'a', strUserName: '**何', strTimes: '50', strJobContent: '哈哈哈哈' }, { strArea: 'a', strUserName: '**李', strTimes: '50', strJobContent: '哈哈哈哈' } ] } ];
代码如下:
//清空表格数据
$("#search-projects-on-manager tbody").empty(); var projectRowSpan = 0;
//arryProjects 服务器给的数据 $.each(arryProjects, function (i) { var $tr = $("<tr></tr"); var stageRowSpan = arryProjects[i].vecEmployee.length; projectRowSpan += stageRowSpan; //项目名称 var $tdForProjectName = $("<td class='project-name' rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strProjectName); //项目阶段 var $tdForStage = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strStage); //项目时间 var $tdsProjectDate = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strProjectDate); //项目预算 var $tdBudget = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strBudget); //每个员工的数据 var employeeData = arryProjects[i].vecEmployee; var $tdForArea = ""; var $tdForstrUserName = ""; var $tdForTimes =""; var $tdForJobContent = ""; if (employeeData.length == 0) { $tdForArea = $("<td></td>").text(""); $tdForstrUserName = $("<td></td>").text(""); $tdForTimes = $("<td></td>").text(""); $tdForJobContent = $("<td></td>").text(""); }else { $tdForArea = $("<td></td>").text(employeeData[0].strArea); $tdForstrUserName = $("<td></td>").text(employeeData[0].strUserName); $tdForTimes = $("<td></td>").text(employeeData[0].strTimes); $tdForJobContent = $("<td></td>").text(employeeData[0].strJobContent); }
//1.添加一个完整的tr $tr.append($tdForProjectName, $tdForStage, $tdsProjectDate, $tdBudget, $tdForArea, $tdForstrUserName, $tdForTimes, $tdForJobContent); $("#search-projects-on-manager").find("tbody").append($tr);
//2..再循环添加tr $.each(employeeData, function (j) { if (j >= 1) { var $trForEmployee = $("<tr></tr"); var $tdForArea = $("<td></td>").text(employeeData[j].strArea); var $tdForstrUserName = $("<td></td>").text(employeeData[j].strUserName); var $tdForTimes = $("<td></td>").text(employeeData[j].strTimes); var $tdForJobContent = $("<td></td>").text(employeeData[j].strJobContent); $trForEmployee.append($tdForArea, $tdForstrUserName, $tdForTimes, $tdForJobContent); $("#search-projects-on-manager").find("tbody").append($trForEmployee); } }); });
//3.合并第一列的项目名称 var projectName = ""; $("#search-projects-on-manager tr").find("td").each(function(i) { if( (i == 0) && ($(this).hasClass('project-name') == true) ) { projectName = $(this).text(); }else if((i != 0 ) && ($(this).hasClass('project-name')) == true) { $(this).remove(); } }); $("#search-projects-on-manager tr").find("td").each(function(i) { if( (i == 0) && ($(this).hasClass('project-name') == true) ) { $(this).attr("rowSpan", projectRowSpan); return false; } });
代码有点乱说一下思路:
1.先添加整行
一行有几个td就写几个td;
同时设置td所占的行数
然后添加到table种
2.再循环添加tr
注意:此一个tr种只有区域,参与人,人时数,事宜
添加到table种
3.合并第一列的项目名称
当是想:直接添加(即不通过上面的第3步),后面发现有点难度,就选用了,上面的方式