Tangramgrid

Tangram Grid 控件介绍及分享

Tangram Grid is the grid you need!

阳衡锋

初衷

•目前的表格控件功能不理想
•功能强大的非常臃肿 (eg.jggrid)
•功能一般的难以满足个性化需求

•基于 Tangram 的 Grid 控件不多，而且功能比较
简单

•在后台系统中 Grid 控件用的最频繁

原因了
有个人
当然也

之前的 Grid/UI 项目

功能多， javascript 变得很
庞大。但实际用的不多

UI 控件库，模块化，控件的关
联，因为没时间夭折

Tangram Grid!

功能强大
！
32K(YUI compressed) 自带插件 9
个展性强
扩适应性强，无侵入性

Tangram baseUI

主流浏览器兼容 , 包括
IE6

git 开源
功能模块化

基本功能 = 你想到的功能 +↓

•基本的表格数据展现，提供方法将 json 数据加载到 grid
中
•宽度自适应 , 设置表格宽度 / 高度高度自适应高度 , 自
动拉伸，也可以设置最小高度
•ajax 请求数据数据 , 分页，支持集成自定义分页控件，
能适应不同的 ajax 请求数据
•表格单元格格式自定义，转换器，支持 checkbox 列
•Ajax 请求时支持遮罩，也可以自定义遮罩
•点击列头字段排序
•基本事件绑定 , 行选择， hover , 点击
•新增行 / 修改行 / 删除行
•列宽可以拖动
•列头分组

功能列表 - 插件功能，还有

•行可以通过拖放改变顺序
•列可以通过拖放改变顺序
•可编辑表格，支持常见的编辑类型，文本框，下拉框等，
支持自定义编辑。
•子表格，点击某单元格出现一块区域显示子数据，可以是
表格，也可以是自定义内容
•冻结列，列比较多的时候出现横向滚动条，可以冻结左边
的 n 列，这些列不随横向滚动条滚动
•数据显示的分组，统计，以及扩展机制，主要是扩展统计
方法，支持从 ajax 请求结果读取统计数据，也支持
javascript 做简单统计。
•Treegrid ，将表格的某个列显示成树形结构，并支持延迟
加载
•键盘事件支持，支持键盘事件，光标操作等
•页内排序

所有文件

css 文件

基本功能

插件功能，
按需引用

基本使用

1. 引入 tamgram & grid

2. 定义一个 div

3.Javascript 声明一个对象

插件使用

1. 引入插件 js

2.Javascript 声明对象时设置插件属性 ( 插件属性相见文档 )

调用
提供方法
会
插件也

API& 事件

1.OO 方式调用方法： gridInstance.fn(parameter);
2. 初始化指定监听方法

3.. 事件监听

功能可扩展

•标准的 baseUI 控件扩展方式

•列类型自定义

•统计类型自定义
基于这些
就是
插件发的
•分页控件自定义
扩展开

•事件监听

文档很重要 !

!
强哥支持
谢谢

github 开源

项目地址：
https://github.com/hafeyang/tangramgrid
git 地址：
git://github.com/hafeyang/tangramgrid.git
只读 svn 地址：
http://svn.github.com/hafeyang/tangramgrid

项目介绍

Demos
文档

CSS

源码

压缩工具 :windows+jdk

无处不在的细节

“ 无论何时，只要涉及报告
用形容词来描述产品（“该产品
酷毙了”），而没有提及细节
（如他的标题栏见识拉绒铝的
颜色，所有的图标带有一点反
光，好像被放在三角钢琴上一
样），那么你就知道你麻烦了
。

-- 软件随想录 P97

宽度自适应

容器宽度发生变化，表格的宽度也要变化

IE6 必须指定宽度且
position:relative; 才能
内容溢出同样需要显示滚动条支持 overflow:hidden

resize/setSize 方法调整 / 设置大小
但是表格 table-layout:fixed 需要指定宽度

列宽自适应

有一列的宽度能填充所有剩下宽度

fix:true 表示该列的宽度是
表格宽度减去其他列的宽度

列头 / 数据冻结

列头 table 与数据表格分开
表头列与数据列的对齐 (webkit,table-
layout:fixed bug)
横向滚动条滚动，列头表格也需要滚动
纵向滚动条会影响对齐的计算
滚动条使用单独的 div ，而不是利用容器的溢出，
有利于扩展出更多的滚动条行为
数据区的冻结， copy 一个表格的一部分

空值的显示

给表格的数据是未知的，经常会出现
null,undefined
0,”0” 不
将 null undefined 替换成””
显示？

内存泄漏问题

事件 on/un 原理 , 事件中心
关注 baidu.event._listeners.length
删除 DOM 结点，先用 un 方法取消其事件 (jQuery)
“fully disposable”
DOM 操作频繁
尤其是数据加载会重新加载
baseUI 中 addEventListener/removeEventListener 的设计
以及 dispose 实现。
重新 render?

原型？实例？

原型意味着每个实例都能访问到原型中的属性。
不可以将 DOM 引用放在原型中
g.ref 存放 DOM 引用
如果将 ref 扩展到 prototype 上，当页面出现多
个 grid 实例时， ref 访问不到各自实例的 DOM 引
用。
_clearBindings 方法删除 DOM ref

why 插件？

非常用功能使用插件实现
设计本身扩展性挑战
减小 js 大小
插件对基本功能的依赖。
理论：模块化 , 松耦合

表格事件的绑定，使用冒泡

不需要每次加载 table 后再绑定事件 ,table 的事件
都是通过冒泡通过容器监听的。
事实上 table DOM 的操作耗时和添加事件监听耗时
是一个数量级。
冒泡事件监听有效的提升了性能。
baseUI 的 getCallRef/ getCallString 的利弊

拖放行为 / 行拖动 / 列拖动的实现

跨级原位置区域，无效有效区
无效

treegrid 实现

使用时需要配置什么？
怎样将列表型数组解析成一个树形结构 ?
树节点的展现 ?
新增 / 修改 / 删除节点 ?
别忘了。它只是一个插件

保持 API 的稳定

berg:

http://www.baiduux.com/blog/2011/06/21/javs
cript-api-compatible/
谢绝直接访问 grid 内部 DOM 。
提供 cellIterator 用于表格内部 DOM 访问

走在用户的前面

谢谢！

Tangramgrid

More Related Content

Featured (20)

Tangramgrid