网格样式表是一种包含可独立适用样式组的所有区域的相关样式设置的对象。
当重置网格时，将会适用内含的默认样式表， 并且通过下列代码中所示的两种方式而调用GridBase.loadStyles方法，可以随时适用其他样式组至网格。
如果通过外部文件或服务器数据而管理一个以上的样式表，则可以将其使用为符合情况的应用UI主题的一部分。
因为"default"是适用于GridBase.defaultStyles的样式，所以将会成为所有区域样式的父样式。 另外，在下列代码中，备注为"loadStyles only"的项目，虽然不包含在样式表中，却是可以被设置为loadStyles的样式。
var sheet = {
"default": {},
grid: {},
panel: {},
groupPanel: {
item: {},
itemInner: {},
head: {},
headInner: {}
},
body: {
empty: {},
row: {},
fixedRow: {},
cell: {},
fixedCell: {},
created: {},
updated: {},
deleted: {},
checked: {},
fixedColumnBar: {},
fixedRowBar: {},
selection: {},
mobileSelection: {},
rowRange: {}, // loadStyles only
rowDynamic: [], // loadStyles only
cellDynamic: [] // loadStyles only
},
header: {
group: {},
head: {},
sub: {},
menuHandle: {},
filterHandle: {},
sortHandle: {},
sortOrder: {},
summary: {
group: {},
head: {}
},
},
footer: {
group: {},
head: {}
},
rowGroup: {
header: {},
expander: {},
footer: {},
indent: {},
head: {},
bar: {},
headerBar: {},
footerBar: {}
},
rowIndicator: {
state: {},
created: {},
updated: {},
deleted: {}
},
checkBar: {
head: {}
},
headerItem: {},
footerItem: {},
tooltip: {},
tree: {
footer: {},
expander: {},
indent: {}
}
};
grid.loadStyles(sheet);
var sheet = {
"default": {},
"grid": {},
"panel": {},
"groupPanel": {},
"groupPanel.item": {},
"groupPanel.itemInner": {},
"groupPanel.head": {},
"groupPanel.headInner": {},
"body": {},
"body.empty": {},
"body.row": {},
"body.fixedRow": {},
"body.cell": {},
"body.fixedCell": {},
"body.rowRange": {},
"body.created": {},
"body.updated": {},
"body.deleted": {},
"body.checked": {},
"body.fixedColumnBar": {},
"body.fixedRowBar": {},
"body.selection": {},
"body.mobileSelection": {},
"body.rowDynamic": {},
"body.cellDynamic": {},
"header": {},
"header.group": {},
"header.head": {},
"header.sub": {},
"header.menuHandle": {},
"header.filterHandle": {},
"header.sortHandle": {},
"header.sortOrder": {},
"header.summary": {},
"header.summary.group": {},
"header.summary.head": {},
"footer": {},
"footer.group": {},
"footer.head": {},
"rowGroup.header": {},
"rowGroup.expander": {},
"rowGroup.footer": {},
"rowGroup.indent": {},
"rowGroup.head": {},
"rowGroup.bar": {},
"rowGroup.headerBar": {},
"rowGroup.footerBar": {},
"rowIndicator": {},
"rowIndicator.state": {},
"rowIndicator.created": {},
"rowIndicator.updated": {},
"rowIndicator.deleted": {},
"checkBar": {},
"checkBar.head": {},
"headerItem": {},
"tooltip": {},
"footerItem": {},
"tree.footer": {},
"tree.expander": {},
"tree.indent": {}
}
grid.loadStyles(sheet);
| 区域 | Parent | 概述 |
|---|---|---|
| default | 所有样式组的最后一个parent。 | |
| grid | default | 用于绘制网格边框或树视图镶边等网格本身。 |
| panel | default | (目前不被使用。) |
| groupPanel | default | 分组面板的基本样式组。 |
| groupPanel.item | groupPanel | 用于绘制显示在分组面板的字段项目。 |
| groupPanel.itemInner | groupPanel | 用于绘制显示在分组面板的字段项目的内侧边框。 |
| groupPanel.head | groupPanel | 用于绘制分组面板的标题单元格。 |
| groupPanel.headInner | groupPanel | 用于绘制分组面板的标题单元格的内侧边框。 |
| body | default | 指定显示数据单元格的内容区域的背景颜色。 |
| body.empty | default | 无列或行等的空网格的背景或文本样式。 |
| body.row | default | 网格行的背景颜色以及下边框样式。 |
| body.fixedRow | default | 固定行的背景颜色以及下边框样式。 |
| body.cell | default | 用于绘制数据单元格的基本样式组。 |
| body.fixedCell | body.cell | 用于绘制包含在固定区域的数据单元格的基本样式组。 |
| body.created | default | 用于绘制CREATED状态的行的样式组。 |
| body.updated | default | 用于绘制UPDATED状态的行的样式组。 |
| body.deleted | default | 用于绘制DELETED状态的行的样式组。 |
| body.checked | default | 用于绘制Checked状态的行的样式组。 |
| body.fixedColumnBar | default | 用于绘制划分固定区域的列条的样式组。 |
| body.fixedRowBar | default | 用于绘制划分固定区域的行条的样式组。 |
| body.selection | default | 用于绘制选中区域的颜色和边框的样式组。 |
| body.mobileSelection | default | 用于绘制手机上的选中区域的颜色和边框的样式组。 |
| body.rowRange | 可以为各个网格行指定样式组。请参考rowRangeStyles。 | |
| body.rowDynamic | 网格行级别的动态样式组。请参考rowDynamicStyles。 | |
| body.cellDynamic | 数据单元格级别的动态样式。请参考cellDynamicStyles。 | |
| header | default | 用于绘制GridHeader单元格的基本样式组。 |
| header.group | default | 用于绘制GridHeader的分组单元格的基本样式组。 |
| header.head | header | 用于绘制GridHeader标题单元格的样式组。 |
| header.sub | default | 用于绘制GridHeader单元格的子项目的基本样式组。 |
| header.menuHandle | default | 用于绘制显示在GridHeader标题单元格的菜单句柄的样式组。 |
| header.filterHandle | default | 用于绘制列标头单元格的筛选器句柄。 |
| header.sortHandle | default | 用于绘制列标头单元格的排序句柄。 |
| header.sortOrder | default | 用于绘制列标头单元格的排序顺序文本。 |
| header.summary | default | 用于绘制HeaderSummary单元格的基本样式组。 |
| header.summary.group | default | 用于绘制HeaderSummary分组单元格的基本样式组。 |
| header.summary.head | header.summary | 用于绘制HeaderSummary标题单元格的样式组。 |
| footer | default | 用于绘制GridFooter单元格的样式组。 |
| footer.group | default | 用于绘制GridFooter分组单元格的样式组。 |
| footer.head | footer | 用于绘制GridFooter标题单元格的样式组。 |
| rowGroup.header | default | 用于绘制组行的基本样式组。 |
| rowGroup.expander | default | 用于绘制组行的扩张器的基本样式组。 |
| rowGroup.footer | default | 用于绘制组页脚行的基本样式组。 |
| rowGroup.indent | default | 用于绘制组行左侧边距的样式组。 |
| rowGroup.head | header | 用于绘制行组的各级别的标题单元格的样式组。 |
| rowGroup.foot | footer | 用于绘制行组的各级别的页脚单元格的样式组。 |
| rowGroup.bar | default | (目前不被使用。) |
| rowGroup.headerBar | rowGroup.header | (目前不被使用。) |
| rowGroup.footerBar | rowGroup.footer | (目前不被使用。) |
| rowIndicator | default | 用于绘制RowIndicator单元格的基本样式组。 |
| rowIndicator.state | default | 用于绘制RowIndicator状态单元格的基本样式组。 |
| rowIndicator.created | default | 用于绘制RowIndicator DataRowState.CRAETED状态行的状态单元格的样式组。 |
| rowIndicator.updated | default | 用于绘制RowIndicator DataRowState.UPDATED状态行的状态单元格的样式组。 |
| rowIndicator.deleted | default | 用于绘制RowIndicator DataRowState.DELETED或DataRowState.CREATE_AND_DEL状态行的状态单元格的样式组。 |
| checkBar | default | 用于绘制CheckBar单元格的基本样式组。 |
| checkBar.head | header | 用于绘制CheckBar标题单元格的样式组。 |
| tooltip | default | 用于显示单元格上所显示的提示弹窗。(ver 1.3.5) |
| headerItem | default | 用于绘制网格页眉项目的基本样式组。 |
| footerItem | default | 用于绘制网格页脚项目的基本样式组。 |
| tree | default | 与网格样式组相同。v 1.3.8 |
| tree.footer | default | 用于绘制树行的页脚单元格的基本样式组。 |
| tree.expander | default | 用于绘制树行的扩张器的样式组。 |
| tree.indent | default | 用于绘制树行的左侧边距的样式组。 |