大城小胖的大城

关注细节又何妨??? -------- 论“关注技术 ... | google怎么访问不了了,一直在报502错误

2007-10-30

[开发笔记]GT-Grid基本原理之 :展现层结构简介

我打算陆陆续续的写一些 GT-Grid 实现原理和方式的文章.
一来自己做个记录
二来可以让更多的朋友们看到,便于大家指出我的不足
三来也许可以给一些朋友一些有用的提示.

但是这个暂时还只会是比较粗浅的, 类似详细设计那种细致的文档我还没有时间写,写了我估计也不会有人看吧呵呵

今天先开始第一篇展现层结构简介.

======================
列表组件最后呈现出的页面结构如图所示.

======================
采用表头和表体分离设计.
“列表头容器”为”内部超出大小时,滚动内部内容,但是隐藏滚动条”
“列表体容器” 为”内部超出大小时,滚动内部内容,并显示滚动条”
难点:列表滚动的同步(列表头列表体冻结列列表编辑器....), 各个列的宽度的同步....

======================
列表单元格内部嵌套一个div.

======================
固定列表头的实现:
在列表体容器的onscroll事件中,做好 “列表头容器”与“列表体容器”的水平方向同步.
这样就可以实现,垂直方向列表头固定在列表顶端,水平方向与列表体同步的效果.

======================
冻结列的实现:
首先要冻结的列在列表的前面(就是说只能冻结列表的前面若干列).
创建一个浮动层div, 层内放置一个和要显示的数据列表一样的列表,但是只有要冻结的那几列就可以. 然后将这个浮动层覆盖在列表之上, 这样当列表横向滚动时候,就会产生那几列被冻结的效果.

======================
调整列宽的实现:
记录调整开始时鼠标位置, 记录调整结束时鼠标位置. 取得两者的差值.
用调整的列当前的宽度 + 得到的差值,就是列的新宽度.
用这个新宽度更新列对应的css样式.(用这种方式会很好的完成同步,浏览器会对所有使用该样式的td自动调整宽度,无需人为实现宽度的同步)

======================
客户端排序:
就是根据一定条件,对列表体table的tr进行重新排列.

======================
编辑:
单击(或双击,可配置)单元格,则该单元格进入编辑状态.
组件会根据所在列的配置,调出响应的编辑控件.控件会自动覆盖所编辑的单元格.
成功编辑后,将新值填入相应的单元格(td), ,并更新客户端数据集,同时隐藏编辑控件.

======================
新增
为列表体添加一行(tr以及相应的td),并更新客户端数据集,用户可利用编辑组件添入数据.

======================
删除:
删除客户选中的行(tr以及相应的td),并更新客户端数据集.

描述:
大小: 62.2 KB