`

GT-Grid 1.0 基础教程(十二)

阅读更多
GT-Grid 1.0 基础教程(十二)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里


第十二章: 自定义表头


这一章将介绍大家如何创建自定义列表表头.
本章示例文件"mydemo12.html"


=========================================



GT-Grid自定义表头的实现原理很简单:
开发人员在页面内用标准的html画出一个简单的(无样式)的table.
该table的结构和内容 就是最终要显示的自定义表头的结构和内容.
然后再将这个table和GT-Grid绑定.

下面看一个列子.
<table id="myHead" style="display:none">
<tr>
	<td rowspan="2" columnId='no'>学号</td>
	<td colspan="3">基本信息</td>
	<td colspan="3">成绩</td>
	<td  >其他</td>
</tr>
<tr>
	<td columnId='name'>姓名</td>
	<td columnId='age'>年龄</td>
	<td columnId='gender'>性别</td>
	<td columnId='english'>英语</td>
	<td columnId='math'>数学</td>
	<td columnId='total'>总成绩</td>
	<td columnId='detail'>详细信息</td>
</tr>
</table>



这个table就是 自定义表头的一个示例,这个table必须要有一个页面内唯一的id.(上例中为'myHead')
大家注意一下里面的单元格, 有些是有 columnId的 ,有些是没有的.
有columnId的单元格就是要和 GT-Grid中的 columns定义能够对应上的表头单元格.
而那些没有的 , 就是不与具体的columns定义对应的表头单元格.

在绘制该table时 一定要注意列的数量要和grid的column数目一致.



而grid的columns定义依然和普通的列表定义一样.

grid的定义中需要将grid和该table绑定, 使用 customHead 属性:

var gridConfig={
	/* ... 略去其他属性设置 ...*/
	
	customHead : 'myHead', //值为自定义表头所用table的id
}




注意: 在目前版本中, 自定义列表头之后, 列的位置移动, 列冻结, 列隐藏功能将不再好用.





=========================================




本章还是非常简单易懂的, 结合示例体会一下应该很好理解.


分享到:
评论
19 楼 fcw528 2008-10-16  
fins 写道

很好 你给出了你想要的合理的结果

但是之前有两个客户 提过这个需求 他想要的就不是这样的.

-------------------------------

我提个问题 你可以思考一下:

fixedColumn中的内容 是 "年龄" 和 "性别" 时要该怎么做?

是不是可以这样:
在程序处理时&nbsp; 发现了年龄 那么找到年龄的"父亲"是--基本信息
(判断"年龄"是不是一个子标题 以及寻找年龄的"父标题")
将整个"基本信息"冻结.
之后又发现了性别 ,而性别在 基本信息之下 所以不处理.

然后 对基本信息内的 列的顺序是不是要调整呢?
fixcolumn是年龄和性别,那么是不是应该把这两列放到姓名的前面呢?
那么 你的答案是不是就是标准的答案呢?

----------------------------------

其实我说这么多 不是说 这些做不出来

而是我想突出的是 "自定义与个性化"的一个问题

当 表头是完全可以由客户"自定义"的时候 ,
是不可能提供出来一个通用的规范的 标准化的方法, 来满足客户全部需求的

也就是说 "自定义"的东西,一定要用"自定义"的方法来解决.

因为 由于自定义的存在 导致 每一个客户 心里都有一个自己渴望的"标准答案".


-----------------------------------

另外 实现你提的这个需求 需要多少行代码??我简单分析了一下 大概需要500行以上.
(包括空行 和 大括号行)

为了一个"不常用而且非必要" 的功能 增加了几百行代码 是否值得?
每一行代码 会带来新的bug, 每一个bug都需要大量的测试....
这背后的成本我是不得不去顾及的.


所以 开发产品 和做项目 或者是做技术验证 不一样的.
需要顾及的东西太多了

希望你理解



其实我也是在往产品的角度考虑,产品只考虑通用性,对于你此处提到的情况其实应该有个很简单的原则:既然基本信息下不是所有列都指定为冻结,那么基本信息下的所有列都不冻结,否则整个基本信息下的所有列都冻结
18 楼 fins 2008-10-16  
很好 你给出了你想要的合理的结果

但是之前有两个客户 提过这个需求 他想要的就不是这样的.

-------------------------------

我提个问题 你可以思考一下:

fixedColumn中的内容 是 "年龄" 和 "性别" 时要该怎么做?

是不是可以这样:
在程序处理时  发现了年龄 那么找到年龄的"父亲"是--基本信息
(判断"年龄"是不是一个子标题 以及寻找年龄的"父标题")
将整个"基本信息"冻结.
之后又发现了性别 ,而性别在 基本信息之下 所以不处理.

然后 对基本信息内的 列的顺序是不是要调整呢?
fixcolumn是年龄和性别,那么是不是应该把这两列放到姓名的前面呢?
那么 你的答案是不是就是标准的答案呢?

----------------------------------

其实我说这么多 不是说 这些做不出来

而是我想突出的是 "自定义与个性化"的一个问题

当 表头是完全可以由客户"自定义"的时候 ,
是不可能提供出来一个通用的规范的 标准化的方法, 来满足客户全部需求的

也就是说 "自定义"的东西,一定要用"自定义"的方法来解决.

因为 由于自定义的存在 导致 每一个客户 心里都有一个自己渴望的"标准答案".


-----------------------------------

另外 实现你提的这个需求 需要多少行代码??我简单分析了一下 大概需要500行以上.
(包括空行 和 大括号行)

为了一个"不常用而且非必要" 的功能 增加了几百行代码 是否值得?
每一行代码 会带来新的bug, 每一个bug都需要大量的测试....
这背后的成本我是不得不去顾及的.


所以 开发产品 和做项目 或者是做技术验证 不一样的.
需要顾及的东西太多了

希望你理解


17 楼 fcw528 2008-10-16  
“冻结"学号" 还是"姓名" 还是"所有的基本信息" 需要完全不同的算法 (因为学号跨行 而姓名又在一个跨列的大单元格下面)”
“另外 我冻结姓名时怎么处理?是把姓名单独作为一列 还是 依然在"基本信息"下面?
解除冻结时 放到什么位置? ”
re:(1)姓名所在的大单元格(所有的基本信息)下面的所有列要么都冻结,要么都不冻结  
    (2)姓名依然在基本信息下面

跨行不是问题,整个列冻结就行
16 楼 fins 2008-10-16  
fixedColumns 这种思路我当然想过了
但是 问题依然是"由于自定义列表的不确定性 即使给了我 fixedColumns 这个集合"我也不知道要怎么处理

我前面提到的那些疑问不是还是存在的吗?

引用

冻结"学号" 还是"姓名" 还是"所有的基本信息" 需要完全不同的算法 (因为学号跨行 而姓名又在一个跨列的大单元格下面)

这个还只是我的例子 如果你的自定义表头有三行呢??
如果 姓名也是跨列的呢?

另外 我冻结姓名时怎么处理?是把姓名单独作为一列 还是 依然在"基本信息"下面?
解除冻结时 放到什么位置?




你是站在使用和api接口的角度来考虑 我是站在实现的角度

所以看问题可能不一样吧 呵呵
15 楼 fcw528 2008-10-16  
呵呵,fins你把问题复杂化了,从另一个角度思维,不是没有个列有个冻结属性,而是有个fixedColumns的集合,那么一切问题就简单了,具体实现可以参考一下ms flexgrid
14 楼 fins 2008-10-16  
而且 这个地方 不是 "指定一个参数 告诉gt冻结哪一列" 就可以了

因为 自定义 尤其有跨行跨列的单元格时  整个机制很复杂

这个工作 几乎只能定制来实现

也就是说 不同的自定义表头 需要不同的实现方法

例如我例子中的

http://fins.iteye.com/admin/pictures/17932


冻结"学号" 还是"姓名" 还是"所有的基本信息" 需要完全不同的算法 (因为学号跨行 而姓名又在一个跨列的大单元格下面)

这个还只是我的例子 如果你的自定义表头有三行呢??
如果 姓名也是跨列的呢?

另外 我冻结姓名时怎么处理?是把姓名单独作为一列 还是 依然在"基本信息"下面?
解除冻结时 放到什么位置?

而且 冻结 实际上内部也是做了移动的 因为冻结的时候 就是要先把列移动到所有非冻结列的前面.

......

总之 一旦使用自定义表头 很多东西都非常难以控制
13 楼 fins 2008-10-16  
"特定"的列可冻结
这个"特定"如果不明确的告诉我哪个列 ,那么对于我来说和"任意"列没有区别

12 楼 fcw528 2008-10-16  
通用的做法应该是这样:自定义列表头之后, 列宽度可调整、列的位置不可以移动, 特定列可冻结
11 楼 fins 2008-10-16  
这个有技术难度哦
因为自定义表头 开发者是怎么自定义的 很难分析出来
可以很简单 可以很复杂 分析出来了 在处理时也比较郁闷
因为那些 colspan  rowspan 之类的一旦指定 整个表格的 colIndex rowIndex 很难判断.

另外 有些自定义表头根本就 无法进行锁定处理 也无法进行列位置调整的处理
如果你感兴趣  我可以给你截图上来

总之 : 自定义的多样性 和 不可预知性 导致 对自定义表头进行处理非常的麻烦.

如果要对于自定义表头实现上述功能 必须要根据自定义表头的内容和布局 做特殊的判断.
无法做成一个公共的模块.
这个 也许属于 定制 列表的范畴了

如果你需要 你可以把你要定制的表头的 样子和布局 以及约束发给我 我帮你定制.

约束很重要 因为不可能任意列的位置都可以调换的 例如: 基本信息下的 性别 姓名, 不可能调整到 成绩信息下面.

当然 如我之前所言 定制是不免费的哦 呵呵


10 楼 fcw528 2008-10-15  
“自定义列表头之后, 列的位置移动, 列冻结, 列隐藏功能将不再好用”,这个不知什么时候能够修复,特别是自定义表头和列冻结、列位置移动经常会一起使用。感谢fins的辛勤付出,无私奉献
9 楼 dar521lin 2008-09-22  
恩 不错嘛 好东西
8 楼 fins 2008-08-19  
自定义表头 不能与 锁定列功能一起使用
7 楼 liliang205 2008-08-19  
功能很强大。我想请问一下

自定义表头,锁定列之后,为什么会把列名去掉了。请问这是个怎么回事?
6 楼 fins 2008-08-14  
不支持导出
但是提供一个扩展 可以用来实现导出(不过具体生成文件的代码要大家自己写)
5 楼 hdhhb1979 2008-08-14  
grid现在支持导出功能吗?
4 楼 fins 2008-08-07  
测试了 但是用的是 9.5
你的版本是???
3 楼 kevin_gzhz 2008-08-07  
LZ:
  你有在Opera浏览器里测试通过吗?怎么用这个不行啊!
2 楼 fins 2008-08-05  
支持这个接口的
但是这种对于 列表的扩展数据 高级教程 不属于基础教程
所以教程近期不会推出

1 楼 kevin_gzhz 2008-08-05  
LZ:
  grid里的新增操作怎么都是在当前列表里新起一行啊,对于字段很多的情况下,列表里一般都是显示部分重要的字段,而新增都在一个新的页面中进行,建议是否能提供一些扩展来自行选择新增的方式啦?

相关推荐

    GT-Grid 1.0 基础教程

    本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...

    GT-Grid 1.0 基础教程(一)转载

    ### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...

    gt-grid的一个例子

    在这个“gt-grid的一个例子”中,我们将深入探讨如何使用`gt-grid`的基本功能,并通过实际代码示例来理解其工作原理。 首先,`gt-grid` 提供了灵活的数据绑定机制,可以方便地将后台数据源与前端表格进行对接。在...

    gt-grid 基础教程

    **gt-grid基础教程** 在网页开发中,数据的展示往往是不可或缺的部分,特别是在处理大量结构化信息时。`gt-grid`是一款由"胖哥"开发的高效、功能丰富的表格组件,专为页面展示设计,旨在帮助开发者更便捷地构建数据...

    GT-Grid 教程示例

    GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例

    gt-grid demo 源码下载

    《GT-Grid 源码解析与后台交互实践》 GT-Grid 是一款功能强大的数据网格组件,广泛应用于Web应用中展示和管理大量结构化数据。本次我们将通过"gt_grid_demo"源码下载来深入理解GT-Grid的运作机制及其与后台数据交互...

    gt-grid 表格源码,开发包,api手册

    "gt-grid 表格源码,开发包,api手册"这一资源主要涵盖了用于构建数据表格的前端组件的源代码、开发工具以及相关的API文档。gt-grid是一个强大的数据展示和操作框架,它允许开发者以灵活的方式展示和管理大量结构化...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    在例子中,我们可以看到三种不同场景的应用,这些例子可能展示了GT-Grid和EXT-Grid在处理基础数据展示、高级功能集成以及自定义程度上的差异。例如,可能有一个例子专门对比两者的数据加载速度,另一个可能比较各自...

    GT-grid 例子

    GT-Grid 是一款强大的数据网格组件,常用于前端开发中展示和操作大量结构化数据。在Web应用中,它提供了一种高效的方式来呈现表格数据,支持排序、筛选、分页、编辑等多种功能,大大提升了用户体验。这个压缩包文件...

    GT-Grid 是一个基于Ajax技术的列表组件

    GT-Grid 是一个基于Ajax技术的列表组件. 拥有丰富的功能以及良好易用性和用户体验. 它是 EC Side列表组件 的更新换代产品. (ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jsp...

    gt-grid.rar+demo

    "gt-grid.rar+demo"这个压缩包文件包含的是关于"gt-grid"的样例源码。"gt-grid"是一个常见的前端数据展示控件,通常用于创建高性能、可定制的表格,它在Web应用中广泛使用,特别是在大数据量的场景下。下面我们将...

    最新版GT-grid-好用的表格组件

    10. **文档与示例**:为了方便开发者快速上手,GT-grid提供了详尽的文档和丰富的示例代码,从基础用法到高级功能,都有清晰的指导。 在最新的版本中,GT-grid不仅在功能上进行了增强,而且在用户体验和性能优化上也...

    gt-grid 分页 用ajax 开发的 里面有例子

    在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...

    网页Grid组件 GT-Grid组件

    网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...

    GT-GRID插件下载

    GT-GRID是一款基于jQuery的强大的数据网格插件,主要用于展示和操作大量结构化的数据。它在Web应用中常被用于创建功能丰富的表格,提供类似数据库的分页、排序、过滤和编辑功能,使得用户可以方便地浏览和管理数据。...

    Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_

    标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...

    GT-Grid 1.36 版 前后台结合示例

    NULL 博文链接:https://fins.iteye.com/blog/283672

    Ag-Grid Demo2.7z

    3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...

    GT-Grid 列表组件[1]

    列表组件N0.1(国产) 用过之后你才知道优化 初学者提供问题解答哈 qq 406235245

    前端开源库-ag-grid-community

    - **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...

Global site tag (gtag.js) - Google Analytics