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

在html文件中,添加如下样式:
.yui-dt-scrollable table { width: 100%; }
表格就可正常显示,如下图:

二, 如何使表格的每一个单元格可编辑
遍历每一个字段描述,给每一个字段加上不同类的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的例子
最近,项目中需要用到yui的datatable组件来做报表的展现。碰到了一些问题,把这些问题的解决方案写下来,多探讨,多学习。
一,在使用YUI的dataTable组件时,如果宾栏的个数是变化的,那么表格的两边就会留下空白,如下图所示
在html文件中,添加如下样式:
.yui-dt-scrollable table { width: 100%; }
表格就可正常显示,如下图:
二, 如何使表格的每一个单元格可编辑
遍历每一个字段描述,给每一个字段加上不同类的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的例子