jeesite4修改dataGrid某行的背景颜色
首先了解jeesite4的前端是用到什么技术:
可以了解到dataGrid主要用jqGrid 技术去渲染,了解之后可以去百度相关这门技术,做JAVA一定也会涉及到写JS,见到JS不要怕,以下三点是给JS开发的建议:
-
首先要判断你的JS代码段或者方法有没有触发,可以写一个alert或者console.log查看 其次要善用console.log()方法像页面控制台输出信息进行测试,这几乎能解决80%的小问题需求,比如看看有没有拿到你的控件,有没有拿到值,是不是我想要的数据等,这个控件里面有什么东西,都可以一清二楚 最后,再面向复杂的JS,涉及到循环啊判断这种,肉眼一般看不出的可以在页面找到你的JS段打断点,刷新页面就会进入到断点中了,类似Eclipse的断点调试
以下是我代码的实现:
// 初始化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> ); actions.push(<a href="${ctx}/py/pyxx/form?narcId=+row.narcId+" class="btnList" title="${text("编辑")}"><i class="fa fa-pencil"></i></a> ); 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> ); <% } %> 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"); } } }, });