GT-Grid 1.0 基础教程(二)

GT-Grid 1.0 基础教程(二)

教程说明:
这是一个告诉大家如何快速的利用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，
请问这是怎么回事，谢谢先。

<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,这个怎么解决？

8 楼 fins 2008-09-16  

目前列宽不支持百分比

7 楼 zuiwoxing 2008-09-16  

    { id : 'english' , header : "英语" , width : 60 , align :'right'}  
     
   其中width : 60 这里可以设置为百分比吗 ?

6 楼 fins 2008-08-18  

当前版本不支持纵向统计

5 楼 liliang205 2008-08-18  

好像没看到列的统计，请问有列的统计吗？也就是全部数据的纵向统计

4 楼 49271743 2008-07-31  

学习啦， 学起来也容易

3 楼 fins 2008-07-15  

你下载 最新的 0715版本试一下

猛击这里

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了，期待接下来的文章