我正在使用主干集合this.courseTemplates来填充我的表格。我的一个列由具有类的图标填充，具体取决于其计划状态。通过使用返回checkScheduleStatus，"All"或"Part"的函数"Unscheduled"可以找到此状态。他们分别为cpTableAllScheduledIcon，cpTablePartScheduledIcon和＆amp; cpTableUnScheduledIcon我希望能够按照从checkScheduleStatus
所以，说我有一个复选框，我选择"All"＆amp; "Part"我不想查看任何＆＃34; unscheduled＆＃34;。这可能吗？任何帮助将不胜感激。
以下是我的数据表代码
render: function() {
var self = this;
this.ui.courseTemplateTbody.empty();
this.courseTable = $('#courseTplTable').DataTable({
"bDestroy": true,
"bStateSave": true,
"deferRender": true,
"bAutoWidth": false,
"aLengthMenu": [
[5, 10, 25, 50, 100],
[5, 10, 25, 50, 100]
],
"iDisplayLength": 10,
"order": [
[0, '']
],
"columnDefs": [{
"orderable": false,
"targets": [0, 5]
}, ],
"aaData": self.courseTemplates.toJSON(),
"aoColumns": [{
"sTitle": "",
"orderable": false,
"mDataProp": function(row) {
var status = self.checkScheduleStatus(row);
if (status === "All") {
return '<i id="ctScheduleStatus" class="cpTableAllScheduledIcon octicon octicon-check protip" data-id="' + row['OptimeIndex'] + '" data-pt-title="Course Template Scheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
} else if (status === "Part") {
return '<i id="ctScheduleStatus" class="cpTablePartScheduledIcon fa fa-exclamation protip" data-id="' + row['OptimeIndex'] + '" data-pt-title="Course Template Part-Scheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
} else {
return '<i id="ctScheduleStatus" class="cpTableUnScheduledIcon octicon octicon-x protip" data-id="' + row['OptimeIndex'] + '" data-pt-title="Course Template Unscheduled" data-pt-position="right" data-pt-scheme="black" data-pt-size="small"></i>';
}
}
}, {
"sTitle": "Course",
"mDataProp": function(row) {
return '<div class="cpTableCourseNameWrap">' +
'<div class="cpTableCourseName">' + self.getCourseTitle(row['CourseString']) + '</div>' +
'<div class="cpTableCourseDuration">' + self.getCourseDuration(row['CourseString']) + '</div>' +
'</div>';
}
}, {
"sTitle": "Demand",
"mDataProp": function(row) {
return '<div class="cpTableCourseDemandWrap">' +
'<div class="hidden">' + row['NumRequired'] + '</div>' +
'<button data-id="' + row['OptimeIndex'] + '" class="cpTableCourseDemandBtn cpDemandDecrease" style="margin-right: 5px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;">' +
'<i class="octicon octicon-dash"></i>' +
'</button>' +
'<input data-id="' + row['OptimeIndex'] + '" class="cpDemandInput" type="text" value="' + row['NumRequired'] + '" />' +
'<button data-id="' + row['OptimeIndex'] + '" class="cpTableCourseDemandBtn cpDemandIncrease" style="margin-left: 5px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">' +
'<i class="octicon octicon-plus"></i>' +
'</button>' +
'</div>';
}
}, {
"sTitle": "Courses",
"mDataProp": function(row) {
return '<div id="courseCount" class="cpTableCourseCountWrap" data-id="' + row['OptimeIndex'] + '">' + row['ModuleIndexList'].length + '</div>';
}
}, {
"sTitle": "Status",
"mDataProp": function(row) {
return '<div>' +
'<div class="cpTableStatusGreen protip" data-pt-title="Courses Scheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="octicon octicon-check"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[0] + '</span></div>' +
'<div class="cpTableStatusYellow protip" data-pt-title="Courses Part Scheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="fa fa-exclamation"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[1] + '</span></div>' +
'<div class="cpTableStatusRed protip" data-pt-title="Courses Unscheduled" data-id="' + row['OptimeIndex'] + '" data-pt-position="top" data-pt-scheme="black" data-pt-size="small"><i class="octicon octicon-x"></i><span>' + self.getScheduleTotals(row['ModuleIndexList'])[2] + '</span></div>' +
'</div>';
}
}, {
"sTitle": "",
"orderable": false,
"searchable": false,
"mDataProp": function(row) {
return '<div class="cpTableCourseOptionsWrap">' +
'<div class="btn-group" role="group">' +
'<button class="btn btn-sm btn-primary protip cpViewCoursesBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="View Courses" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-eye"></i><span>View Courses</span></button>' +
'<button class="btn btn-sm btn-info protip cpEditTplBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="Edit Template" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-pencil"></i><span>Edit Template</span></button>' +
'<button class="btn btn-sm btn-danger protip cpDeleteTplBtn" data-id="' + row['OptimeIndex'] + '" data-pt-title="Delete Template" data-pt-scheme="black" data-pt-position="top" data-pt-size="small"><i class="octicon octicon-trashcan"></i><span>Delete Template</span></button>' +
'</div>' +
'</div>';
}
}]
});
},
如果有任何用途，我会投入checkScheduleStatus函数
checkScheduleStatus: function(courseTpl) {
var self = this;
var status = "";
var scheduleCount = 0;
var unscheduledCount = 0;
var partScheduledCount = 0;
//Go through each course (module) and check each of its events and get its scheduled status
_.each(courseTpl['ModuleIndexList'], function(moduleId) {
var module = self.modules.get(moduleId);
if (module !== undefined && module !== null) {
_.each(module.get('EventIds'), function(eventId) {
var event = self.events.get(eventId);
var roomAlloc = self.events.get(eventId).get('Rooms');
var staffAlloc = self.events.get(eventId).get('StaffAllocations');
var weeks = self.events.get(eventId).get('Weeks');
var period = self.events.get(eventId).get('Period');
if (roomAlloc.length > 0 && staffAlloc.length > 0) {
scheduleCount++;
}
if (roomAlloc.length > 0 && staffAlloc.length === 0) {
partScheduledCount++;
}
if (roomAlloc.length === 0 && staffAlloc.length > 0) {
partScheduledCount++;
}
if (roomAlloc.length === 0 && staffAlloc.length === 0 && weeks !== undefined && period !== undefined) {
partScheduledCount++;
}
if (roomAlloc.length === 0 && staffAlloc.length === 0 && weeks !== undefined && period === undefined) {
unscheduledCount++;
}
if (roomAlloc.length === 0 && staffAlloc.length === 0 && weeks === undefined) {
unscheduledCount++;
}
});
}
});
if (scheduleCount === 0 && partScheduledCount === 0)
status = "Unscheduled";
else if (partScheduledCount > 0)
status = "Part";
else if (scheduleCount > 0 && unscheduledCount > 0)
status = "Part";
else if (unscheduledCount === 0 && partScheduledCount === 0)
status = "All";
return status;
},