datatable 在渲染表格时,对单元格进行单独设置样式

业务需求背景: 在渲染表格时,根据数据判断当前单元格值是否为可修改,可修改就设置当前单元格的背景颜色为黄色。

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     列下标

 

 

 

 

你可能感兴趣的:(JS,DataTable)