Grid的外观效果是可以被控制的,包括整个表和单元格都可以。只需setTableProperty, setHeadingProperty和setColumnProperty方法来应用标准的样式属性即可。
1. 设置表格属性
setTableProperty方法接收一个参数,格式为:style: value,这个样式应用于整个表格
...
document . all.dbnetgrid1.setTableProperty( 'border:5pt solid black' )
...
document . all.dbnetgrid1.setTableProperty( 'border:5pt solid black' )
...
2.
设置标题属性
setHeadingProperty也接收一个参数,格式为:style: value,作用于grid表格的所有标题。
...
document.all.dbnetgrid1.setHeadingProperty('fontWeight:bold')
document.all.dbnetgrid1.setHeadingProperty('textTransform:uppercase')
document.all.dbnetgrid1.setHeadingProperty('backgroundColor:yellow')
...
document.all.dbnetgrid1.setHeadingProperty('fontWeight:bold')
document.all.dbnetgrid1.setHeadingProperty('textTransform:uppercase')
document.all.dbnetgrid1.setHeadingProperty('backgroundColor:yellow')
...
2.1隐藏列标题
默认的,列标题只显示在单独一行里,当列标题很长时这会使的grid过度地宽,你可以用wrapHeadings属性改变noWrap设置,如下:
...
document.all.dbnetgrid1.wrapHeadings = true
...
document.all.dbnetgrid1.wrapHeadings = true
...
3. 设置列属性
setColumnProperty方法让样式应用到单个的列,也可以选择性地应用那些样式到列中的数据。基本语法和setTableProperty相似,只是多了一个指定列名的参数。
...
document.all.dbnetgrid1.setColumnProperty('city ','backgroundColor:orange')
...
document.all.dbnetgrid1.setColumnProperty('city ','backgroundColor:orange')
...
这段代码把city列的背景颜色设置为orange。
有两个方法来选择性地设置样式,一种是正则表达式,另一种是标准的js表达式
3.1 使用正则表达式
document.all.dbnetgrid1.setColumnProperty('region','backgroundColor:darkOrange',/WA/)
此例中正则表达式/WA/匹配到每一行的’region’列,当表达式为真时则应用样式
3.2 使用标准js表达式
document.all.dbnetgrid1.setColumnProperty('orders.freight','backgroundColor:yellow','{$}>10 && {$}<15')
此例中第3个参数是一段js代码,占位符’{$}’在运行时被替换,也是当表达式为真时则应用样式,这段js相对于eval( columnValue > 10 && columnValue <15 ) i.e. is the value greater than 10 and less than 15
3.3应用样式到整行
setColumnProperty方法可选的第4个boolean型参数如果设置为true将使被选择性地应用的样式被应用到它所在的一整行,例如:
document.all.dbnetgrid1.setColumnProperty('region','backgroundColor:yellow',/WY/, true)
此例中,region列中值等于WY的行背景显示为黄色
3.4 格式化小数位
除了应用标准的样式之外,数字域还可以使用decimalPlaces属性。如:
document.all.dbnetgrid1.setColumnProperty('price','decimalPlaces:2')
默认用点( . )来表示小数点,你也可以换成其他符号,只要利用decimalSymbol属性。如:
document.all.dbnetgrid1.decimalSymbol = ','
3.5 防止列数据隐藏
用nowrap属性可以防止某一特定列隐藏
document.all.dbnetgrid1.setColumnProperty('faxnum','noWrap:true')
3.6 修改单元格内容
指定列的单元格内容可以用modify属性来修改,例如用这个属性使一串字符转化为email链接
document.all.dbnetgrid1.setColumnProperty('email','modify:<a href="mailto:{$}">{$}</a>')
传给modify参数的是一个string模板,包含一个或者多个{$},在运行时会和列中数据匹配,然后被替换
也可以加第3个参数,如下:
document.all.dbnetgrid1.setColumnProperty('email','modify:<a href="mailto:{$}">{$}</a>',/@/)
这样只有当单元格包含@时才能按照modify修改
3.7 转换单元格内容
Modify允许简单的修改单元格内容,但这是不够地,复杂的转换就需要定义一个函数,然后传入给transform属性,下例把一个日期转化为星期,然后设置星期五的背景色为黄色。
document.all.dbnetgrid1.setColumnProperty('orderdate','transform:dayOfWeek')
...
function dayOfWeek(cell)
{
daysOfWeek = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
var d = new Date(Date.parse(cell.innerText))
cell.innerText = daysOfWeek[d.getDay()]
if (cell.innerText == 'Friday')
cell.style.backgroundColor = 'orange'
}
...
...
function dayOfWeek(cell)
{
daysOfWeek = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
var d = new Date(Date.parse(cell.innerText))
cell.innerText = daysOfWeek[d.getDay()]
if (cell.innerText == 'Friday')
cell.style.backgroundColor = 'orange'
}
...
如果你想把一个外键的值转换成相关的值最简单的方法是用column lookups
如果你在用高版本打印,保存或者复制,任何grid中定义的转换也能适用于打印,输出和复制数据,转换方法也适用于view dialog里的数据显示,通过引用除了单元格之外的第2个参数,你可以辨别出他们的区别,这个参数有以下选择:
display
|
调用函数控制数据格式
|
save
|
调用函数控制输出
|
print
|
调用函数控制打印输出
|
copy
|
调用函数控制复制到剪切板
|
view
|
调用函数控制view dialog
|
下例中,只把grid和view dialog中的单元格内容转为email格式
document.all.dbnetgrid1.setColumnProperty('companyname','transform:makeHyperlink')
....
function makeHyperlink(cell, source)
{
if (source == 'display' || source == 'view')
{
var customerID = cell.parentElement.id
cell.innerHTML = '<a href=javascript:showCustomerDetail("' + customerID + '")>' + cell.innerText + '</a>'
}
....
function makeHyperlink(cell, source)
{
if (source == 'display' || source == 'view')
{
var customerID = cell.parentElement.id
cell.innerHTML = '<a href=javascript:showCustomerDetail("' + customerID + '")>' + cell.innerText + '</a>'
}
4. 用存储过程时给列属性赋值
当用存储过程取值时selectPart无效,只能用setColumnProperty方法按索引序号给列属性赋值,序号从0开始.如下:
setColumnProperty(0,'display:none')
setColumnProperty(3,'backgroundColor:yellow')
setColumnProperty(4,'colour:white')
setColumnProperty(3,'backgroundColor:yellow')
setColumnProperty(4,'colour:white')
上例中第一列隐藏,第4列背景色为黄色,第5列字体为白色.
5. 设置行颜色
selectedRowBackgroundColour
设置所选行的背景色,如下:
document.all.dbnetgrid1.selectedRowBackgroundColour = "#336699"
selectedRowColour
设置所选行的字体颜色,如下:
document.all.dbnetgrid1.selectedRowColour = "yellow"
oddRowBackgroundColour
设置奇数行背景色
document.all.dbnetgrid1.oddRowBackgroundColour = "rgb(0,0,0)"
document.all.dbnetgrid1.oddRowBackgroundColour = "rgb(0,0,0)"
evenRowBackgroundColour
设置偶数行背景色
document.all.dbnetgrid1.evenRowBackgroundColour = "rgb(255,255,255)"
oddRowColour
设置奇数行字体颜色
document.all.dbnetgrid1.oddRowColour = "rgb(0,0,0)"
document.all.dbnetgrid1.oddRowColour = "rgb(0,0,0)"
evenRowColour
设置偶数行字体颜色
document.all.dbnetgrid1.evenRowColour = "rgb(255,255,255)"
document.all.dbnetgrid1.evenRowColour = "rgb(255,255,255)"