MiniUi 绘制前台页面符合条件的行元素(可以改变行样式) drawcell函数

矫情吗；* 2022-11-13 06:23 180阅读 0赞

直接debugger 进行调试，试试都有什么属性。

这种情况下的效果：

还有一种是对整行进行描绘

这种情况下的效果

转 ：MINIUI监听处理"drawcell"事件(这个博主写的也很好：http://www.blogjava.net/grid/archive/2012/11/02/390693.html)  
监听处理"drawcell"事件           
使用"drawcell"事件，可以自定义单元格内容、样式、行样式等。

grid.on("drawcell", function (e) \{  
    var record = e.record,  
        column = e.column,  
        field = e.field,  
        value = e.value;

//格式化日期  
    if (field == "birthday") \{  
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy-MM-dd");

//给年龄，增加"岁"字符串  
    if (field == "age") \{  
        e.cellHtml = value + "岁";  
    \}

//给帐号列，增加背景色  
    if (field == "loginname") \{  
        e.cellStyle = "background:\#ecedef";  
    \}

//超过1万工资，红色标识  
    if (field == "salary" && value >= 10000) \{  
        e.cellStyle = "color:red;font-weight:bold;";  
    \}

//显示学历  
    if (field == "educational") \{  
        for (var i = 0, l = Educationals.length; i < l; i++) \{  
            var edu = Educationals\[i\];  
            if (edu.id == value) \{  
                e.cellHtml = edu.name;  
                break;  
            \}  
        \}  
    \}

//action列，超连接操作按钮  
    if (column.name == "action") \{  
        e.cellStyle = "text-align:center";  
        e.cellHtml = '<a href="javascript:edit(\\'' + record.id + '\\')">Edit</a>&nbsp; '  
                    + '<a href="javascript:del(\\'' + record.id + '\\')">Delete</a>'  
    \}

//将性别文本替换成图片  
    if (column.field == "gender") \{  
        if (e.value == 1) \{  
            e.cellHtml = "<span class='icon-female'></span>"  
        \} else \{  
            e.cellHtml = "<span class='icon-boy'></span>"  
        \}  
    \}

//设置行样式  
    if (record.gender == 1) \{  
        e.rowCls = "myrow";  
    \}  
\});

转载地址：[https://blog.csdn.net/qq\_33146717/article/details/80654008][https_blog.csdn.net_qq_33146717_article_details_80654008]

[https_blog.csdn.net_qq_33146717_article_details_80654008]: https://blog.csdn.net/qq_33146717/article/details/80654008