jQuery MiniUI自訂儲存格

標籤：span   line   form   node   delete   complete   sda   doc   draw   

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

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

jQuery MiniUI自訂儲存格