Tangram Grid介绍以及技术细节

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. 走在用户的前面
谢谢 ！