### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解
#### 一、教程背景与目标
本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的开发者来说，这份指南尤其有用。通过本教程的学习，你可以了解到如何构建一个简单的纯客户端只读列表，并了解如何通过设置不同的属性来满足个性化需求。
#### 二、环境搭建
为了确保能够顺利地进行本教程的学习，请按照以下步骤准备你的开发环境：
1. **创建HTML文件**：请创建一个名为`mydemo1.html`的文件，作为本教程的实践文件。
2. **文件编码**：确保文件采用UTF-8编码格式。
3. **引入必要文件**：
- 引入CSS样式表`gt_grid.css`。
- 引入JavaScript文件`gt_msg_cn.js`和`gt_grid_all.js`。
- 将这些文件的路径正确配置到HTML文件中。
示例代码如下：
```html
<!DOCTYPE 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">
// 教程中的代码将写在这个区域里。
</script>
</head>
<body>
<!-- grid的容器 -->
<div id="grid1_container" style="width:700px;height:300px"></div>
</body>
</html>
```
#### 三、纯客户端只读列表开发
接下来，我们将详细介绍如何创建一个纯客户端只读列表。
##### 3.1 数据准备
一个完整的GT-Grid由三部分组成：数据、样式和行为。其中，数据是最基本的部分，必须为JSON数组的形式。数组中的每一项为一个JS对象或JS数组，每项代表单条数据（我们称之为“record”）。
**示例数据**：
```javascript
var data1 = [
{no: 1, name: 'aaa', age: 12, gender: 'M', english: 76.5, math: 80},
{no: 2, name: 'bbb', age: 14, gender: 'F', english: 90, math: 88},
{no: 3, name: 'ccc', age: 15, gender: 'M', english: 82, math: 75}
];
```
以上数据示例表示三名学生的相关信息。
##### 3.2 初始化GT-Grid
初始化GT-Grid需要指定其容器、数据源以及其他配置信息。具体步骤如下：
1. **选择容器**：在HTML文件中定义一个用于放置GT-Grid的容器，如上面示例中的`<div id="grid1_container">`。
2. **创建GT-Grid实例**：通过JavaScript创建GT-Grid实例并设置必要的参数。
**示例代码**：
```javascript
<script type="text/javascript">
var grid = new GT.Grid({
el: 'grid1_container', // 容器ID
data: data1, // 数据源
columns: [ // 列配置
{name: 'no', title: '序号', width: 50},
{name: 'name', title: '姓名', width: 100},
{name: 'age', title: '年龄', width: 50},
{name: 'gender', title: '性别', width: 50},
{name: 'english', title: '英语成绩', width: 80},
{name: 'math', title: '数学成绩', width: 80}
]
});
</script>
```
这段代码将创建一个包含学生信息的GT-Grid，并将其放置在ID为`grid1_container`的容器中。
#### 四、个性化设置
为了满足更多个性化需求，GT-Grid提供了丰富的配置选项。以下是一些常见的个性化设置：
- **列宽**：可以通过`width`属性设置每列的宽度。
- **列标题**：可以通过`title`属性自定义列的标题。
- **排序**：可以通过`sortable`属性启用列排序功能。
- **筛选**：可以通过`filterable`属性启用列筛选功能。
**示例代码**：
```javascript
<script type="text/javascript">
var grid = new GT.Grid({
el: 'grid1_container',
data: data1,
columns: [
{name: 'no', title: '序号', width: 50, sortable: true},
{name: 'name', title: '姓名', width: 100, filterable: true},
{name: 'age', title: '年龄', width: 50},
{name: 'gender', title: '性别', width: 50},
{name: 'english', title: '英语成绩', width: 80},
{name: 'math', title: '数学成绩', width: 80}
]
});
</script>
```
通过上述代码，我们可以看到增加了列排序和筛选的功能。
#### 五、小结
本教程介绍了如何使用GT-Grid开发纯客户端只读列表的基本流程。学习完本章节后，你应该能够理解GT-Grid的基本结构、如何准备数据以及如何进行一些简单的个性化设置。这为后续更高级的应用打下了坚实的基础。如果想要了解更多高级特性，请参考官方文档或期待后续的高级教程。
zhiyuhan2013-03-27还可以，对初学者还是不错的选择
