`
李宏喜
  • 浏览: 116465 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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的例子      
  • 大小: 12.3 KB
  • 大小: 11.3 KB
分享到:
评论

相关推荐

    JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

    NULL 博文链接:https://pouyang.iteye.com/blog/581021

    YUI2.8 实现datatable从server端动态获取数据,并实现分页功能(下)

    NULL 博文链接:https://zhengjj-2009.iteye.com/blog/666091

    YUI Yahoo User Interface v3.5.0

    YUI(Yahoo User Interface),是由雅虎开发的一个开源的...在日历组件中添加了键盘导航增强了App、Charts和DataTable组件大量的bug修复该版本的API也进行了改进,并废弃了部分API,详细改进及迁移指南参阅:YUIblog

    ExtAspNet_v2.3.2_dll

    注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...

    layui 实现table翻页滚动条位置保持不变的例子

    最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过class定位表格div位置。 可以看到...

    Div+Css实现屏蔽效果

    在做项目的过程中 用到了Yahoo 的YUI控件,其中的datatable 很方便,但是有些时候要把点击table事件屏蔽,于是便想到了用div+Css的方法实现这一效果。

    JAVA上百实例源码以及开源项目

    2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...

    JAVA上百实例源码以及开源项目源代码

    2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...

    layui实现数据表格点击搜索功能

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

Global site tag (gtag.js) - Google Analytics