GT-Grid
1.简介：
2.GT-Grid 所需文件
3.初学实例
（1）首先在index.jsp中引入js和css文件
<link rel="stylesheet" type="text/css" href="gt-grid/gt_grid.css" />
<script type="text/javascript" src="gt-grid/gt_msg_cn.js"></script>
<script type="text/javascript" src="gt-grid/gt_grid_all.js"></script>
主要就是以下几步：
1. var data1 ... //定义数据
数据必须为一个json数组, 数组中的每一项为一个 js对象/js数组.两种形式的数据都是可以的.(但是不能混合使用). 一般使用js对象（绝大多数
json的第三方转换工具 都会将pojo map等转换成第一种形式的json数据. 而且也更便于反向转换）
数组中的每一项 代表 单条数据. 简称 record.
//1.创建数据 var data1 ...
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
}
];2. var dsConfig .... //定义数据集
有了数据还不够, 因为GT-Grid未必就能理解这些数据, 你还需要对数据进行简单的描述.这个描述就是定义数据集.
//2.创建数据集 var dsConfig ....
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‘
} ]
};
代码讲解：
data 指向 之前的数据.
fields 是一个数组, 描述record各个字段的信息,类似数据库表中的列信息.
name : 字段的名字 (虽然时name 但是性质和id类似, 在一个数据集内要保持唯一性) type : 字段的类型 ( 目前只支持 string ,int, float , 为什么没有date类型?因为我觉得 没必要,以后我会找机会解释一下我的想法和建议)
index : 字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的 时record哪个属性的值.
index说白了就是你数据库里面的列名；也可以说成是：通过后台转换后生成的json 格式数据里面的key；
当 type 为 string 时, 可省略type设置.
当 index 和 name 一致时, 可省略 index设置.
3. var colsConfig ... //定义列信息
定义每一列的列标头和以及该列对应的数据
//3.设计列 var colsConfig ...
var colsConfig = [ {
id : ‘no‘,
header : "学号",
fieldName : ‘no‘
}, {
id : ‘name‘,
header : "姓名",
fieldName : ‘name‘
}, {
id : ‘age‘,
header : "年龄",
fieldName : ‘age‘
}, {
id : ‘gender‘,
header : "性别",
fieldName : ‘gender‘
}, {
id : ‘english‘,
header : "英语",
fieldName : ‘english‘
}, {
id : ‘math‘,
header : "数学",
fieldName : ‘math‘
} ];
header : 列表的表头显示的文字信息.
fieldName : 列表的该列对应的 dataset（数据集）中的列(字段).
4. var gridConfig .... //定义gt-grid控件
//4.设计grid的参数 var gridConfig ....
var gridConfig = {
id : "grid1",
dataset : dsConfig,
columns : colsConfig,
container : ‘grid1_container‘,
toolbarPosition : ‘bottom‘,
toolbarContent : ‘state‘
};
5. var mygrid=new GT.Grid( gridConfig );
定义并创建GT-Grid对象.创建GT-Grid对象的方法
//5.var mygrid=new GT.Grid( gridConfig );定义并创建GT-Grid对象.创建GT-Grid对象的方法 var mygrid = new GT.Grid(gridConfig);
6. GT.Utils.onLoad( GT.Grid.render(mygrid) );//onLoad加载
//6. load加载 GT.Utils.onLoad(GT.Grid.render(mygrid));
<body>
<!-- grid的容器. -->
<div id="grid1_container" style="width:700px;height:300px"></div>
</body>
4.进一步完善
Renderer方法：
单词的意思：渲染器，描绘器；
在gt-grid里面叫做叫做"扩展显示列". 作用是：用来显示一些数据以外的东西
比如：一个按钮或者是图片 或者是链接, 点击后可以执行一些特殊的操作 如：
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>‘;
}
} ]; 相应单元格内.
renderer 函数的里面会有 6个参数，依次为
1. value : 相应单元格对应的数据值 (本例中为null, 因为数据集中 根本就没有detail列)
2. record : 迭代中当前的record
3. columnObj : 当前的column对象,
4. grid : 当前的grid对象.
5. colNo : 当前的列号
6. rowNo : 迭代中当前的行号
个性化渲染列
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; } }];
toolbarContent : ‘nav | goto | pagesize | state‘ , 大家要注意, nav ,| ,state 三者之间
有空格间隔. nav：代表的就是 导航按钮区.
导航区中包含了 四个按钮: 第一页 前一页 后一页 最后一页
goto ："直接调转到指定页"的功能.
pageSize ：页容
toolbarPosition : 工具栏的位置. 可选值:‘top‘/‘bottom‘/null, 暂时不支持上下都显示.
remotePaging :是否远程分页（true、false）
loadURL：分页的连接（比如：loadURL：’totalfieldpage.action’）;如果有命名空间的
话，一定要加上命名空间，如果没有的话，可以放个action
效果：
原文：http://blog.csdn.net/yantingmei/article/details/23371821
