美文网首页
jeesite jqGrid 变更单行颜色

jeesite jqGrid 变更单行颜色

作者: JAVA弑云 | 来源:发表于2019-07-30 16:01 被阅读0次

首先了解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>&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");
            }
        } 
    },
});

效果图:

原文:https://blog.csdn.net/qq_37725560/article/details/92835114

相关文章

  • jeesite jqGrid 变更单行颜色

    首先了解jeesite4的前端是用到什么技术: 可以了解到dataGrid主要用jqGrid 技术去渲染,了解之后...

  • jqGrid学习笔记

    jqGrid笔记一jqGrid笔记二jqGrid用法汇总

  • 标题

    jQuery("#JQGrid1").jqGrid('navButtonAdd', '#JQGrid1_pager...

  • 2017-10-12

    jqgrid中文文档http://blog.mn886.net/jqGrid/jqgrid官方地址http://w...

  • jqGrid

    jqGrid实例中文版jqGrid使用 一、 jqGrid排序的两种实现方式 实现方案一客户端实现排序:jqGri...

  • jqgrid

    http://guriddo.net/?page_id=119

  • JQGrid

    一、JQGrid介绍: JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。 ...

  • jqGrid中的formatter,表格中值的格式化

    jqGrid中的formatter,表格中值的格式化 jqGrid中对列表cell数次那个格式话设置主要通过col...

  • jqGrid常用语法

    jqGrid常用语法整理,包含数据获取、常用函数、触发事件等jqGrid表格数据获取相关语法获取表格所有数据 ...

  • JeeSite | 保存信息修改记录封装

    前面写过两篇关于“保存信息修改记录”的内容,分别如下:JeeSite|保存信息修改记录JeeSite|保存信息修改...

网友评论

      本文标题:jeesite jqGrid 变更单行颜色

      本文链接:https://www.haomeiwen.com/subject/bvunrctx.html