SMART datagrid v.1 > Examples

Back  Forward

Column Dynamic Styles  Example

列样式例题中,我们了解了指定列样式的基本方法, 并且在单元格渲染器例题中,我们处理过一两个渲染器。 但是,这些可能不足以有效表达数据,所以我们需要列标准样式以外的、各行样式指定,也就是说,根据值的样式指定。 

但是,加载或添加到网格的行的数量,在理论上是没有限制的,所以为由行和列组成的、相当数量的各个单元格指定样式的方式, 在性能上讲,可能会是一种不可能的事情。 另外,网格不是由初期加载的数据所固定的,而是通过用户输入等方式而总会发生变化,所以我们需要动态应对这些变化的值。 

SMART datagrid格有着根据值或行的状态而指定样式值的几种方法,而在本次例题中,我们将会了解其中最简单的方法。 

Grid - 1
rows

指定动态样式的最简单的方法是设置列的dynamicStyles属性。 一个动态样式是由决定是否适用样式的判断式(expression)和样式属性所组成的。 

Code -1
    {
        "name": "OrderDate",
        "fieldName": "order_date",
        "dynamicStyles": [{
            "expression": "value >= date('2015-01-01 00:00')",
            "styles": {
                "background": "#100000ff",
                "color": "#ff000088"
            }
        }],
        ...
    }

订单日期列与日期字段order_date相连接,所以如果在判断式中,单元格的值晚于特定日期,就会显示不同的backgroundcolor。 判断式中,value是转换当前绘制中的单元格的值、date是转换右侧ISO-8601字符串为Date值的运算符。 

如上述代码中所显示,因为dynamicStyles是数组属性, 它可以指定一个以上的动态样式,并且可以通过计算每个单元格的所有判断式,反映所有返回true的属性。 如果是对不同值指定相同属性值的情况,顺序将会变得非常重要。 

Code -2
    {
    	"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。 

Code -3
    {
    	"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就会指定相关此判断式的样式并且不会继续进行。 


查看源代码 JSP 

See Also
GridStyles
GridColumn.styles
ColumnStyles
Examples
行动态样式
列样式