jsTreeGrid 技术文档

1. 安装指南

首先，确保在页面中包含 jQuery（版本 >= 1.4.2）和 jstree（版本 >= 3.3.0）。然后，按照以下步骤进行安装：

1. 引入 jstreegrid.js（版本 3 或更高）。
2. 将 grid 作为插件引入。

<!-- 引入 jstreegrid -->
<script src="/path/to/jstreegrid.js"></script>

2. 项目的使用说明

使用 jsTreeGrid 插件时，请按照以下步骤进行配置：

$("div#id").jstree({
    // 包含 grid 插件
    plugins: ["core", "ui", "...", "grid"],
    // 相关参数
    grid: {
        columns: [{},{},...,{}],
        width: 25
    },
    core: {
        data: [...]
    }
});

3. 项目API使用文档

以下是 jsTreeGrid 的配置选项：

• width: jstree-grid 的宽度。如果没有给出宽度，将自动填充整个视口（width: 100%;）。

• height: jstree-grid 的高度。如果没有给出高度，高度将反映内容量。

• fixedHeader: 布尔值。如果为 true，当树滚动时，列标题将保持可见。默认为 true。

• columnWidth: 给定列的默认宽度。如果没有给出宽度，默认为 auto。

• columns: 要创建的列数组，按顺序排列。每个条目都是一个对象，包含以下参数：

  • tree: 布尔值，指示是否在此列中放置 jstree。只接受第一个 true。如果没有任何列设置为 tree:true，则使用第一列。
  • width: 列的像素宽度。如果没有给出宽度，默认为 auto，但对于最后一列，如果没有给出宽度，则将其视为 'auto' 并填充到右侧的整个网格。
  • minWidth: 当宽度设置为 auto 时列的最小宽度。不限制手动调整列大小。
  • maxWidth: 当宽度设置为 auto 时列的最大宽度。不限制手动调整列大小。
  • header: 用于列标题的字符串。
  • headerClass: 添加到标题单元格的 CSS 类。
  • headerTitle: 添加到标题单元格的标题，显示为工具提示。
  • columnClass: 添加到标题单元格和列单元格的 CSS 类。
  • cellClass: 添加到此列中每个单元格（除标题外）的 CSS 类。
  • wideCellClass: 添加到此列中每个单元格（除标题外）的 CSS 类。
  • value: 用来作为此单元格值的节点属性。可以是字符串或函数。
  • valueClass: 用来作为此单元格类的节点属性。
  • valueClassPrefix: 添加到 valueClass 的前缀。
  • wideValueClass: 用来作为此单元格类的节点属性。
  • wideValueClassPrefix: 添加到 wideValueClass 的前缀。

  ...等等。

4. 项目安装方式

请遵循以下步骤来安装和使用 jsTreeGrid：

1. 包含 jQuery 和 jstree。
2. 引入 jstreegrid.js 文件。
3. 初始化 jstree 并配置 grid 插件。

确保遵循上述步骤以充分利用 jsTreeGrid 的功能。