Grid 项目技术文档

1. 安装指南

首先，需要将 Grid.js 和 Grid.css 文件添加到您的网站资源目录中。您可以根据需要修改 Grid.css 文件中的样式。

2. 项目的使用说明

创建一个具有 id 属性的 div 元素，最好设置一个固定的宽度和高度：

<div id="myGrid" style="width:800px;height:360px;"></div>

然后使用 JavaScript 初始化 Grid：

var gridData = {
  Head: [["Header 1", "Header 2", "Header 3"]],
  Body: [
    ["Row 1, Cell 1", "Row 1, Cell 2", "Row 1, Cell 3"],
    ["Row 2, Cell 1", "Row 2, Cell 2", "Row 2, Cell 3"],
    ["Row 3, Cell 1", "Row 3, Cell 2", "Row 3, Cell 3"]
  ]
};

new Grid("myGrid", {
  srcType: "json",
  srcData: gridData,
  allowGridResize: true,
  allowColumnResize: true,
  allowClientSideSorting: true,
  allowSelections: true,
  allowMultipleSelections: true,
  showSelectionColumn: true,
  fixedCols: 1
});

Grid 数据可以是 JSON 格式，也可以是 XML 格式，或者从 DOM 中获取：

<table id="myGridTable">
  <thead>
    <tr><td>Header 1</td><td>Header 2</td><td>Header 3</td></tr>
  </thead>
  <tbody>
    <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
    <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
    <tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td><td>Row 3, Cell 3</td></tr>
  </tbody>
</table>

3. 项目API使用文档

以下是 Grid 的一些主要配置选项：

• srcType: 数据源类型，可以是 "dom", "json" 或 "xml"。默认为 ""。
• srcData: 数据源，根据 srcType 的不同，可以是 HTMLTableElement、JSON 字符串/对象或 XML 字符串/文档。默认为 ""。
• allowGridResize: 是否允许用户调整 Grid 大小。默认为 false。
• allowColumnResize: 是否允许用户调整列大小。默认为 false。
• allowClientSideSorting: 是否允许用户进行列排序。默认为 false。
• allowSelections: 是否允许用户选择行。默认为 false。
• allowMultipleSelections: 是否允许用户选择多行。allowSelections 必须为 true。默认为 false。
• showSelectionColumn: 是否显示选择列。allowSelections 必须为 true。默认为 false。
• fixedCols: 从左侧开始固定的列数。默认为 0。

更多配置选项和示例，请参考项目 GitHub 仓库。

4. 项目安装方式

请按照以下步骤安装 Grid 项目：

1. 下载或克隆项目到本地。
2. 将 Grid.js 和 Grid.css 文件添加到您的网站资源目录中。
3. 根据需要修改样式文件 Grid.css。
4. 在您的 HTML 文件中创建一个 div 元素，并为其设置 ID。
5. 在 JavaScript 中初始化 Grid，并配置相关选项。

以上是 Grid 项目的详细技术文档，希望对您有所帮助。