DbNetGrid 10:(重要)控制grid外观和体验

Grid的外观效果是可以被控制的，包括整个表和单元格都可以。只需setTableProperty, setHeadingProperty和setColumnProperty方法来应用标准的样式属性即可。

1. 设置表格属性

setTableProperty方法接收一个参数，格式为：style: value，这个样式应用于整个表格

...
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')
...

2.1隐藏列标题

默认的，列标题只显示在单独一行里，当列标题很长时这会使的grid过度地宽，你可以用wrapHeadings属性改变noWrap设置，如下：

...
document.all.dbnetgrid1.wrapHeadings = true
...

3. 设置列属性

setColumnProperty方法让样式应用到单个的列，也可以选择性地应用那些样式到列中的数据。基本语法和setTableProperty相似，只是多了一个指定列名的参数。

...
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'
}
...

如果你想把一个外键的值转换成相关的值最简单的方法是用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>'
}

4. 用存储过程时给列属性赋值

当用存储过程取值时selectPart无效,只能用setColumnProperty方法按索引序号给列属性赋值,序号从0开始.如下:

setColumnProperty(0,'display:none')
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)"

evenRowBackgroundColour

设置偶数行背景色

document.all.dbnetgrid1.evenRowBackgroundColour = "rgb(255,255,255)"

oddRowColour

设置奇数行字体颜色
document.all.dbnetgrid1.oddRowColour = "rgb(0,0,0)"

evenRowColour

设置偶数行字体颜色
document.all.dbnetgrid1.evenRowColour = "rgb(255,255,255)"