jeesite4 change the background color of a row dataGrid

First understand the front jeesite4 what technology to use:

Can understand dataGrid primarily jqGrid technology to render, you can go to Baidu related Knowing this technology, do JAVA must also relate to write JS, JS Do not be afraid to see, the following three are recommended to develop JS:

  • You must first determine your JS code segment or methods are not triggered, you can write an alert or console.log View
  • Second, we must make good use of console.log () method like the console output test page, which can solve almost 80% of the needs of small problems, such as you did not get to see the controls, there did not get the value is not me desired data, this control what is inside, can be crystal clear
  • Finally, for complex JS, it involves the circulation ah this judgment, the naked eye can not see in general can be found in your JS segment break point in the page, refresh the page will enter into a breakpoint in a similar Eclipse breakpoint debugging

The following is the realization of my code:

// 初始化DataGrid对象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	columnModel: [
		{header:'${text("姓名")}', name:'name', index:'a.name', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
			return '<a href="${ctx}/py/pyNarcotics/view?narcId='+row.narcId+'" class="btnList" data-title="${text("查看在手人员")}">'+(val||row.id)+'</a>';
		}},
		{header:'${text("身份证号")}', name:'idCard', index:'a.id_card', width:150, align:"left",},
		{header:'${text("手机号")}', name:'phone', index:'a.phone', width:150, align:"left"},
        {header:'${text("监控时间")}', name:'controlTime', index:'a.control_time', hidden:true, width:150, align:"center"},
		{header:'${text("操作")}', name:'actions', width:120, sortable:true, title:false, formatter: function(val, obj, row, act){
			var actions = [];
			<% if(hasPermi('py:pyNarcotics:edit')){ %>
				actions.push('<a href="${ctx}/py/pyxx/view?narcId='+row.narcId+'" class="btnList" title="${text("查看")}"><i class="fa icon-eye"></i></a>&nbsp;');
				actions.push('<a href="${ctx}/py/pyxx/form?narcId='+row.narcId+'" class="btnList" title="${text("编辑")}"><i class="fa fa-pencil"></i></a>&nbsp;');
				actions.push('<a href="${ctx}/py/pyxx/delete?narcId='+row.narcId+'" class="btnList" title="${text("删除")}" data-confirm="${text("确认要删除XX吗?")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
			<% } %>
			return actions.join('');
		}}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		//以下代码实现:监控时间到了的记录标红
		
		//js日期格式化 yyyy-MM-dd
		Date.prototype.Format = function (fmt) {
		    var o = {
		        "M+": this.getMonth() + 1, //月份 
		        "d+": this.getDate(), //日 
		        "H+": this.getHours(), //小时 
		        "m+": this.getMinutes(), //分 
		        "s+": this.getSeconds(), //秒 
		        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		        "S": this.getMilliseconds() //毫秒 
		    };
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    for (var k in o)
		    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    return fmt;
		}
		//获取所有的id
		var idList = $('#dataGrid').dataGrid('getDataIDs');
		//获取所有行的数据
		var dataList = $('#dataGrid').dataGrid('getRowData');
		//获取当前时间并将将时间转成秒数,为方便后面日期大小的比较
		var nowDate = new Date().Format("yyyy-MM-dd");
		var arr1 = nowDate.split("-");
	    var nowDates = new Date(arr1[0],arr1[1],arr1[2]); 
	    var nowDateTime = nowDates.getTime();
	    //遍历所有的行
		for(var i=0; i< dataList.length; i++ ){
			//获取某行的监控时间,并将它转成秒数
			var thatDate=dataList[i].controlTime;
		 	var arr2 = thatDate.split("-");
		    var thatDates = new Date(arr2[0],arr2[1],arr2[2]); 
		    var thatDateTime = thatDates.getTime();
		    //如果日期是今天之前将记录标灰色,
			if(nowDateTime != "" && thatDateTime != "" && nowDateTime > thatDateTime ){
				$("#"+idList[i]+ " td").css("background-color","#D0D0D0");
			}
		    //如果日期等于今天将记录标红
			if(nowDateTime != "" && thatDateTime != "" && nowDateTime == thatDateTime ){
				$("#"+idList[i]+ " td").css("background-color","pink");
			}
		} 
	},
});

Renderings:

Guess you like

Origin blog.csdn.net/qq_37725560/article/details/92835114