miniui的列数据渲染

在miniui中，每一列都可以指定一个渲染器：

< div field = "colName" width = "200" align = "center" headeralign = "center" renderer = "theRenderer" >列名称 div >

这里是表格的一个特殊列，其中的 renderer=”theRenderer” 就是渲染器的指定，theRenderer就是此列的渲染器(函数)。当然，也可以将响应表格对象的 ondrawcell 事件，用法基本上都是一样的，只不过在drawcell中需要判断field的值，然后再进行处理。

渲染器的实现：

// 参数e 的结构
/*
{
    sender: Object,
    rowIndex: Number,
    columnIndex: Number,
    record: Object,
    column: Object,
    field: String,
    value: String,
    cellHtml: "",
    rowCls: "",
    cellCls: "",
    rowStyle: "",
    cellStyle: ""
}
*/
function theRenderer(e) {
var cellContent  = 'xxxxxxx' ;
return cellContent;
}

注意灵活使用参数e。

{
 // 事件发送者，也就是单元格所在grid对象
    sender: Object,
 // 单元格所在行索引，从0开始
    rowIndex: Number,
 // 单元格所在列索引，从0开始
    columnIndex: Number,
// 单元格所在行数据，可以通过  e.record.col1, e.record.col2 来取值，不管col1和col2是否在表格中显示，只要服务器有返回这个字段，就可以取到值
    record: Object,
// 单元格所在的列对象
    column: Object,
// 单元格的字段 field 属性
    field: String,
// 单元格的值
    value: String,
// 单元格的html内容，我尝试过，在这里使用渲染器时设置这个属性无效，必须通过return
    cellHtml: "" ,
// 指定单元格所在行的css样式类
    rowCls: "" ,
// 指定单元格的css样式类
    cellCls: "" ,
// 指定单元格所在行的css样式的键值对
    rowStyle: "" ,
// 指定单元格的css样式的键值对
    cellStyle: ""
}

例子

要让值小于100的行背景显示为红色，那么可以这样写：

function theRenderer(e) {
var val = e.value;
if (parseInt(val)<100){
    e.rowStyle = 'background-color:red' ;
}

return val;
}

给此列添加超链接，或者按钮：

function theRenderer(e) {
var val = e.value;
var row = e.record;

val += '+ row.id + '">查看' ;
val += '+ row.id + '" class="button" />' ;

return val;
}