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

fins

浏览: 2585775 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

GT-Grid

EXT SQL Firefox 单元测试数据结构

(最后更新时间 :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项目

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

dist_b20081201_fixed_1.zip (2.4 MB)
下载次数: 2790

39
顶

7
踩

分享到：

纠结于ajax开发中 response的contentType ... | 小胖儿闲聊 ExtJs的相关书籍. (更新)

2008-12-01 01:27
浏览 10332
评论(66)
分类:Web前端
查看更多

66 楼 Snow_Young 2009-01-31

哈哈～GTG已经越来越强了啊！

65 楼 fins 2009-01-11

itlieying 写道

咨询一下fins, 在IE6下的12.1版本的Gt-grid弹出的编辑框一些问题，情况是这样子的，当点击grid表格中某一已存在的语句后，关闭弹出的编辑框，然后再点击同一单元格，再关闭弹出的编辑框，发现之前的记录被自动删除。这是怎么回事呢？

此bug 在我这里没有重现

64 楼 itlieying 2009-01-08

咨询一下fins,
在IE6下的12.1版本的Gt-grid弹出的编辑框一些问题，
情况是这样子的，当点击grid表格中某一已存在的语句后，关闭弹出的编辑框，然后再点击同一单元格，再关闭弹出的编辑框，发现之前的记录被自动删除。这是怎么回事呢？

63 楼 libinwalan 2009-01-07

支持小胖
不知道导出做得怎样了

62 楼 wfl8015 2009-01-06

http://www.sigmawidgets.com/　这个网站上的grid组件是你的。
但它好像把你的代码加上Sigma包了，
if(!window.Sigma){
window.Sigma={};
}
Sigma.Const=Sigma.Const||{};
SigmaConst=Sigma.Const;
Sigma.Const.Grid={COL_CLASS_PREFIX:"td.",DEFAULT_ECG_ID:"gt",SHADOW_ROW:"_shadowRow",HIDE_HEADER_ROW:"_hideListRow",COL_T_CLASSNAME:"gt-col-",SKIN_CLASSNAME_PREFIX:"gt-skin-",SCROLLBAR_WIDTH:18,MIN_COLWIDTH:40,AJAX_HEADER:["isAjaxRequest","true"]};
Sigma.Const.Key={BACKSPACE:8,TAB:9,ENTER:13,SHIFT:16,CTRL:17,PAUSE:19,CAPSLOCK:20,ESC:27,SPACE:33,PAGEUP:33,PAGEDOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40,INSERT:45,DELETE:46,WIN:91,WIN_R:92,MENU:93,F1:112,F2:113,F3:114,F4:115,F5:116,F6:117,F7:118,F8:119,F9:120,F10:121,F11:122,F12:123,NUMLOCK:144,SCROLLLOCK:145};
if(!window.Sigma){
window.Sigma={};
}
Sigma.loaded=false;
Sigma.init=function(_){
_=_||window;
Sigma.doc=document;
_.undefined=_.undefined;
var $=_.navigator.userAgent.toLowerCase();
Sigma.isIE=$.indexOf("msie")>-1;
Sigma.isIE7=$.indexOf("msie 7")>-1;
Sigma.isIE8=$.indexOf("msie 8")>-1;
Sigma.isIE9=$.indexOf("msie 9")>-1;
Sigma.isFF=$.indexOf("firefox")>-1;
Sigma.isFF1=$.indexOf("firefox/1")>-1;
Sigma.isFF2=$.indexOf("firefox/2")>-1;
Sigma.isFF3=$.indexOf("firefox/3")>-1;
Sigma.isOpera=$.indexOf("opera")>-1;
Sigma.isWebkit=(/webkit|khtml/).test($);
Sigma.isSafari=$.indexOf("safari")>-1||Sigma.isWebkit;
Sigma.isChrome=$.indexOf("chrome")>-1||Sigma.isWebkit;
Sigma.isGecko=Sigma.isMoz=!Sigma.isSafari&&$.indexOf("gecko")>-1;
Sigma.isStrict=Sigma.doc.compatMode=="CSS1Compat"||Sigma.isSafari;
Sigma.isBoxModel=Sigma.isIE&&!Sigma.isIE8&&!Sigma.isIE9&&!Sigma.isStrict;
Sigma.isNotStrictIE=Sigma.isBoxModel;
Sigma.isSecure=_.location.href.toLowerCase().indexOf("https")===0;
Sigma.isWindows=($.indexOf("windows")!=-1||$.indexOf("win32")!=-1);
Sigma.isMac=($.indexOf("macintosh")!=-1||$.indexOf("mac os x")!=-1);
..............
..............

Sigma.Chart=Sigma.$class({Ee1:function($){
    this.defaultColor="66BBFF";
    this.type="column2D";
    this.swfPath="./charts/";
    this.swf=Sigma.Chart.SWFMapping[this.type];
    this.width="100%";
    this.height="100%";
    this.data=null;
    this.container=null;
    this.chart=null;
    Sigma.$extend(this,$);
    this.swf=Sigma.Chart.SWFMapping[this.type]||this.swf;
    if(this.swfPath.lastIndexOf("/")==this.swfPath.length-1){
      this.swfPath=this.swfPath.substring(0,this.swfPath.length-1);
    }
    this.container=Sigma.$(this.container);
    this.chart=this.chart||new FusionCharts(this.swfPath+"/"+this.swf,this.container.id+"_chart",this.width,this.height);
},Gl7:function(_){
    if(_.isNull){
      if(_.name){
        _={name:_.name};
      }else {
        return "";
      }
    }else {
      if(_.color){
        _.color=_.color||this.defaultColor;
      }
    }
    var $=[];
    for(var A in _){
      $.push(A+"='"+_[A]+"'");
    }
    return ;
},Ya1:function(B){
    B=B||this.data;
    var D=[];
    for(var F=0;F<B.length;F++){
      var $=B[F],_,C,E,A;
      if($ instanceof Array){
        C=$[0];
        E=$[1];
        A=$[2];
        A=(E===null||E===undefined)?null:(A||this.defaultColor);
        C=(C===null||C===undefined)?E:C;
        str=[C!==null&&C!==undefined?"name='"+C+"'":"",E!==null&&E!==undefined?"value='"+E+"'":"",A!==null&&A!==undefined?"color='"+A+"'":""].join(" ");
      }else {
        if($){
          str=this.Gl7($);
        }
      }
      _=["<set",str,"/>"];
      _=_.join(" ");
      if(_=="<set />"||(E===null||E===undefined)){
      }
      D.push(_);
    }
    this.setsXML=D.join("");
    return this.setsXML;
},kx2:function(A,$){
    $=$||this.setsXML;
    var _=["<graph","caption='"+(this.caption||"")+"'","subCaption='"+(this.subCaption||"")+"'","outCnvBaseFontSize='12'","animation='0'"];
    _.push(">"+$+"</graph>");
    this.chartXML=_.join(" ");
    return this.chartXML;
},updateChart:function($,_){
    $=$||this.container;
    _=_||this.chartXML;
    updateChartXML($,_);
},op1:function($,_){
    this.data=_||this.data;
    this.Ya1();
    this.kx2();
    $=$||this.container;
    this.chart.setDataXML(this.chartXML);
    this.chart.render($);
}});
Sigma.Chart.SWFMapping={"column2D":"FCF_Column2D.swf","pie3D":"FCF_Pie3D.swf"};

61 楼 wfl8015 2009-01-06

胖哥，你的grid代码是不是挂到国外的服务器去卖了啊？我好像在这个网站看到了，http://www.sigmawidgets.com/　这个网站上的grid组件是你的。

60 楼 wfl8015 2008-12-30

fins:
今年的最后一个版本什么时候发布啊？时间不多了啊。

59 楼 itlieying 2008-12-29

页面代码:

<link rel="stylesheet" type="text/css" href="/pro/GTGrid/gt_grid.css" />
<script type="text/javascript" src="/pro/GTGrid/gt_msg_cn.js"></script>
<script type="text/javascript" src="/pro/GTGrid/gt_grid_all.js"></script>

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

<script type="text/javascript" >
var dialogEditor = function(){
var myd = new GT.DialogEditor({
id: "sqlEditor",
gridId : "grid1" ,
width : 320,
height : 200,
title : '查询条件编辑器' ,
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 : '/pro/data/dataLoad.do' ,
saveURL : '/pro/data/dataSave.do' ,
remotePaging : true,
columns : [{ id : 'no' , header : ' ',width : 99 , align : 'center', frozen : true },{ id : '01' , header : '男生总数(1班)' , width:99 ,align : 'center', editor: dialogEditor},{ id : '02' , header : '女生总数(1班)' , width:99 ,align : 'center', editor: dialogEditor},{ id : '03' , header : '总数(1班)' , width:99 ,align : 'center', editor: dialogEditor}] ,
container : 'grid1_containerf163',
toolbarPosition : 'bottom',
height : '300',
allowFreeze : true,
toolbarContent : 'nav | goto | pagesize | reload | save | info | state' ,
pageSize : 10

};

var mygrid=new GT.Grid( gridConfig );
GT.Utils.onLoad( GT.Grid.render(mygrid) );
</script>

58 楼 itlieying 2008-12-29

胖哥,请教你个问题,是关于Gtgrid显示问题的,我现在使用的grid是12.1号发布的版本.页面加载时调用的gtgrid用
var mygrid=new GT.Grid( gridConfig );
GT.Utils.onLoad( GT.Grid.render(mygrid) );
来调用,程序调试了一下,mygrid对象还可以创建,但当到了GT.Utils.onLoad(GT.Grid.render(mygrid));
GT-Grid调用不起来,页面没有报错,同时也显示不出gtgrid,参考了demo里头的例子,发现也是这样操作,但可以显示,想不出什么原因来,请问,这是什么回事?

57 楼 wfl8015 2008-12-22

选择冻结列中某个单元格数据时

fins 写道

wfl8015 写道
当存在冻结列时，想选择冻结列中某个单元格数据时，没有办法选择，一但选择上，立马被取消了，不知为什么吗，是不是选择事件被取消默认行为了。这个没看明白  

就是按住鼠标拖动，使数据高亮显示，然后单击复制。

56 楼 wsbjwjt 2008-12-19

fins 请亟待解决你的 handler ，对复杂对象的解析，项目中正在使用。
解析json 对bean的要求很高呀，补充写hashCode()不能解析？

55 楼 fins 2008-12-17

wfl8015 写道

当存在冻结列时，想选择冻结列中某个单元格数据时，没有办法选择，一但选择上，立马被取消了，不知为什么吗，是不是选择事件被取消默认行为了。

这个没看明白

54 楼 fins 2008-12-17

wfl8015 写道

fins 写道
存在此bug 这个bug存在好久了事实上冻结列和很多功能都不能同时使用目前冻结列的实现机制也只能如此还没有找到更好的解决办法胖哥，采用两个单独的表来实现冻结功能，而不是让一个覆盖另一个，这个好控制些，像dhtmlxGrid中的那样。

这个做法最开始的时候使用过
但是麻烦事情也很多主要体现在动态冻结列的时候有很多问题

53 楼 wfl8015 2008-12-16

52 楼 wfl8015 2008-12-16

fins 写道

存在此bug 这个bug存在好久了事实上冻结列和很多功能都不能同时使用目前冻结列的实现机制也只能如此还没有找到更好的解决办法

胖哥，采用两个单独的表来实现冻结功能，而不是让一个覆盖另一个，这个好控制些，像dhtmlxGrid中的那样。

51 楼 fins 2008-12-15


data:[
{'no':'01',
'sql':'select count(*) from t_student t where t.sex='1''}
]

请改为

data:[
{'no':'01',
'sql':"select count(*) from t_student t where t.sex='1'"}
]

注意双引号单引号嵌套问题

当然你也可以使用\ 将内部的引号转义.
(这个问题太...

)

50 楼 itlieying 2008-12-15

比如说从后台需要读出来的数据是某一些带有参数的SQL语句如:select count(*) from t_student t where t.sex='1'
希望能把此语句中的单引号也显示出来.从后台传过来的数据 data:[{'no':'01','sql':'select count(*) from t_student t where t.sex='1''}] 这样输出来的SQL语句在gtgrid上是显示不出来的.想问一下,有没有什么好办法显示出来?

49 楼 fins 2008-12-14

这个没明白什么意思? 你的数据是什么样子的??

itlieying 写道

我想从后台读出来的数据带有引号,这个应该要怎么处理?

这个没明白什么意思? 你的数据是什么样子的??

你的另一个问题:
是一个bug 建议你更新新版本看一看

48 楼 ShingU 2008-12-14

删除的行 1种颜色
新增的行 1种颜色
鼠标悬停行 1种样色

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

fins 写道

ShingU 写道
fins 写道 ShingU : dhtmlX 研究过的一直也是我学习的榜样 (不过其代码实现远远没有ext好) 另外你说的外观问题我也在思考你说如果完全和ext一样会不会更好看? 你觉得哪个列表好看? 给个地址我去学习呵呵 ext和dhtmlxgrid都好，当然ext更优一点。您那个界面为什么标题行那里有那么一竖？显得难看一点。当鼠标移到行上，为什么是下面有一条红线，而不是改变当前行的颜色？我觉得那样更美观一点。另外，hdAlign是不是设置标题行中内容是否居中？我设为hdAlign:'center'，怎么还是居左的啊？我想应该默认居中，因为大多数人还是喜欢居中的吧？ hdAlign 改名为  headAlign 了 ================= 那个竖线是用来调整列宽的标识不能调整列宽的列没有竖线竖线类似很多软件工具栏里的那个调整大小的调整条. ================= 关于列表头居中还是居左其实主要取决于列表的列宽度是否可调整对于可调整的列居中不是一个好的做法  会导致列表的表头乱串你可以自己去体会体会 (这个不是我这么设置的这个是前人总结出来的) ================= 那个红线 ... 囧 ... 以前是改变背景色的后来被批评了所以才改成红线的. 批评我的人给出的理由是: 列表上边有太多种行的颜色让人看起来困惑: 奇偶行交交替 2种颜色选中的行  1种颜色删除的行 1种颜色新增的行 1种颜色鼠标悬停行 1种样色一个列表里有6种不同背景色的行看起来太混乱了.

谢谢fins的回复！

1、原来hdAlign已经改成headAlign啊，不过你好像没提到过啊？:)
2、竖线，我昨天经过研究，发现还是可以去掉的。只要设置列的resizable为false即可。:)
3、看来不同的人有不同的看法，可能我属于少数人的。请教一下，能否在CSS文件中自定义一下？对应的是哪个class呢？

47 楼 itlieying 2008-12-13

我想从后台读出来的数据带有引号,这个应该要怎么处理?

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论