[发布]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项目

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

评论

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

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

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 改名为&nbsp; headAlign 了 ================= 那个竖线 是用来调整列宽的标识 不能调整列宽的列没有竖线 竖线类似很多软件工具栏里的那个调整大小的调整条. ================= 关于列表头居中还是居左 其实主要取决于 列表的列宽度是否可调整 对于可调整的列 居中不是一个好的做法&nbsp; 会导致列表的表头乱串 你可以自己去体会体会 (这个不是我这么设置的 这个是前人总结出来的) ================= 那个红线 ... 囧 ... 以前是改变背景色的 后来被批评了 所以才改成红线的. 批评我的人给出的理由是: 列表上边有太多种行的颜色 让人看起来困惑: 奇偶行交交替 2种颜色 选中的行&nbsp; 1种颜色 删除的行 1种颜色 新增的行 1种颜色 鼠标悬停行 1种样色 一个列表里 有6种 不同背景色的行 看起来太混乱了.

谢谢fins的回复！

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

47 楼 itlieying 2008-12-13  

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