项目需要的样子是这样的：
服务数据格式如下：
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步），后面发现有点难度，就选用了，上面的方式
