业务需求背景: 在渲染表格时,根据数据判断当前单元格值是否为可修改,可修改就设置当前单元格的背景颜色为黄色。
HTML代码
数据补发
二级单位
三级单位
机组
数据时间
N折算值
S折算值
D折算值
标流量
氧量
负荷
JS代码:
function dataTableInit() {
table = $('#example').DataTable({
"scrollY": "100%",
"scrollX": "100%",
"bLengthChange": false,
"aLengthMenu": [15],
"ordering": false,
"info": false,
"searching": false,
"fixedColumns": {
"leftColumns": 1,
},
"language": {
url: "../../../build/datatables/i18n/Chinese.json"
},
"ajax": {
type: "POST",
crossDomain: true,
async: true,
contentType: "application/json",
url: baseUrl + "/ecoFillMakeup/queryData",
data: function(d) {
return getQueryCondition();
},
dataSrc: function(data) {
if(data.code != 200) {
return new Array();
}
valueData = data.data;
for(var i in valueData) {
valueData[i].dataTime = fmtDate(valueData[i].dataTime);
}
return valueData;
}
},
"columns": [{
className: "td-checkbox",
orderable: false,
bSortable: false,
data: "idKey",
width: '30px',
render: function(data, type, row, meta) {
var content = '';
return content;
}
},
{
"data": "comName"
},
{
"data": "orgName"
},
{
"data": "unitName"
},
{
"data": "dataTime"
},
{
"data": "nConverted",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.nMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"data": "sConverted",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.sMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"data": "dConverted",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.dMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"data": "fGasFlow",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.fGasFlowMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"data": "oxyn",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.oxynMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"data": "load",
createdCell: function(nTd, sData, oData, iRow, iCol) {
if(oData.loadMakeup == 1 && null == sData) {
$(nTd).css("background-color", "#FFFF00");
}
}
},
{
"visible": false,
"data": "nMakeup"
},
{
"visible": false,
"data": "sMakeup"
},
{
"visible": false,
"data": "dMakeup"
},
{
"visible": false,
"data": "fGasFlowMakeup"
},
{
"visible": false,
"data": "oxynMakeup",
},
{
"visible": false,
"data": "loadMakeup"
}
]
});
}
单独谈谈createdCell : function(nTd, sData, oData, iRow, iCol){} 这段代码
该回调方法 会在datatable 创建单元格时触发,参数分别对应
nTd 当前单元格DOM对象
sData 当前单元格数值
oData 当前行整行的数据对象
iRow 行下标
iCol 列下标