jQuery MiniUI 開發教程 表格控件 表格：自定義單元格（三）

               
           
                     
參考示例：自定義單元格

          

監聽處理"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";
    }
});