miniui的列数据渲染

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

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

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

渲染器的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 参数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  = '<div>xxxxxxx</div>' ; return cellContent; }

注意灵活使用参数e。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

{   // 事件发送者，也就是单元格所在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的行背景显示为红色，那么可以这样写：

1 2 3 4 5 6 7 8

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

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

1 2 3 4 5 6 7 8 9

function theRenderer(e) { var val = e.value; var row = e.record;   val += '<a href="view.php?id=' + row.id + '">查看</a>' ; val += '<input type="button" value="查看" data-id="' + row.id + '" class="button" />' ;   return val; }