在列样式例题中,我们了解了指定列样式的基本方法, 并且在单元格渲染器例题中,我们处理过一两个渲染器。 但是,这些可能不足以有效表达数据,所以我们需要列标准样式以外的、各行样式指定,也就是说,根据值的样式指定。
但是,加载或添加到网格的行的数量,在理论上是没有限制的,所以为由行和列组成的、相当数量的各个单元格指定样式的方式, 在性能上讲,可能会是一种不可能的事情。 另外,网格不是由初期加载的数据所固定的,而是通过用户输入等方式而总会发生变化,所以我们需要动态应对这些变化的值。
SMART datagrid格有着根据值或行的状态而指定样式值的几种方法,而在本次例题中,我们将会了解其中最简单的方法。
指定动态样式的最简单的方法是设置列的dynamicStyles属性。 一个动态样式是由决定是否适用样式的判断式(expression)和样式属性所组成的。
{
"name": "OrderDate",
"fieldName": "order_date",
"dynamicStyles": [{
"expression": "value >= date('2015-01-01 00:00')",
"styles": {
"background": "#100000ff",
"color": "#ff000088"
}
}],
...
}
订单日期列与日期字段order_date相连接,所以如果在判断式中,单元格的值晚于特定日期,就会显示不同的background和color。 判断式中,value是转换当前绘制中的单元格的值、date是转换右侧ISO-8601字符串为Date值的运算符。
如上述代码中所显示,因为dynamicStyles是数组属性, 它可以指定一个以上的动态样式,并且可以通过计算每个单元格的所有判断式,反映所有返回true的属性。 如果是对不同值指定相同属性值的情况,顺序将会变得非常重要。
{
"name": "UnitPrice",
"fieldName": "unit_price",
"dynamicStyles": [{
"expression": "value > 500",
"styles": {
"background": "#10000000"
}
}, {
"expression": "value > 700",
"styles": {
"background": "#20000000"
}
}, {
"expression": "value > 800",
"styles": {
"background": "#30000000"
}
}],
...
}
上述代码中,都是根据值来指定background属性的。如果不是按照"500、700、800"而是"800、700、500"的顺序进行指定,可能就无法得到想要的结果。
通常这种罗列方式,在根据判断式而设置不同属性值时,是非常有用的。 如上述例题,如果需要在一个类型的判断式中,指定相同的属性,就需要使用如下列代码的DynamicStyleCase。
{
"name": "Quantity",
"fieldName": "quantity",
"dynamicStyles": [{
"expressions": [
"value > 700",
"value > 500",
"value > 300"
],
"styles": [
{
"shapeName": "uparrow",
"shapeColor": "#ff0000"
}, {
"shapeColor": "#0000ff"
}, {
"shapeColor": "#008800"
}
]
}],
...
}
如果expressions被设置为数组,网格将会替代DynamicStyle而创建DynamicStyleCase对象。 如果指定为expressions的判断式中,有返回true的判断式,DynamicStyleCase就会指定相关此判断式的样式并且不会继续进行。