先说一下题外话：由于上篇文章发现新浪博客一个问题， 斜杠星...星斜杠的注释会被博客直接和谐掉，郁闷。如果新浪大神看到请帮忙解决下，顺便能加上代码点亮就更好了~！~
所以下面注释内容只能用//了
我们来创建mydemo2.html内容如下：
<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" >
// 教程中的代码就写在这个区域里.
//数据集，这里只是为了创建大量数据~！~
function getClientTestData(max){
max=max||100;
var getInt=function(min,max) {
min = min || 0;
max = max || 100;
var _min= Math.min(min,max);
max=Math.max(min,max);
min=_min;
var step= max - min +1;
var s= (Math.random()+1)*max*10 % step;
var num= min + s ;
return parseInt(num,10);
}
var data=[];
var gl=['M','F','U'];
for (var i=0;i<max;i++){
var record={ no : 30+i ,
name : 'abc'+i ,
age :getInt(12,15) ,
gender : gl[getInt(1,9)%3] ,
english : 50+getInt(1,49),
math : 40+getInt(1,59)
}
data.push(record);
}
return data;
}
// 然后执行下面的语句, 客户端的数据就会有200条. (作为测试,我没有生成太多).
var data1 = getClientTestData( 200 );
//name : 字段的名字 (虽然时name 但是性质和id类似, 在一个数据集内要保持唯一性)
//type : 字段的类型 ( 目前只支持 string ,int, float , 为什么没有date类型?因为我觉得没必要,以后我会找机会解释一下我的想法和建议)
//index : 字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的时record哪个属性的值.
//当 type 为 string 时, 可省略type设置.
//当 index 和 name 一致时, 可省略 index设置.
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['math']+record['english'];
}
},
{name : 'detail' , type: 'string' , index : 'detail' }
]
}
//id : 列的唯一标识, 必须保证列表内唯一,建议整个页面唯一.
//header : 列表的表头显示的文字信息.
//fieldName : 列表的该列对应的 dataset中的列(字段).
//如果 fieldName 和 id一致 那么可以省略fieldName设置
//renderer函数-------
//value : 相应单元格对应的数据值 (本例中为null, 因为数据集中 根本就没有detail列)
//record : 迭代中当前的record
//columnObj : 当前的column对象,
//grid : 当前的grid对象.
//colNo : 当前的列号
//rowNo : 迭代中当前的行号
var colsConfig = [
{ id : 'no' ,header : "学号" , width : 50 , fieldName : 'no' },
{ id : 'name' ,header : "姓名" , width : 100 , fieldName : 'name' },
{ id : 'age' ,header : "年龄" , width : 50 , fieldName : 'age' },
//将M/F变成男/女.
//GT.Grid.mappingRenderer函数有两个参数:
//第一个是用来做映射的json-object,
//第二个是数据不满足映射关系时 希望返回的值.
{ id : 'gender' , header : "性别" , width : 50 ,
renderer : GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' )
},
{ id : 'english' , header : "英语" , width : 60 , fieldName : 'english' },
{ id : 'math' , header : "数学" , width : 60 , fieldName : 'math' },
//总成绩大于170分的 用红颜色标识出来(因为这是一个很不错的成绩),
//而120分以下的用蓝色标识出来(成绩很差).
{ 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 : 200,
renderer : function(value ,record,columnObj,grid,colNo,rowNo){
return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>'+' 坐标('+colNo+','+rowNo+')';
}
}
];
//id : 每个列表组件都有一个id 该id在页面内唯一.
//dataset :列表对应的数据集
//columns : 见colsConfig.
//container : 列表的容器的id. 列表最后是要显示在页面中某个位置.这个容器就是那个"位置",通常是一个div或者时td.
//toolbarPosition : 工具栏的位置. 可选值:'top'/'bottom'/null, 暂时不支持上下都显示.
//toolbarContent : 工具栏上要显示的东西,
// state,info表示的数据数量信息(分页信息),如共几条 共几页 当前是第几条等等.
// nav代表的就是 导航按钮区.
// reload刷新列表.
// goto代表直接调转到指定页.
// pagesize可以配置每页显示数目，默认只有pageSize数目
//pageSize : 每页显示的数目
//pageSizeList：当toolbarContent有pagesize属性时生效，配置可选页数
var gridConfig={
id : "grid1",
dataset : dsConfig ,
columns : colsConfig ,
container : 'grid1_container',
toolbarPosition : 'bottom',
toolbarContent : 'nav | reload | goto | pagesize | info',
pageSize : 10 ,
pageSizeList : [5,10,15,20,50]
};
//加载配置信息
var mygrid=new GT.Grid( gridConfig );
//mygrid为之前创建的对象,此处也可以传入grid的id.
GT.Utils.onLoad( GT.Grid.render(mygrid) );
</script>
</head>
<body>
<!-- grid的容器. -->
<div id="grid1_container" style="width:900px;height:300px">
</div>
</body>
</html>