GT-Grid 是一个基于Ajax技术的列表组件.
首先下载gt-grid组件。然后创建gridTest.heml内容如下：
<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' }
]
}
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' }
];
var gridConfig={
id : "grid1",
dataset : dsConfig ,
columns : colsConfig ,
container : 'grid1_container',
toolbarPosition : 'bottom',
toolbarContent : 'state'
};
//加载配置信息
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:700px;height:300px">
</div>
</body>
</html>
双击html选择加载js，运行结果如下图：
