在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;
}
|