YUI 的 datatable 在使用方面的一些问题的总结

跑步的小伙子

于 2016-11-07 09:14:25 发布

阅读量704

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lihxa2002/article/details/53063494

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近，项目中需要用到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的例子