SMART datagrid格基本上是基于HTML5 Canvas而运行的。 在最新版本的浏览器上,Canvas提供相当水平的渲染性能。 但是,因为SMART datagrid格的基本要求是通过多种方式而显示和处理业务数据,所以就会需要为实现渲染而做很多准备。 因此,为用户提供最自然的界面,就需要减低不必要的渲染。
SMART datagrid格为体现多种要求而提供可以根据多种级别和方式而显示数据的功能。 我们需要根据下列说明,选择和使用符合要求的最适当的功能。
在网格body区域显示数据单元格之前,将会在子区域渲染背景或边框。 首先,将会渲染网格本体的背景,并且如果已在body设置background样式,就会在body区域渲染背景。 而且,如果在rowStyles或rowRangeStyles设置background或borderBottom, 就可能会渲染包含数据单元格的行的背景或边框。 最后,如果在列样式或其他动态样式设置background,就会渲染数据单元格的背景。
也就是说,渲染背景有可能会被重叠,而如果是不必要的重叠,就会降低性能。 因此,上述所有区域的background值基本上都已被初始化为null,而只有当显示背景颜色在工作上具有意义的情况下,才需要在适当区域进行设置。
另外,半透明颜色或线性gradient填充等,只有在必要的情况下才可以使用。 在工作画面的情况,大部分都可以只使用不透明的单一颜色进行显示。
在渲染数据单元格之前,将会首先渲染包含单元格的数据行, 并且将会基本适用指定在GridBody.rowStyles或GridBody.fixedRowStyles的样式。 而且,如果需要为各个行或行的范围而渲染不同的背景颜色或边框,则可以设置GridBody.rowRangeStyles。 如上述说明,因为样式值基本上都已被设置为null,所以将不会运行行的渲染。 虽然我们需要避免不必要的行的渲染,不过当需要渲染包含在行中的所有单元格的背景颜色为同一颜色时,必须要替代单元格渲染而选择行的渲染。
在渲染一个数据单元格之前,将会通过几个阶段的样式组设置过程。 首先,指定在GridBody.cellStyles的样式将会成为数据单元格的默认样式。 也就是说,如果足以使用指定在cellStyles的样式,就不需要指定列样式或动态样式。 固定区域的单元格,将会适用设置在GridBody.fixedCellStyles的样式。
此后,将会适用指定在各个列的GridColumn.styles, 然后将会按照GridBody.rowDynamicStyles、GridBody.cellDynamicStyles 以及列动态样式等顺序进行适用。最后,将会适用通过CellStyle而指定的样式值。 这时,最终适用的样式值将会被设置在数据单元格,并且这些值将会用于数据单元格渲染。 也就是说,如果样式属性值被设置为非undefined的明确的值,则设置在前一阶段的值将会被忽视。 如果上述所有阶段都没有明确的设置,就会从指定在网格内部的默认样式表中获取值。
实际上,寻找样式值的路径是与上述说明中的适用阶段相反的。 因此,在后期阶段明确指定样式值的方式,可以有助于提高性能。
目前,最顺利运行在Chrome浏览器上,而在IE或FireFox的情况,如果设置为根据变更浏览器大小而变更网格大小,其反应速度可能就会变慢。
目前,在IE浏览器上,有时会有网格比起页面的其他元素显示得较为缓慢的情况。(并非网格脚本文件加载较长时间的问题。) 这时,可以在紧接着重置网格(设置列、选项、样式等)之后,调用grid.updateNow()。 此后,就不等待渲染时点,而是直接渲染当前状态的网格。
grid.setColumns(...);
grid.setOptions(...);
grid.loadStyles(...);
grid.setDataSource(ds);
loadData(ds);
checkIE() && grid.updateNow();