jqGrid 罫線 フォント色の動的設定

 

 

 

 

固定的に列のフォント色なんかを設定したい場合は、colModel の classes に CSSのクラス名なんかを設定しておけば、コーディングする必要ないですが、

動的なことする場合は、loadComplete で DOMのCSS設定したりします。

[ サンプルコード ]


// == グリッドデータ取得 == //
var rows = $(this).getRowData();

// == userdata取得 == //
var userdata = $(this).jqGrid('getGridParam', 'userData');

// 区切線用 //
var ulineidxary = [];

if (userdata['sidx'] == 'dceta' || userdata['sidx'] == 'vessel' || userdata['sidx'] == 'berth') {
  var rowsary = $(this).getRowData();
  var wcntary = [];
  $.each(rowsary, function (i, itm) {
    //wcntary.push(itm['dcetawdiff']);
    wcntary.push(itm[lineMap[userdata['sidx']]]);
  });

  $.each(wcntary, function (i, itm) {
    if (i > 0 && wcntary[i] != wcntary[i - 1]) {
      ulineidxary.push(i - 1);
    }
  });
  //$('#divdbg').text(ulineidxary);

}

// ++ 全行走査 ++ //
$.each(rows, function (i, itm) {
	 // VOY列右をに縦線を引く //
	$("#" + rows[i]['id'] + " td").eq(2).css("border-right-color", "#224444");
	
	// 週区切り線 //
	if (ulineidxary.indexOf(i) != -1) {
	  $("#" + rows[i]['id'] + " td").css("border-bottom-color",
	          !isDarkTheme ? "#004400" : "#99DD99");
	}
	
	// 船スペックタイトル //
	td = $('#' + rows[i]['id']).children('td').eq(1);
	$(td).attr('title', rows[i]['cnt'] + ' Records exists by this vessel.' + '\n' +
	        rows[i]['vesselspec']);
	
	// カレントポジションリンク用IMOタイトル //
	curimo = rows[i]['vesselspec'].replace("\n", "").slice(-8);
	td = $('#' + rows[i]['id']).children('td').eq(2);
	$(td).attr('title', curimo);
	
	// バース日がETAより大きい場合、赤文字ワーニング //
	etaschMD = !isOld ? rows[i]['dceta'].slice(0, 5) : rows[i]['dceta'].slice(3, 8);
	berthMD = rows[i]['tmberth'].slice(0, 5);
	
	if (berthMD > etaschMD) {
	  td = $('#' + rows[i]['id']).children('td').eq(BERTHTIME_COLIDX);
	  $(td).css('color', !isDarkTheme ? '#ff0000' : '#ff90ff');
	}
	// 早いのは青表示 //
	if (berthMD < etaschMD) { td = $('#' + rows[i]['id']).children('td').eq(BERTHTIME_COLIDX); $(td).css('color', !isDarkTheme ? '#0000aa' : '#00ffff'); } // 入港日差 遅れを赤表示 // if (rows[i]['difdceta'] > 0) {
	  td = td = $('#' + rows[i]['id']).children('td').eq(ETADIFF_COLIDX);
	  $(td).css('color', !isDarkTheme ? '#ff0000' : '#ff90ff');
	  //$(td).css('color', 'red');
	}
	// 入港日差 早いのは青表示 //
	if (rows[i]['difdceta'] < 0) {
	  td = td = $('#' + rows[i]['id']).children('td').eq(ETADIFF_COLIDX);
	  $(td).css('color', !isDarkTheme ? '#0000aa' : '#00ffff');
	}
	
	// SKIP行 //
	if (rows[i]['tmport'].indexOf('SKIP') != -1) {
	  $("#" + rows[i]['id'] + " td").addClass('td_lv');
	}
	
});	

画面例

コメントを残す