YUI 的 datatable 的使用方面的一些问题的总结-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10153/article/details/82039074

本文详细介绍了在使用YUI的dataTable组件进行报表展现时遇到的问题及解决方案，包括处理变动的列数、单元格编辑、数据保存和复合表头的配置等。通过实践案例，为报表开发提供了实用的技术指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，项目中需要用到yui的datatable组件来做报表的展现。碰到了一些问题，把这些问题的解决方案写下来，多探讨，多学习。
一，在使用YUI的dataTable组件时，如果宾栏的个数是变化的，那么表格的两边就会留下空白，如下图所示

[img]http://dl.iteye.com/upload/attachment/450241/4e8fb7eb-b752-3c24-902b-a13371246f4e.jpg[/img]

在html文件中,添加如下样式：

.yui-dt-scrollable table { width: 100%; }

表格就可正常显示，如下图:

[img]http://dl.iteye.com/upload/attachment/450243/a2ac0248-c6af-368b-a9a2-8ce0dc4b09d5.jpg[/img]

二，如何使表格的每一个单元格可编辑
遍历每一个字段描述，给每一个字段加上不同类的editor,如下面所示：

columndef.editor = new YAHOO.widget.TextboxCellEditor({disableBtns:true});

三，如何保存每一个单元中的数据，我是这样实现的：

给dataTable对象注册单元格被更新的事件:

myDataTableX.subscribe('cellUpdateEvent',handleCellValue);

保存单元格数据至json格式的变量中

四，对于复合表头，可以按照yui提供的sample，来书写字段的描述，如下：

{
key:"month", label:"mm月",
children:[
{key:"commitScore", label:"AAA", sortable:true, resizeable:true},
{key:"count", label:"BBB", sortable:true, resizeable:true}
]
}
这种格式的复合表头，还可以更加灵活，可参考yui的dataTable的例子