- 浏览: 2633668 次
- 性别:
- 来自: 小胖儿的大城
-
文章分类
最新评论
-
ni4wangba0:
ni4wangba0 写道亲测,算法有问题。对不起,其实是我自 ...
谈谈"求线段交点"的几种算法(js实现,完整版) -
ni4wangba0:
亲测,算法有问题。
谈谈"求线段交点"的几种算法(js实现,完整版) -
kers007:
苹果不让Webapp 在appstore 里发布,我不知道对 ...
苹果真的要在 AppStore 里封杀 WebApp 吗? -
striveandlive:
fins = js大牛
[原创]GT-Template, 一个超轻量级的js模板工具. -
AlwaysYang:
基础扎实的才能行走天下。
关于body的"大小"在ie和ff下的一些基础知识
GT-Grid 1.0 基础教程(二)
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第二章: 让"纯客户端只读列表"变得更强大一些吧
让我们继续来完善和加强上一章中做出的那个列表吧.
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo1.html"另存为"mydemo2.html".
OK,开始.
=========================================
1 扩展数据列
示例中的数据(学生的信息) , 由6列构成 : 学号 , 姓名 , 年龄 , 性别, 英语成绩, 数学成绩.
这是我们能拿到的原始信息.
但是有时候,我们往往需要在页面中扩展出新的信息, 这些信息并不在原始信息内.
例如 我希望列表中包含 "总成绩"一列. 这时候,"总成绩"对应的数据就必须在页面内生成.
我们将这种并不存在于原始数据中,但是希望扩充到原始数据中的列叫做"扩展数据列".
在GT-Grid中, 利用数据集列 (dataset的field) 的initValue方法就可以实现.
按下面的方式修改代码.
initValue 属性指向一个函数, 该函数的返回值, 就为record的该列数据.
上例中, 会创建一个叫total的"扩展列" , 它会使每一条record的 total 属性值为 1.即 :
record['total']=1;
然后,我们就可以在 columns的定义中加入一个column,让其显示 total列 (此时total就和普通的数据列是一样的).
运行看一下效果, 你会发现,列表变成了7列, 所有记录的第7列"总成绩"值都为1.
为1 肯定不是我们想要的结果, 我们需要的是 计算 英语成绩与数学成绩的总和.
我们来改造一下 initValue 函数. initValue 函数的第一个参数为"对数据集进行迭代时的,当前record".
那么我们只要从record中取出 english 和 math成绩 相加即可.
另外, 现在列多了, 看起来不方便, 我们可以通过调整列宽来 美化外观. 通过给各个column设置"width"属性来实现.
目前版本的 GT-Grid的列宽只支持整数(单位:像素) 不支持百分比.
我们将7列的宽度 依次调整为 : 50 , 100 ,50, 50 ,60 ,60 ,70 .
这时候也许大家会发现, 分数相关的列都是内容左对齐, 这个似乎不符合国际关联, 通常数字都是右对齐的.
那么我们也改一下吧. 很简单, 通过给column设置"align"属性来实现.
align : 水平方向上 内容的对齐方式, 可选值: left(默认) center right.
运行一下看看结果吧
.
=========================================
2 扩展显示列
除了前面提到的"扩展数据列" ,还有一种扩展列, 它和"数据"本身关系不大,他更主要的作用是用来显示一些数据以外的东西.
举个例子. 我们肯定常常简单这样的列表:
前面使一些数据,最后一个单元格里有一个按钮或者是图片 或者是链接, 点击后可以执行一些特殊的操作.
那么这时候, 这最后一列就不能叫做 扩展数据列了, 它更多的职责时"显示", 它通常不会参与到 排序 统计 运算 等数据操作中.
这样的扩展列, 我们叫做"扩展显示列".
在GT-Grid中, 利用column 的 renderer 方法就可以实现.
对示例中的 column定义做如下修改 :
我们加入了一列"详细信息".
column.renderer 函数的返回值 是一个合法的html字符串. 这个返回值将显示在表格的相应单元格内.
renderer 函数的 6个参数依次为
此例中,暂时我们只需要一个record就可以了. 我们根据record信息,拼装出了一个链接.(当然在这个演示中链接的地址是无效的)
再次运行吧.
=========================================
其实 很多 扩展数据列的功能 ,通过扩展显示列 也可以实现.
例如关于 total 列的 , 我们也可以只在columns中扩展显示列, 直接使用:
renderer : function(...) { return 数学+英语 ; }
那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.
(GT-Grid 考虑的真是周全啊 哈哈哈)
=========================================
3 个性化渲染列
之前的例子中, 所有数据在显示的时候都是"中规中矩". 这样有时候是无法满足我们的需求的 , 有时候我们也许希望列表显示的更加丰富一些.
例如: 在成绩一列, 我们希望总成绩大于170分的 用红颜色标识出来(因为这是一个很不错的成绩), 而120分以下的用蓝色标识出来(成绩很差).
这个需求怎么实现呢? 我想从上面加连接的例子 里大家应该能够悟出来 ,是的 没错, 继续使用 renderer .
大家直接看代码, 应该很容易就明白怎样做 以及为什么这样做.
对本小节做个简单概括: 我们利用renderer返回html的特性, 利用html代码对原始数据进行包装,便可以实现显示效果的自定(个性化渲染列).
=========================================
4 数据值 与 显示值的映射
本例中, 大家看到了, 性别一列一值 显示的时M/F, 这并不是我们希望看到的.
有了前两节的基础, 我想大家都可以 利用 renderer 方法轻易的实现 将M/F变成男/女.
在这小节我要告诉大家的是, 这种简单的映射, GT-Grid提供了一个工具函数, 可以帮助大家更简单的完成这个工作.
GT.Grid.mappingRenderer函数有两个参数:
第一个是用来做映射的json-object, 第二个是数据不满足映射关系时 希望返回的值.
用来做映射的json-object就相当于一个可 key-value的hashmap, key就是列对应的数据的值, value就是希望映射成的值.
这个还是很好理解的.
当数据的值不在 这个关于性别的 映射关系中时, 将返回 '未知'.
=========================================
这一章讲解了 对列的扩展和显示效果的自定义, 只要你合理的利用 initValue 以及 renderer ,绝对可以创造出丰富多彩的列表.
好了 ,第二章到此结束了. 已经很晚了, 明天再写吧. 下一章再见
.
=========================================
最后的成果图:
问个问题,grid 的columns 表头上面加 个按钮 怎么做呢? 比如 表头 “性别”为一个按钮 点击有触发事件,或者不做成按钮,点击“性别”就有触发事件
column 有 hdRenderer 方法
在这个方法里 返回一段 html代码就可以了
hdRenderer 方法 下一版将改名叫 headRenderer
var data1 = [ { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , chinese : 50, math :92 ,physic: 100}, { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , chinese : 50, math :87 ,physic: 100}, { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 ,chinese : 50, math :62 ,physic: 100} ]; var dsConfig= { data : data1 , fields :[ {name : 'no' , type: 'int' }, {name : 'name' }, {name : 'age' , type: 'int' }, {name : 'gender' }, {name : 'english', type: 'float' }, {name : 'Chinese', type: 'float' }, {name : 'total1' , type: 'float', initValue : function(record){return record['english']+record['chinese'];}}, {name : 'math' , type: 'float' }, {name : 'physic', type: 'float' }, {name : 'total2' , type: 'float', initValue : function(record){return record['math']+record['physic'];}} ] }; var colsConfig = [ { id : 'no' , header : "学好" ,width : 50}, { id : 'name' , header : "你好" ,width:100}, { id : 'age' , header : "年龄" ,width:50}, { id : 'gender' , header : "性别" ,width:50, renderer : GT.Grid.mappingRenderer( { 'M':'男', 'F':'女'} , '未知' ) }, { id : 'english' , header : "英语" ,width:60}, { id : 'Chinese' , header : "语文" ,width:60}, { id : 'total1' , header : "文科总成绩" ,width:70 } { id : 'math' , header : "数学" ,width:60, align :'right'}, { id : 'physic' , header : "物理" ,width:60, align :'right'}, { id : 'total2' , header : "理科总成绩" ,width:70 } } ]; 提示找不到'total1'和'total2'列,请问fins,这个怎么解决?
这个是什么原因??
教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里
第二章: 让"纯客户端只读列表"变得更强大一些吧
让我们继续来完善和加强上一章中做出的那个列表吧.
在开始之前,为了保留我们之前的成果,不至于学习的过程中把前一个成果弄坏, 我们将"mydemo1.html"另存为"mydemo2.html".
OK,开始.
=========================================
1 扩展数据列
示例中的数据(学生的信息) , 由6列构成 : 学号 , 姓名 , 年龄 , 性别, 英语成绩, 数学成绩.
这是我们能拿到的原始信息.
但是有时候,我们往往需要在页面中扩展出新的信息, 这些信息并不在原始信息内.
例如 我希望列表中包含 "总成绩"一列. 这时候,"总成绩"对应的数据就必须在页面内生成.
我们将这种并不存在于原始数据中,但是希望扩充到原始数据中的列叫做"扩展数据列".
在GT-Grid中, 利用数据集列 (dataset的field) 的initValue方法就可以实现.
按下面的方式修改代码.
var dsConfig= { data : data1 , fields :[ /* ...其他field略 ... */ {name : 'total' , type: 'float', initValue : function(record){ return 1; } } ] };
initValue 属性指向一个函数, 该函数的返回值, 就为record的该列数据.
上例中, 会创建一个叫total的"扩展列" , 它会使每一条record的 total 属性值为 1.即 :
record['total']=1;
然后,我们就可以在 columns的定义中加入一个column,让其显示 total列 (此时total就和普通的数据列是一样的).
var colsConfig = [ /* ...其他column略 ... */ { id : 'total' , header : "总成绩" } ];
运行看一下效果, 你会发现,列表变成了7列, 所有记录的第7列"总成绩"值都为1.
为1 肯定不是我们想要的结果, 我们需要的是 计算 英语成绩与数学成绩的总和.
我们来改造一下 initValue 函数. initValue 函数的第一个参数为"对数据集进行迭代时的,当前record".
那么我们只要从record中取出 english 和 math成绩 相加即可.
{ name : 'total' , type: 'float', initValue : function(record){ return record['english'] + record['math']; } }
另外, 现在列多了, 看起来不方便, 我们可以通过调整列宽来 美化外观. 通过给各个column设置"width"属性来实现.
目前版本的 GT-Grid的列宽只支持整数(单位:像素) 不支持百分比.
我们将7列的宽度 依次调整为 : 50 , 100 ,50, 50 ,60 ,60 ,70 .
这时候也许大家会发现, 分数相关的列都是内容左对齐, 这个似乎不符合国际关联, 通常数字都是右对齐的.
那么我们也改一下吧. 很简单, 通过给column设置"align"属性来实现.
align : 水平方向上 内容的对齐方式, 可选值: left(默认) center right.
var colsConfig = [ /* ...其他column略 ... */ { id : 'english' , header : "英语" , width : 60 , align :'right'} ]
运行一下看看结果吧

=========================================
2 扩展显示列
除了前面提到的"扩展数据列" ,还有一种扩展列, 它和"数据"本身关系不大,他更主要的作用是用来显示一些数据以外的东西.
举个例子. 我们肯定常常简单这样的列表:
前面使一些数据,最后一个单元格里有一个按钮或者是图片 或者是链接, 点击后可以执行一些特殊的操作.
那么这时候, 这最后一列就不能叫做 扩展数据列了, 它更多的职责时"显示", 它通常不会参与到 排序 统计 运算 等数据操作中.
这样的扩展列, 我们叫做"扩展显示列".
在GT-Grid中, 利用column 的 renderer 方法就可以实现.
对示例中的 column定义做如下修改 :
var colsConfig = [ /* ...其他column略 ... */ { id : 'detail' , header : "详细信息" , width : 120, renderer : function(value ,record,columnObj,grid,colNo,rowNo){ return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>'; } } ];
我们加入了一列"详细信息".
column.renderer 函数的返回值 是一个合法的html字符串. 这个返回值将显示在表格的相应单元格内.
renderer 函数的 6个参数依次为
value : 相应单元格对应的数据值 (本例中为null, 因为数据集中 根本就没有detail列) record : 迭代中当前的record columnObj : 当前的column对象, grid : 当前的grid对象. colNo : 当前的列号 rowNo : 迭代中当前的行号
此例中,暂时我们只需要一个record就可以了. 我们根据record信息,拼装出了一个链接.(当然在这个演示中链接的地址是无效的)
再次运行吧.
=========================================
其实 很多 扩展数据列的功能 ,通过扩展显示列 也可以实现.
例如关于 total 列的 , 我们也可以只在columns中扩展显示列, 直接使用:
renderer : function(...) { return 数学+英语 ; }
那么该如何选择呢?? 一个简单的原则如下:
如果你扩展的列 只是用来显示给用户看 , 而不会参与到 编辑 排序 统计 运算 等数据操作中,
那么使用扩展显示列就可以, 否则就应该使用扩展数据列.
(GT-Grid 考虑的真是周全啊 哈哈哈)
=========================================
3 个性化渲染列
之前的例子中, 所有数据在显示的时候都是"中规中矩". 这样有时候是无法满足我们的需求的 , 有时候我们也许希望列表显示的更加丰富一些.
例如: 在成绩一列, 我们希望总成绩大于170分的 用红颜色标识出来(因为这是一个很不错的成绩), 而120分以下的用蓝色标识出来(成绩很差).
这个需求怎么实现呢? 我想从上面加连接的例子 里大家应该能够悟出来 ,是的 没错, 继续使用 renderer .
大家直接看代码, 应该很容易就明白怎样做 以及为什么这样做.
var colsConfig = [ /* ...其他column略 ... */ { id : 'total' , header : "总成绩" , width : 70 , align :'right', renderer : function(value ,record,columnObj,grid,colNo,rowNo){ var total = record['total']; if (total>170) { total = '<span style="color:red" >'+ total +'</span>'; }else if (total<120) { total = '<span style="color:blue" >'+ total +'</span>'; } return total; } } ];
对本小节做个简单概括: 我们利用renderer返回html的特性, 利用html代码对原始数据进行包装,便可以实现显示效果的自定(个性化渲染列).
=========================================
4 数据值 与 显示值的映射
本例中, 大家看到了, 性别一列一值 显示的时M/F, 这并不是我们希望看到的.
有了前两节的基础, 我想大家都可以 利用 renderer 方法轻易的实现 将M/F变成男/女.
在这小节我要告诉大家的是, 这种简单的映射, GT-Grid提供了一个工具函数, 可以帮助大家更简单的完成这个工作.
var colsConfig = [ /* ...其他column略 ... */ { id : 'gender' , header : "性别" , width : 50 , renderer : GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' ) } ];
GT.Grid.mappingRenderer函数有两个参数:
第一个是用来做映射的json-object, 第二个是数据不满足映射关系时 希望返回的值.
用来做映射的json-object就相当于一个可 key-value的hashmap, key就是列对应的数据的值, value就是希望映射成的值.
这个还是很好理解的.
当数据的值不在 这个关于性别的 映射关系中时, 将返回 '未知'.
=========================================
这一章讲解了 对列的扩展和显示效果的自定义, 只要你合理的利用 initValue 以及 renderer ,绝对可以创造出丰富多彩的列表.
好了 ,第二章到此结束了. 已经很晚了, 明天再写吧. 下一章再见

=========================================
最后的成果图:

评论
17 楼
zcs_84
2009-02-12
问个问题 如何获得 gt-Grid 所有显示的表格的行或者列Id号呀 或者说如何给表格的Id赋值呀?????
16 楼
fins
2008-12-11
waynero 写道
问个问题,grid 的columns 表头上面加 个按钮 怎么做呢? 比如 表头 “性别”为一个按钮 点击有触发事件,或者不做成按钮,点击“性别”就有触发事件
column 有 hdRenderer 方法
在这个方法里 返回一段 html代码就可以了
hdRenderer 方法 下一版将改名叫 headRenderer
15 楼
waynero
2008-12-10
问个问题,grid 的columns 表头上面加 个按钮 怎么做呢?
比如 表头 “性别”为一个按钮 点击有触发事件,或者不做成按钮,点击“性别”就有触发事件
比如 表头 “性别”为一个按钮 点击有触发事件,或者不做成按钮,点击“性别”就有触发事件
14 楼
qinchy
2008-12-03
乱码问题已经解决。仍然谢谢。
13 楼
qinchy
2008-12-03
请问fins,
我这里运行的时候出现问题,
在ie6里面提示有错误,
=======================
行:35,字符:80,错误:为结束的字符串变量,
而在firefox中能运行,
但是中文显示的是乱码,我的编码方式是utf-8,
请问这是怎么回事,谢谢先。
我这里运行的时候出现问题,
在ie6里面提示有错误,
=======================
行:35,字符:80,错误:为结束的字符串变量,
而在firefox中能运行,
但是中文显示的是乱码,我的编码方式是utf-8,
请问这是怎么回事,谢谢先。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>GT-Grid 教程示例</title> <link rel="stylesheet" type="text/css" href="./gt_grid.css" /> <script type="text/javascript" src="gt_msg_cn.js"></script> <script type="text/javascript" src="gt_grid_all.js"></script> <script type="text/javascript" > var data1 = [ { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 }, { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , math :87 }, { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 , math :62 } ]; var dsConfig= { data : data1, fields :[ {name : 'no' , type: 'int' , index : 'no' }, {name : 'name' , type: 'string' , index : 'name' }, {name : 'age' , type: 'int' , index : 'age' }, {name : 'gender' , type: 'string' , index : 'gender' }, {name : 'english', type: 'float' , index : 'english' }, {name : 'math' , type: 'float' , index : 'math' }, {name : 'total', type: 'float',initValue : function(record){ return record['english'] + record['math']; } } ] }; var colsConfig = [ { id : 'no',header : "学号", fieldName : 'no',width:60,align:'right'}, { id : 'name',header : "姓名", fieldName : 'name'}, { id : 'age',header : "年龄", fieldName : 'age'}, { id : 'gender',header : "性别", fieldName : 'gender', width : 50 , renderer : GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' ) }, //mappingRenderer是用来映射转义的,即把u转义为未知,m转义为男 { id : 'english', header : "英语", fieldName : 'english'}, { id : 'math', header : "数学", fieldName : 'math'}, { id : 'total', header : "总成绩",width :70 ,align :'right', renderer : function(value ,record,columnObj,grid,colNo,rowNo){ var total = record['total']; if (total>170) { total = '<span style="color:red" >'+ total +'</span>'; }else if (total<120) { total = '<span style="color:blue" >'+ total +'</span>'; } return total; } }, { id : 'detail' , header : "详细信息" , width : 120, renderer : function(value ,record,columnObj,grid,colNo,rowNo){ return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>'; } } ]; var gridConfig={ id : "grid1", dataset : dsConfig , columns : colsConfig , container : 'grid1_container', toolbarPosition : 'bottom', toolbarContent : 'state' }; var mygrid=new GT.Grid( gridConfig ); GT.Utils.onLoad( GT.Grid.render(mygrid) ); </script> </head> <body> <!-- grid的容器. --> <div id="grid1_container" style="width:700px;height:300px"> </div> </body> </html>
12 楼
fins
2008-12-03
forgood :
你使用的是什么版本?
你使用的是什么版本?
11 楼
forgood
2008-12-02
itlieying 写道
var data1 = [ { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , chinese : 50, math :92 ,physic: 100}, { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , chinese : 50, math :87 ,physic: 100}, { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 ,chinese : 50, math :62 ,physic: 100} ]; var dsConfig= { data : data1 , fields :[ {name : 'no' , type: 'int' }, {name : 'name' }, {name : 'age' , type: 'int' }, {name : 'gender' }, {name : 'english', type: 'float' }, {name : 'Chinese', type: 'float' }, {name : 'total1' , type: 'float', initValue : function(record){return record['english']+record['chinese'];}}, {name : 'math' , type: 'float' }, {name : 'physic', type: 'float' }, {name : 'total2' , type: 'float', initValue : function(record){return record['math']+record['physic'];}} ] }; var colsConfig = [ { id : 'no' , header : "学好" ,width : 50}, { id : 'name' , header : "你好" ,width:100}, { id : 'age' , header : "年龄" ,width:50}, { id : 'gender' , header : "性别" ,width:50, renderer : GT.Grid.mappingRenderer( { 'M':'男', 'F':'女'} , '未知' ) }, { id : 'english' , header : "英语" ,width:60}, { id : 'Chinese' , header : "语文" ,width:60}, { id : 'total1' , header : "文科总成绩" ,width:70 } { id : 'math' , header : "数学" ,width:60, align :'right'}, { id : 'physic' , header : "物理" ,width:60, align :'right'}, { id : 'total2' , header : "理科总成绩" ,width:70 } } ]; 提示找不到'total1'和'total2'列,请问fins,这个怎么解决?
这个是什么原因??
10 楼
fins
2008-09-25
你是什么版本??
9 楼
itlieying
2008-09-25
var data1 = [
{ no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , chinese : 50, math :92 ,physic: 100},
{ no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , chinese : 50, math :87 ,physic: 100},
{ no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 ,chinese : 50, math :62 ,physic: 100}
];
var dsConfig= {
data : data1 ,
fields :[
{name : 'no' , type: 'int' },
{name : 'name' },
{name : 'age' , type: 'int' },
{name : 'gender' },
{name : 'english', type: 'float' },
{name : 'Chinese', type: 'float' },
{name : 'total1' , type: 'float', initValue : function(record){return record['english']+record['chinese'];}},
{name : 'math' , type: 'float' },
{name : 'physic', type: 'float' },
{name : 'total2' , type: 'float', initValue : function(record){return record['math']+record['physic'];}}
]
};
var colsConfig = [
{ id : 'no' , header : "学好" ,width : 50},
{ id : 'name' , header : "你好" ,width:100},
{ id : 'age' , header : "年龄" ,width:50},
{ id : 'gender' , header : "性别" ,width:50,
renderer : GT.Grid.mappingRenderer( { 'M':'男', 'F':'女'} , '未知' )
},
{ id : 'english' , header : "英语" ,width:60},
{ id : 'Chinese' , header : "语文" ,width:60},
{ id : 'total1' , header : "文科总成绩" ,width:70 }
{ id : 'math' , header : "数学" ,width:60, align :'right'},
{ id : 'physic' , header : "物理" ,width:60, align :'right'},
{ id : 'total2' , header : "理科总成绩" ,width:70 }
}
];
提示找不到'total1'和'total2'列,请问fins,这个怎么解决?
{ no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , chinese : 50, math :92 ,physic: 100},
{ no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , chinese : 50, math :87 ,physic: 100},
{ no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 ,chinese : 50, math :62 ,physic: 100}
];
var dsConfig= {
data : data1 ,
fields :[
{name : 'no' , type: 'int' },
{name : 'name' },
{name : 'age' , type: 'int' },
{name : 'gender' },
{name : 'english', type: 'float' },
{name : 'Chinese', type: 'float' },
{name : 'total1' , type: 'float', initValue : function(record){return record['english']+record['chinese'];}},
{name : 'math' , type: 'float' },
{name : 'physic', type: 'float' },
{name : 'total2' , type: 'float', initValue : function(record){return record['math']+record['physic'];}}
]
};
var colsConfig = [
{ id : 'no' , header : "学好" ,width : 50},
{ id : 'name' , header : "你好" ,width:100},
{ id : 'age' , header : "年龄" ,width:50},
{ id : 'gender' , header : "性别" ,width:50,
renderer : GT.Grid.mappingRenderer( { 'M':'男', 'F':'女'} , '未知' )
},
{ id : 'english' , header : "英语" ,width:60},
{ id : 'Chinese' , header : "语文" ,width:60},
{ id : 'total1' , header : "文科总成绩" ,width:70 }
{ id : 'math' , header : "数学" ,width:60, align :'right'},
{ id : 'physic' , header : "物理" ,width:60, align :'right'},
{ id : 'total2' , header : "理科总成绩" ,width:70 }
}
];
提示找不到'total1'和'total2'列,请问fins,这个怎么解决?
8 楼
fins
2008-09-16
目前列宽不支持百分比
7 楼
zuiwoxing
2008-09-16
{ id : 'english' , header : "英语" , width : 60 , align :'right'}
其中width : 60 这里可以设置为百分比吗 ?
其中width : 60 这里可以设置为百分比吗 ?
6 楼
fins
2008-08-18
当前版本不支持纵向统计
5 楼
liliang205
2008-08-18
好像没看到列的统计,请问有列的统计吗?也就是全部数据的纵向统计
4 楼
49271743
2008-07-31
学习啦, 学起来也容易
2 楼
ernest100
2008-07-15
麻烦看看,我这里initValue和 align没有生效,看看我哪里有问题。
var data1 = [ { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 }, { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89 , math :87 }, { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53 , math :62 } ]; var dsConfig= { data : data1 , fields :[ {name : 'no' , type: 'int' }, {name : 'name' }, {name : 'age' , type: 'int' }, {name : 'gender' }, {name : 'english', type: 'float' }, {name : 'math' , type: 'float' }, {name : 'total' , type: 'float', initValue : function(record){return 1;}} ] }; var colsConfig = [ { id : 'no' , header : "学好" ,width : 50}, { id : 'name' , header : "你好" ,width:100}, { id : 'age' , header : "年龄" ,width:50}, { id : 'gender' , header : "性别" ,width:50, renderer : GT.Grid.mappingRenderer( { 'M':'男', 'F':'女'} , '未知' ) }, { id : 'english' , header : "英语" ,width:60}, { id : 'math' , header : "数学" ,width:60, align :'right'}, { id : 'total' , header : "总成绩" ,width:70, renderer : function(value ,record,columnObj,grid,colNo,rowNo){ var total = record['total']; if (total>70) { total = '<span style="color:red" >'+ total +'</span>'; }else if (total<120) { total = '<span style="color:blue" >'+ total +'</span>'; } return total; } }, { id : 'detail' , header : "详细信息" , width : 120, renderer : function(value ,record,columnObj,grid,colNo,rowNo){ return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>'; } } ]; var gridConfig={ id : "grid1", dataset : dsConfig , columns : colsConfig , container : 'grid1_container', toolbarPosition : 'bottom', toolbarContent : 'state' }; var mygrid=new GT.Grid( gridConfig ); GT.Utils.onLoad( GT.Grid.render(mygrid) );
1 楼
qamer
2008-07-14
太像EXT了,期待接下来的文章
发表评论
-
那些成天说我的GT-Grid抄袭的人注意了
2009-03-19 22:01 10355你们能够在浩瀚的网络中找到 sigmawidgets htt ... -
[发布]GT-Grid 1.42 版 ★& "前后台结合示例"★2009-01-15更新
2009-01-15 02:41 27656=============================== ... -
[发布]GT-Grid 1.36 版 ★& "前后台结合示例"★2008-12-01 12AM 更新
2008-12-01 01:27 10580(最后更新时间 :12月1日 中午12点时, 修正了 1.36 ... -
GT-Grid 近期将会发布一个bug修正版本,然后将会进行较大的重构
2008-11-11 00:12 3918GT-Grid 近期将会发布一个bug修正版本, 主要修正上一 ... -
[发布]GT-Grid 1.25 版 ★& "前后台结合示例" ★2008-10-21 更新
2008-10-21 17:25 20031首先 先道个歉. 之前许诺过 10月20日之前发布,结果迟到了 ... -
对于复杂javabean到json串的转换,建议使用FlexJSON
2008-10-16 11:23 9999gt-grid自带的那个 javaBean与json的转换工具 ... -
[通知] GT-Grid 讨论群 变更
2008-10-10 15:54 3071GT-Grid的群建立至今, 用户早已满员, 每日还有很多申请 ... -
10月中旬支持导出excel和csv的gt-grid会推出
2008-10-04 21:19 273110月中旬支持导出excel和csv的gt-grid会推出 ( ... -
[发布]GT-Grid 1.18版 & "前后台结合示例"更新 ★2008-09-12发布
2008-09-12 16:40 12765这个版本带有 与java后台结合的示例. 单独的最新版本的 ... -
调查: 关于GT-Grid导致IE崩溃的问题
2008-09-09 15:39 4338有网友反应 对GT-Grid进行操作时 会导致IE崩溃. ... -
[发布] GT-Grid 1.15 版 (080908发布) ★
2008-09-08 14:10 4279GT-Grid 1.15版 说明文档. 这篇文档主要说明一些 ... -
[发布] GT-Grid 1.12 版 (080904发布) ★
2008-09-03 11:02 5564GT-Grid 1.12版 说明文档. 这篇文档主要说明一些 ... -
奥运结束, GT启航
2008-08-25 10:11 2958前一阵由于关注奥运 GT做的工作比较少 奥运结束了 GT该再 ... -
最近奥运,GT的开发暂停一段时间,抱歉了
2008-08-18 20:13 19988月8号之后 GT的更新速度缓慢了,我回答问题也没有以前及时了 ... -
[发布] GT-Grid 1.0 奥运版 (080808发布) ★ without doc
2008-08-08 17:17 19586由于文档工作滞后 导致我本来放弃了今天发布的念头 但是还是不忍 ... -
GT-Grid 1.0 基础教程(十二)
2008-08-05 02:06 17573GT-Grid 1.0 基础教程(十二) 教程说明: 这是一 ... -
GT-Grid 1.0 基础教程(十一)
2008-08-03 22:29 8301GT-Grid 1.0 基础教程(十一 ... -
GT-Grid 1.0 基础教程(十)
2008-08-03 00:52 16858GT-Grid 1.0 基础教程(十) 教程说明: 这是一个 ... -
GT-Grid 1.0 基础教程(九)
2008-07-28 00:43 15721GT-Grid 1.0 基础教程(九) 教程说明: 这是一个 ... -
我的两点请求, 麻烦关注GT和ecside的朋友看一下,谢谢了
2008-07-27 21:55 30521 恳请大家以后不要通 ...
相关推荐
本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...
### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...
内容概要:本文介绍了如何利用CST软件进行三维超材料的能带计算。首先概述了三维超材料的独特性质及其广泛应用前景,接着简要介绍了CST软件的功能特点。随后详细阐述了能带计算的具体步骤,包括模型建立、材料参数设置、网格划分与求解设置以及最终的计算与结果分析。最后给出了一段Python代码示例,展示了如何处理CST输出的数据并绘制能带图。文章强调了计算机模拟技术对于深入了解超材料电子结构和物理性质的重要性。 适合人群:从事材料科学研究的专业人士,尤其是对三维超材料和电磁场模拟感兴趣的科研工作者和技术人员。 使用场景及目标:适用于希望借助CST软件开展三维超材料能带计算的研究项目,旨在提高对超材料的理解,推动相关领域的技术创新和发展。 其他说明:文中提供的Python代码仅为示例,在实际操作时可根据具体情况进行调整优化。同时,掌握CST软件的基本操作和电磁理论基础知识有助于更好地理解和应用本文内容。
内容概要:本文详细介绍了基于FPGA的永磁同步伺服系统的矢量控制设计,涵盖了从电流环到速度环的关键模块实现。具体包括Clarke和Park变换、PI调节器、AD7606采样、正交编码器反馈以及SVPWM生成等部分。文中提供了详细的Verilog代码片段,展示了各个模块的具体实现方法和技术细节。特别强调了定点数处理、时序设计和跨时钟域处理等方面的技术挑战及其解决方案。 适合人群:具备一定FPGA开发经验和电机控制基础知识的研发人员。 使用场景及目标:适用于希望深入了解FPGA在电机控制应用中的具体实现方式,特别是矢量控制和电流环设计的专业人士。目标是掌握FPGA平台下高效、低延迟的电机控制系统设计方法。 阅读建议:由于涉及大量具体的Verilog代码和硬件设计细节,建议读者在阅读过程中结合实际项目进行实验和调试,以便更好地理解和掌握相关技术。
经典飞机大战游戏是理解实时交互系统设计的绝佳载体。本文将深入剖析现代空战游戏的核心模块,涵盖刚体运动学、弹道轨迹优化、碰撞检测算法等关键技术,揭示二维游戏背后复杂的三维数学建模过程。
scratch少儿编程逻辑思维游戏源码-冰塔.zip
scratch少儿编程逻辑思维游戏源码-弹跳(4).zip
内容概要:本文详细介绍了COMSOL软件中三种常见的焊接热源模型——双椭球热源、高斯旋转体热源和柱状体热源。双椭球热源适用于模拟移动热源(如激光焊、电弧焊),通过调整轴向系数a1和a2来控制热流分布;高斯旋转体热源适合小范围焊接,采用三维高斯函数描述热流密度;柱状体热源则用于深熔焊场景,特点是计算速度快。文中还提供了每种模型的具体代码实现,并强调了调试时需要注意的关键点,如时间步长、网格加密等。此外,作者分享了一些实用技巧,如将热源参数设置为全局变量并利用参数扫描功能提高调试效率。 适合人群:从事焊接工艺仿真、材料加工领域的研究人员和技术人员,以及对COMSOL建模感兴趣的工程技术人员。 使用场景及目标:帮助用户选择合适的热源模型进行焊接模拟,确保模拟结果的准确性;提供具体的代码实现和调试方法,使用户能够快速掌握并应用于实际项目中。 其他说明:文中提到的热源模型不仅限于理论介绍,还包括实际操作中的注意事项和优化建议,有助于提升模拟效果和工作效率。
内容概要:本文介绍了将基于RBF神经网络的PID控制器应用于永磁同步电机(PMSM)转速环控制的方法及其性能优势。传统的PID控制器在面对非线性和时变系统时存在参数整定困难的问题,而引入RBF神经网络可以实现实时在线调参,提高系统的灵活性和鲁棒性。文中详细描述了Simulink模型的设计,特别是Matlab s-function模块中RBF神经网络的具体实现,包括高斯函数激活和带惯性的权值更新机制。实验结果显示,在转速突变情况下,改进后的控制器能够迅速稳定系统,超调量控制在2%以内,调节时间较传统方法缩短约40%,并且在负载变化时表现出色,无需重新整定参数。 适合人群:从事电机控制系统研究和开发的技术人员,尤其是对PID控制器优化感兴趣的工程师。 使用场景及目标:适用于需要提升PMSM转速环控制精度和响应速度的应用场合,如工业自动化设备、机器人等领域。目标是通过引入智能算法解决传统PID控制器参数整定难题,提高系统性能。 阅读建议:关注RBF神经网络与PID控制器结合的具体实现细节,特别是在Matlab s-function模块中的编码技巧以及参数调整策略。同时,注意学习率的选择和动量项的作用,这对于实际应用至关重要。
scratch少儿编程逻辑思维游戏源码-GTA 6.zip
scratch少儿编程逻辑思维游戏源码-仓鼠跑酷.zip
scratch少儿编程逻辑思维游戏源码-超级麦克世界.zip
scratch少儿编程逻辑思维游戏源码-400年.zip
少儿编程scratch项目源代码文件案例素材-气球足球.zip
少儿编程scratch项目源代码文件案例素材-沙漠迷城.zip
scratch少儿编程逻辑思维游戏源码-比谁高.zip
少儿编程scratch项目源代码文件案例素材-乾坤大挪移.zip
scratch少儿编程逻辑思维游戏源码-菜鸟跳跃.zip
内容概要:本文档详细介绍了C++语言的基础知识、高级特性及其应用。首先,文档回顾了C++对C语言的扩展,包括面向对象编程的支持、增强的语法特性(如命名空间、引用、常量处理等)。接着,深入探讨了类和对象的使用,涵盖构造函数、析构函数、拷贝构造函数、深浅拷贝等重要概念。文档还讲解了单例模式的设计与实现、C++面向对象模型的核心要素(如this指针、静态成员、友元函数)、继承与派生的关系及其实现细节、多态性的原理与应用。此外,文档详细介绍了C++的模板机制、类型转换、异常处理机制、输入输出流操作、STL(标准模板库)的容器和算法等内容。每个部分都通过具体的代码示例和解释,帮助读者理解和掌握C++的关键特性和最佳实践。 适合人群:具备一定编程基础,尤其是熟悉C语言的开发者;希望深入了解C++语言特性和面向对象编程思想的程序员;从事C++开发工作的工程师和技术爱好者。 使用场景及目标:①掌握C++语言的核心概念和高级特性;②理解并能够应用面向对象编程的基本原则和模式;③学习如何使用STL容器和算法优化代码性能;④提升C++程序的健壮性和可维护性,特别是在处理复杂数据结构和算法时;⑤掌握异常处理和类型转换的最佳实践,确保程序的稳定性和安全性。 其他说明:本文档不仅提供了理论知识,还结合了大量实例代码,便于读者边学边练。对于每一个知识点,文档都力求做到详尽解释,确保读者能够透彻理解并灵活运用。文档内容全面覆盖了C++编程的各个方面,从基础语法到高级特性,适合不同层次的学习者逐步深入学习。
内容概要:本文详细探讨了电气铁路柔性过分相技术中的60°换相波形稳定问题。首先介绍了柔性过分相的基本概念及其重要性,接着重点讨论了60°换相波形稳定对系统运行效率和稳定性的影响。文中还阐述了实现换相波形稳定的多种方法,如先进控制算法、实时监测设备以及滤波器的应用。最后,通过引用相关文献和实例,进一步验证了换相波形稳定的重要性和可行性。 适合人群:从事电气铁路系统设计、维护的技术人员,以及对该领域感兴趣的科研人员。 使用场景及目标:适用于希望深入了解电气铁路柔性过分相技术的专业人士,旨在帮助他们掌握60°换相波形稳定的相关理论和技术手段,提升系统性能。 其他说明:文章结合了理论分析与实际案例,提供了丰富的参考资料,有助于读者全面理解并应用于实际工作中。