[发布]GT-Grid 1.36 版 ★& "前后台结合示例"★2008-12-01 12AM 更新

(最后更新时间 :12月1日 中午12点时, 修正了 1.36的一个严重bug
实在抱歉啊   )

这个版本应该是 2008年的倒数第二个版本,08年的最后一个版本应该是对该版本的一个修正版.

要感谢的人太多,但是大恩不言谢,所以感激的话我就不多说了,只说一句:
谢谢那些支持我的朋友, 是你们让我坚持下去.

只要你们还需要gt-grid, 那么它就不会死.

由于各种原因 小胖儿 最近一个月几乎没有访问过qq.群 对不起群里的朋友了.
有问题大家还是到je里提吧.

ok, 下面言归正传 :
============================
这个版本带有 与java后台结合的示例.
单独的最新版本的 GT-Grid 在

引用

gtdemo\WebContent\gt-grid

下.

============================
新版本的变更:

功能:
过滤/未过滤标识  (过滤时 过滤图标有颜色, 未过滤为灰色. 目前只标识出是否过滤 未标识出具体列)
通过shift 选中连续行

属性:
grid config/property :{
  reloadAfterSave  : true , //  如果保存后,不希望重新载入数据, 请将此属性设置为 false, 默认为true
  readOnly : false ,        // 如果不希望列表被编辑, 请设置此属性为 true , 默认为false
  customRowAttribute : function(record,rn,grid)  // 设置行的 tr对象的属性, 返回值为字符串. 见 demo.html中的示例. 可用来实现行渲染.
}


方法:
grid.getColumn(colNoId) // 通过列序号 或 id 取得列对象
columnObj.setHeader('列头新标题')  // 设置列的列头标题.


事件:
grid.afterSave(respD,isSuccess,grid). // save操作之后执行,  参数1 为save后 服务端返回的数据, 参数2为保存是否成功, 参数3为列表对象.

bug:
编辑记录时 定位错误(窜行问题) (ok)
编辑时,按Tab键 自动编辑下一个单元格 时有错误 (ok)
列表初始无数据时 ,按回车 报js错(ok)

其他:
新的点击事件命名规则:  on+ Cell/Row + Click/DblClick.(ok)
重构 "单击/双击/右击 + 单元格/行" 相关处理 (ok)

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

关于GT的更多介绍可以参加下面地址:
列表组件 GT-Grid 最新版本 & 教程

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

如果只对 gt-grid 感兴趣
那么您只需关注 包中gtdemo\WebContent\gt-grid 下的内容
另外 大家注意一下 里面的这个文件 api_document.txt

虽然还很粗糙 但是 比以前已经完善了很多 ,已经可以作为一个简单的参考了

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

这个例子 主要演示了 gt-grid与后台结合的方法.
请大家重点看action 里是如何从客户端取数据 以及如何向客户端送数据的

而其他地方 例如action如何实现的 , dao层是如何实现的 等等不是大家要看的重点.

dao层只要能返回一个 数据集合 并且这个集合能够转换成json字符串
那么dao层怎么实现 完全按你自己的意愿来.

这个示例中提供了一个 GridServerHandler的工具类, 建议看看这个类的实现方法
这样能更好的理解 gt-grid和后台交互的方式以及原理.

整个示例的后台代码 我没有使用任何第三方框架 所以难免粗糙 还请大家海涵.

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

运行步骤
1 部署后, 运行 startdb.bat 启动数据库
* h2manager.bat是一个h2db提供的数据库管理程序.

2 启动web应用
3 在浏览器里输入 http://127.0.0.1:8080/gtdemo/index.do
(地址根据实际情况而定),进入"示例列表"页面

4 目前"示例列表"中有三个示例.
您可以点击您感兴趣的进行查看和研究.

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


注意: 附件并不是一个直接部署的war包 而是一个eclipse项目

不过我相信有经验的朋友可以很轻易的就部署成功

评论

46 楼 itlieying 2008-12-13  

<div id="divf301">
<div id="grid1_containerf301"
style="overflow-x:hidden;overflow-y:auto;height:300px;margin:10px 5px">
</div>
</div>

var dialogEditor = function(){
var myd = new GT.DialogEditor({
                id: "sqlEditor",
                gridId : "grid1" ,
                width : 320,
                height : 200,
                title : 'SQL条件编辑器' ,
                body : ['<textarea id="sql_input" rows="8" cols="20"   style="width:99%"></textarea><br/>',
'<input type="button" value="确定" onclick="GT.$grid(\'grid1\').activeDialog.confirm()"/>'].join(''),
                getValue : function(){
return GT.$("sql_input").value;},
               setValue : function(value){
                  GT.$("sql_input").value = value;},
                active : function(){
                         GT.U.focus(GT.$("sql_input"));
                         }});
              return myd;
              };



var gridConfig={
id : "grid1",
loadURL : "..." ,
saveURL : "..." ,
remotePaging : true,
columns : [{...},{...}],
                  container : 'grid1_containerf301',
toolbarPosition : 'bottom',
height : '300',
allowFreeze : true,
toolbarContent : 'nav | goto | pagesize | reload | save | info | state' ,
pageSize : 10 ,
pageSizeList : [10,20,30,40]   
};
var mygrid=new GT.Grid( gridConfig );
GT.Utils.onLoad( GT.Grid.render(mygrid) );


此版本的是GTgrid奥运版本，拜托胖哥看一下

45 楼 fins 2008-12-13  

itlieying 写道

胖哥: &nbsp;&nbsp; 最近发现,Gt-grid中弹出的编辑框的一个问题,在IE6下,当点击某可编辑列时,弹出的编辑空为空,无论编辑列里之前有没有值,都为空.确定编辑空,之前的值将被删除. 而在Firefox 下就正常.请问是什么原因,怎么解决?

你这个场景在 我自带的demo中也有吗?
如果是你自己写的弹出的编辑框  那么可不可以发一下代码

44 楼 itlieying 2008-12-13  

胖哥:
   最近发现,Gt-grid中弹出的编辑框的一个问题,在IE6下,当点击某可编辑列时,弹出的编辑空为空,无论编辑列里之前有没有值,都为空.确定编辑空,之前的值将被删除. 而在Firefox 下就正常.请问是什么原因,怎么解决?

43 楼 fins 2008-12-12  

ShingU 写道

fins 写道
ShingU : dhtmlX 研究过的 一直也是我学习的榜样 (不过其代码实现远远没有ext好) 另外你说的外观问题 我也在思考 你说 如果完全和ext一样会不会更好看? 你觉得哪个列表好看? 给个地址 我去学习 呵呵 ext和dhtmlxgrid都好，当然ext更优一点。您那个界面为什么标题行那里有那么一竖？显得难看一点。 当鼠标移到行上，为什么是下面有一条红线，而不是改变当前行的颜色？我觉得那样更美观一点。 另外，hdAlign是不是设置标题行中内容是否居中？我设为hdAlign:'center'，怎么还是居左的啊？我想应该默认居中，因为大多数人还是喜欢居中的吧？

hdAlign 改名为  headAlign 了

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

那个竖线 是用来调整列宽的标识 不能调整列宽的列没有竖线 竖线类似很多软件工具栏里的那个调整大小的调整条.

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



关于列表头居中还是居左 其实主要取决于 列表的列宽度是否可调整

对于可调整的列 居中不是一个好的做法  会导致列表的表头乱串 你可以自己去体会体会
(这个不是我这么设置的 这个是前人总结出来的)

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

那个红线 ... 囧 ... 以前是改变背景色的 后来被批评了 所以才改成红线的.

批评我的人给出的理由是:
列表上边有太多种行的颜色 让人看起来困惑:

奇偶行交交替 2种颜色
选中的行  1种颜色
删除的行 1种颜色
新增的行 1种颜色
鼠标悬停行 1种样色

一个列表里 有6种 不同背景色的行 看起来太混乱了.

42 楼 ShingU 2008-12-12  

fins 写道

ShingU : dhtmlX 研究过的 一直也是我学习的榜样 (不过其代码实现远远没有ext好) 另外你说的外观问题 我也在思考 你说 如果完全和ext一样会不会更好看? 你觉得哪个列表好看? 给个地址 我去学习 呵呵

ext和dhtmlxgrid都好，当然ext更优一点。您那个界面为什么标题行那里有那么一竖？显得难看一点。

当鼠标移到行上，为什么是下面有一条红线，而不是改变当前行的颜色？我觉得那样更美观一点。

另外，hdAlign是不是设置标题行中内容是否居中？我设为hdAlign:'center'，怎么还是居左的啊？我想应该默认居中，因为大多数人还是喜欢居中的吧？

41 楼 fins 2008-12-12  

ShingU :

dhtmlX 研究过的 一直也是我学习的榜样 (不过其代码实现远远没有ext好)

另外你说的外观问题 我也在思考
你说 如果完全和ext一样会不会更好看?
你觉得哪个列表好看? 给个地址 我去学习 呵呵

40 楼 ShingU 2008-12-12  

http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

39 楼 ShingU 2008-12-12  

fins 写道

ShingU 写道
fins,我怎么看来看去GT-Grid跟ExtJS Grid那么像啊？简直是在模仿它啊。 能介绍一下GT-Grid跟ExtJS Grid的不同，以及有什么优点嘛？ gt-grid 确实从ext-grid学习到了很多思想和技巧 这个是毋庸置疑的, 可以说,没有ext-rid就没有gt. gt在很多地方都比ext-grid差, 当然也有些地方比ext-grid好 ,例如性能 ,易用性, 体系架构更简约, 还有一些功能是ext不具备的. gt-grid 和 ext-grid 只能说各有所长, 各有各的应用场景吧. 必须承认 gt目前确实还有很多不足 09年 打算大刀阔斧的重构. 谢谢你的关注

不知道您知道dhtmlX Grid嘛？我觉得这个也很不错！您可以去看看，学习它是怎么做的。

另外，我对外观比较重试，老实说，你的表格显示有点丑陋，拿不出手啊。

38 楼 fins 2008-12-12  

ShingU 写道

fins,我怎么看来看去GT-Grid跟ExtJS Grid那么像啊？简直是在模仿它啊。 能介绍一下GT-Grid跟ExtJS Grid的不同，以及有什么优点嘛？

gt-grid 确实从ext-grid学习到了很多思想和技巧 这个是毋庸置疑的, 可以说,没有ext-rid就没有gt.

gt在很多地方都比ext-grid差,
当然也有些地方比ext-grid好 ,例如性能 ,易用性, 体系架构更简约,
还有一些功能是ext不具备的.

gt-grid 和 ext-grid 只能说各有所长, 各有各的应用场景吧.

必须承认 gt目前确实还有很多不足 09年 打算大刀阔斧的重构.

谢谢你的关注

37 楼 ShingU 2008-12-12  

fins,我怎么看来看去GT-Grid跟ExtJS Grid那么像啊？简直是在模仿它啊。

能介绍一下GT-Grid跟ExtJS Grid的不同，以及有什么优点嘛？

36 楼 ShingU 2008-12-11  

尝试了一下，发现从服务器端获取数据的时候，表格可以正常显示，就是里面的数据没有显示。

35 楼 ShingU 2008-12-11  

说说我现在是怎么做的。

我用的是JSP，写了一个JavaBean，其中是数据库连接，执行查询语句，输出数据等功能。输出数据，我用的是打印字符串的办法，就是结果会是<tabe><tr><td>...</td></tr></table>这样的形式。这样我只要在网页中输出这个字符串就可以显示一个表格了。然后表格的样式通过外接的CSS文件来控制。

是不是很笨的办法？

34 楼 ShingU 2008-12-11  

我用过ExtJS，当初用的时候有点一见钟情的感觉。但是相处一段时间，才发现彼此并不合适。虽然我做的内容非常简单，但是我喜欢都是由我来控制的。而我发现用了ExtJS之后，我好像被它控制了，这个我不喜欢，于是不用了。

dhtmlX Grid，我用的是试用版，其实试用版的功能我用用也差不多了。但是我发现了一个致命的地方，就是在IE6中使用不正常。因为我用的是IE7，但我在IE7中调试正常之后，发现在IE6中竟然显示不了。而且显示数据的表格在浏览器窗口大小发生变化的时候竟然会消失！

另外有一个缺点，两者都存在，就是不能复制表格中的内容。

上述两者还是存在很多我所喜欢的优点。比如将表格固定在一个空间中，当数据超过空间大小时，就会出现滚动条。样式也比较美观，基本上不用自己去设置就有斑马线。

33 楼 ShingU 2008-12-11  

觉得这个控件不错，决定在自己的小站中采用这个控件了。

以前尝试用过ExtJS,dhtmlX Grid等，但是都不是很满意，目前使用的是最普通的table。

我的情况是表格的数据是从数据库中取出来的，要求：一、显示稍微美观一点，这个是重点，因为我的数据表中的列比较多，而且某些列的内容也比较多，一般使用table的话，显示起来比较难看，不是太宽了，就是被压扁了；二、能复制表格中的数据内容，有些控件不能复制。三、不要求能编辑数据，因为我只要显示就可以了。

-- ShingU

32 楼 fins 2008-12-11  

xieguyue 写道

小胖，我的问题还没找到解决办法，我是通过mygrid.checkedRows 取checkbox的值，但是取出来的值却不对，想了很久不知道怎么解决，希望能指点一下，谢谢！

怎么不对了?

是取的值 串行 了 还是串列了? 还是其他?

31 楼 xieguyue 2008-12-10  

小胖，我的问题还没找到解决办法，我是通过mygrid.checkedRows 取checkbox的值，但是取出来的值却不对，想了很久不知道怎么解决，希望能指点一下，谢谢！

30 楼 fins 2008-12-09  

存在此bug 这个bug存在好久了

事实上 冻结列 和 很多功能都不能同时使用

目前冻结列的实现机制 也只能如此 还没有找到更好的解决办法

29 楼 wfl8015 2008-12-09  

当存在冻结列，也存在check选择列时(全选选择框)，当第一次用checkbox选择所有行时，是可以工作的，当滚动到下一页或其它页时，再用checkbox选择所有行时，就不正常工作了。请胖哥看是否有此bug。

28 楼 xiaohui6636 2008-12-08  

fins 写道

xiaohui6636 写道
fins: 今天遇到个问题...我的grid里面的每一行上都有一个(50*50)大小的图片单元格... 但图片不能全部显示出来...我查了一些文档...并在群里讨论...最终还是未能解决... 希望fins能给点提示... 这个需要你修改一下样式表 将行的高度该大 (图片我看不到 百度的图片不许外链吧)

OK了...呵呵...改了几个样式...
<style type="text/css">
.gt-table tr{
height:52px;
}
.gt-row td {
vertical-align: middle;
}
.gt-table .gt-inner {
overflow: visible;
}
</style>

27 楼 fins 2008-12-08  

xiaohui6636 写道

fins: 今天遇到个问题...我的grid里面的每一行上都有一个(50*50)大小的图片单元格... 但图片不能全部显示出来...我查了一些文档...并在群里讨论...最终还是未能解决... 希望fins能给点提示...

这个需要你修改一下样式表 将行的高度该大
(图片我看不到 百度的图片不许外链吧)