Tangramgrid
- 1. Tangram Grid 控件介绍及分享 Tangram Grid is the grid you need! 阳衡锋
- 2. 大纲
- 3. 初衷 ?目前的表格控件功能不理想 ?功能强大的非常臃肿 (eg.jggrid) ?功能一般的难以满足个性化需求 ?基于 Tangram 的 Grid 控件不多，而且功能比较 简单 ?在后台系统中 Grid 控件用的最频繁 ? 原 因了 有 个人 当然也
- 4. 之前的 Grid/UI 项目 功能多， javascript 变得很 庞大。但实际用的不多 UI 控件库，模块化，控件的关 联，因为没时间夭折
- 5. Tangram Grid! 功能强大 ！ 32K(YUI compressed) 自带插件 9 个 展性强 扩 适应性强，无侵入性 Tangram baseUI 主流浏览器兼容 , 包括 IE6 git 开源 功能模块化
- 6. 基本功能 = 你想到的功能 +↓ ?基本的表格数据展现，提供方法将 json 数据加载到 grid 中 ?宽度自适应 , 设置表格宽度 / 高度 高度自适应高度 , 自 动拉伸，也可以设置最小高度 ?ajax 请求数据数据 , 分页，支持集成自定义分页控件， 能适应不同的 ajax 请求数据 ?表格单元格格式自定义，转换器，支持 checkbox 列 ?Ajax 请求时支持遮罩，也可以自定义遮罩 ?点击列头字段排序 ?基本事件绑定 , 行选择， hover , 点击 ?新增行 / 修改行 / 删除行 ?列宽可以拖动 ?列头分组
- 7. 功能列表 - 插件功能 ，还有 ?行可以通过拖放改变顺序 ?列可以通过拖放改变顺序 ?可编辑表格，支持常见的编辑类型，文本框，下拉框等， 支持自定义编辑。 ?子表格，点击某单元格出现一块区域显示子数据，可以是 表格，也可以是自定义内容 ?冻结列，列比较多的时候出现横向滚动条，可以冻结左边 的 n 列，这些列不随横向滚动条滚动 ?数据显示的分组，统计，以及扩展机制，主要是扩展统计 方法，支持从 ajax 请求结果读取统计数据，也支持 javascript 做简单统计。 ?Treegrid ，将表格的某个列显示成树形结构，并支持延迟 加载 ?键盘事件支持，支持键盘事件，光标操作等 ?页内排序
- 8. Demo 演示
- 9. 所有文件 css 文件 基本功能 插件功能， 按需引用
- 10. 基本使用 1. 引入 tamgram & grid 2. 定义一个 div 3.Javascript 声明一个对象
- 11. 插件使用 1. 引入插件 js 2.Javascript 声明对象时设置插件属性 ( 插件属性相见文档 ) 调 用 提 供方法 会 插件也
- 12. API& 事件 1.OO 方式调用方法： gridInstance.fn(parameter); 2. 初始化指定监听方法 3.. 事件监听
- 13. 功能可扩展 ?标准的 baseUI 控件扩展方式 ?列类型自定义 ?统计类型自定义 基 于这些 就是 插件 发的 ?分页控件自定义 扩展开 ?事件监听
- 14. 文档很重要 ! ! 强哥 支持 谢谢
- 15. github 开源 项目地址： https://github.com/hafeyang/tangramgrid git 地址： git://github.com/hafeyang/tangramgrid.git 只读 svn 地址： http://svn.github.com/hafeyang/tangramgrid
- 16. 项目介绍 Demos 文档 CSS 源码 压缩工具 :windows+jdk
- 17. 无处不在的细节 “ 无论何时，只要涉及报告 用形容词来描述产物（“该产物 酷毙了”），而没有提及细节 （如他的标题栏见识拉绒铝的 颜色，所有的图标带有一点反 光，好像被放在三角钢琴上一 样），那么你就知道你麻烦了 。 -- 软件随想录 P97
- 18. 宽度自适应 容器宽度发生变化，表格的宽度也要变化 IE6 必须指定宽度且 position:relative; 才能 内容溢出同样需要显示滚动条 支持 overflow:hidden resize/setSize 方法调整 / 设置大小 但是表格 table-layout:fixed 需要指定宽度
- 19. 列宽自适应 有一列的宽度能填充所有剩下宽度 fix:true 表示该列的宽度是 表格宽度减去其他列的宽度
- 20. 列头 / 数据冻结 ?列头 table 与数据表格分开 ?表头列与数据列的对齐 (webkit,table- layout:fixed bug) ?横向滚动条滚动，列头表格也需要滚动 ?纵向滚动条会影响对齐的计算 ?滚动条使用单独的 div ，而不是利用容器的溢出， 有利于扩展出更多的滚动条行为 ?数据区的冻结， copy 一个表格的一部分
- 21. 空值的显示 ?给表格的数据是未知的，经常会出现 null,undefined 0,”0” 不 ?将 null undefined 替换成”” 显示？
- 22. 内存泄漏问题 ?事件 on/un 原理 , 事件中心 ?关注 baidu.event._listeners.length ?删除 DOM 结点，先用 un 方法取消其事件 (jQuery) ?“fully disposable” ?DOM 操作频繁 ?尤其是数据加载会重新加载 ?baseUI 中 addEventListener/removeEventListener 的设计 以及 dispose 实现。 ?重新 render?
- 23. 原型 ？实例 ？ ?原型意味着每个实例都能访问到原型中的属性。 ?不可以将 DOM 引用放在原型中 ?g.ref 存放 DOM 引用 ?如果将 ref 扩展到 prototype 上，当页面出现多 个 grid 实例时， ref 访问不到各自实例的 DOM 引 用。 ?_clearBindings 方法删除 DOM ref
- 24. why 插件 ？ ?非常用功能使用插件实现 ?设计本身扩展性挑战 ?减小 js 大小 ?插件对基本功能的依赖。 ?理论：模块化 , 松耦合
- 25. 表格事件的绑定 ，使用冒泡 ?不需要每次加载 table 后再绑定事件 ,table 的事件 都是通过冒泡通过容器监听的。 ?事实上 table DOM 的操作耗时和添加事件监听耗时 是一个数量级。 ?冒泡事件监听有效的提升了性能。 ?baseUI 的 getCallRef/ getCallString 的利弊
- 26. 拖放行为 / 行拖动 / 列拖动的实现 跨级 原位置区域，无效 有效区 无效
- 27. treegrid 实现 ?使用时需要配置什么？ ?怎样将列表型数组解析成一个树形结构 ? ?树节点的展现 ? ?新增 / 修改 / 删除节点 ? ?别忘了。它只是一个插件
- 28. 保持 API 的稳定 ?berg: http://www.baiduux.com/blog/2011/06/21/javs cript-api-compatible/ ?谢绝直接访问 grid 内部 DOM 。 ?提供 cellIterator 用于表格内部 DOM 访问
- 29. 走在用户的前面 谢谢 ！