jQuery MiniUI自定义单元格

最新推荐文章于 2023-07-15 10:31:09 发布

转载最新推荐文章于 2023-07-15 10:31:09 发布 · 573 阅读

文章标签：

#javascript #ViewUI

本文介绍如何通过监听drawcell事件来自定义DataGrid的单元格内容、样式及行样式。具体包括日期格式化、添加年龄单位、设置背景色、高亮薪资过万的数据、学历展示、操作按钮设置、性别图标替换以及行样式调整等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听处理"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";
    }
});

原文：http://www.miniui.com/docs/tutorial/datagrid_drawcell.html

function onDrawCell(e){
    var node = e.node,
        column = e.column,
        field = e.field,
        value = e.value;

    //格式化日期
    if (field == "Finish") {
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy年MM月dd日");
    }
    //工期
    if (field == "Duration") {
        e.cellHtml = value + "天";
    }
    //进度
    if (field == "PercentComplete") {
        e.cellHtml = '<div class="progressbar">'
                        + '<div class="progressbar-percent" style="width:' + value + '%;"></div>'
                        + '<div class="progressbar-label">' + value + '%</div>'
                    +'</div>';
    }
};