`
李宏喜
  • 浏览: 119456 次
  • 性别: 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 异步请求显示数据分页

    YUI DataTable 提供了一些内置的方法来帮助实现这一功能,例如 `getFirstPage()`、`getNextPage()`、`getPreviousPage()` 和 `setPageIndex()`。你可以根据实际需求创建自定义的分页控件,或者使用 DataTable 自带的...

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

    在本教程中,我们将深入探讨如何使用Yahoo User Interface (YUI) 2.8 版本来实现一个从服务器端动态获取数据并具备分页功能的DataTable。YUI 是一个强大的JavaScript库,提供了丰富的组件和工具,用于创建交互式和...

    yui 资源包

    2. **错误修复**:修复了之前版本的一些已知问题,增强了稳定性。 3. **API改进**:部分API进行了调整和完善,使开发更加便捷。 四、界面设计与资源优化 YUI强调用户体验,其界面设计组件不仅美观,而且易于定制。...

    YUI.rar_html_javascript YUI_yui_yui javascript

    5. **数据表格**:YUI的DataTable组件可用于展示和操作大量数据,支持排序、过滤和分页等功能。 通过学习和实践这些示例,开发者可以深入了解YUI的功能和用法,提高自己的前端开发技能。 总结来说,YUI是一个强大...

    YUI 详细说明文档

    ### YUI 详细说明文档 ...以上概述了YUI的一些核心概念和技术细节,希望对学习YUI有所帮助。YUI不仅提供了强大的工具库,还有一系列实用的组件,这些都大大简化了Web开发的工作量,并提高了项目的质量。

    yui_3.8.1.zip

    四、YUI的使用与学习 学习YUI,首先需要掌握JavaScript基础知识,然后通过官方文档了解YUI的模块化结构和API。官方文档详细且全面,包含了大量的示例代码,便于开发者快速上手。同时,社区资源丰富,有许多优秀的...

    Yahoo JavaScript库 YUI源码

    2. **跨浏览器兼容性**:YUI致力于提供一致的跨浏览器体验,支持主流的现代浏览器以及一些较旧版本,确保应用在多种环境下都能正常运行。 3. **事件系统**:YUI提供了强大的事件处理机制,可以轻松监听和响应DOM...

    关于yui的学习

    7. **布局与组件**:YUI包含了一系列UI组件,如Button、Form、DataTable等,用于快速构建用户界面。 学习YUI的过程中,可以结合官方文档和示例代码进行实践。官方文档详尽且实例丰富,可以帮助初学者快速上手。同时...

    Struts2+JSON+YUI组合应用之二构建RichClient

    2. **YUI作为前端展示**:利用YUI的组件和API,可以创建丰富的用户界面,如使用YUI的DataTable展示从服务器获取的JSON数据,或者使用YUI的Form组件进行表单验证,并通过AJAX发送到Struts2 Action进行处理。...

    YUI Yahoo User Interface v3.5.0

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

    javascript库函数

    8. **表格和格子布局**:YUI Grids提供响应式布局框架,适应不同屏幕尺寸,而YUI DataTable则用于创建复杂的表格数据展示。 9. **表单处理**:YUI Form提供了一系列方法,帮助开发者验证和管理表单元素,如YUI....

    yui博客

    例如,它可能会演示如何使用YUI的DataTable模块来展示博客文章列表,或者使用Form模块来实现用户注册和登录功能。 在实际应用中,YUI博客系统可能会包含以下几个关键组成部分: 1. **用户界面**:使用YUI的...

    YahooUI Library

    这意味着任何人都可以免费使用、修改和分发 YUI 的代码。开发者可以轻松地从 SourceForge 站点下载整个项目文件,包括相关的文档和示例代码。 #### 三、社区资源 - **YUI Blog**:项目开发人员的官方博客,定期...

    基于jquery的文本框与autocomplete结合使用(asp.net+json)

    总结一下,这个示例展示了如何利用jQuery Autocomplete在ASP.NET环境中创建一个实时搜索功能,通过AJAX请求获取服务器端的JSON数据,并在用户输入时提供动态建议。这种方法提高了交互性和用户体验,使得用户能更快速...

    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...

    Div+Css实现屏蔽效果

    在网页开发中,有时我们需要实现特定元素的点击事件被屏蔽,比如在使用Yahoo的YUI控件中的datatable时。为了达成这一目标,我们可以利用Div+Css的技术来创建一个覆盖层,以此来阻止用户与底层元素的交互。这种方法的...

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

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

    21个强大的javascript框架.doc

    此外,YUI还提供了DataTable、LayoutManager、RichTextEditor、Slider等高级组件,满足不同场景下的开发需求。 #### MooTools:面向对象的简洁框架 MooTools是一个轻量级但功能强大的JavaScript框架,强调模块化和...

    layui 给数据表格加序号的方法

    1,第一种需求,只给当前页加序号 (1),给你的数据加上 templet属性 ,cols: [[ {field:'tourPlayerId', width:80, title: 'ID1', sort: true,fixed: 'left',} ,{field:'zizeng', width:80, title: '排名',fixed...

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

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

Global site tag (gtag.js) - Google Analytics