jqgrid 4.6 中 怎么使用自定义 treetable

在 jqGrid 4.6 中，您可以使用自定义 treetable 来展示数据。下面是一些简单的步骤：

1. 首先，您需要在 colModel 中添加一个名为 parent 的列，以表示父节点。

2. 然后，您需要在 colModel 中添加一个名为 isLeaf 的列，用于指示是否为叶子节点。

3. 接下来，您需要在 colModel 中添加一个名为 level 的列，用于表示节点的层级。

4. 然后，您需要在 colModel 中添加一个名为 expanded 的列，用于表示节点是否已展开。

5. 最后，您需要使用自定义函数来处理数据和构建树形表格。您可以使用自定义函数来读取数据、计算层级、构建树形表格以及处理展开和折叠等操作。

下面是一些示例代码，可以帮助您开始构建自定义 treetable：

// 定义 colModel
var colModel = [
  { name: 'id', index: 'id', width: 60, key: true },
  { name: 'name', index: 'name', width: 150 },
  { name: 'parent', index: 'parent', width: 60, hidden: true },
  { name: 'isLeaf', index: 'isLeaf', width: 60, hidden: true },
  { name: 'level', index: 'level', width: 60, hidden: true },
  { name: 'expanded', index: 'expanded', width: 60, hidden: true }
];

// 定义自定义函数
var treeData = [];
function buildTreeData(data, parentId, level) {
  for (var i = 0; i < data.length; i++) {
    var node = data[i];
    node.parent = parentId;
    node.level = level;
    node.isLeaf = node.children.length == 0;
    node.expanded = false;
    treeData.push(node);
    if (node.children.length > 0) {
      buildTreeData(node.children, node.id, level + 1);
    }
  }
}

// 读取数据并构建树形表格
$.ajax({
  url: 'your_data_url',
  success: function(data) {
    buildTreeData(data, null, 0);
    $('#your_grid').jqGrid({
      datatype: 'local',
      data: treeData,
      colModel: colModel,
      treeGrid: true,
      treeGridModel: 'adjacency',
      ExpandColumn: 'name',
      ExpandColClick: true,
      ExpandOnClick: true,
      treeIcons: {
        plus: 'ui-icon-plus',
        minus: 'ui-icon-minus',
        leaf: 'ui-icon-document'
      },
      caption: 'Your Tree Table Caption'
    });
  }
});

上面的代码中，buildTreeData 函数用于构建树形表格的数据。它接受一个数据数组、父节点 ID 和层级作为参数，并递归处理所有子节点。在处理每个节点时，它设置节点的 parent、level、isLeaf 和 expanded 属性，并将节点添加到 treeData 数组中。如果节点有子节点，则递归处理子节点。

在读取数据后，您可以使用 treeData 数组来构建树形表格。在上面的代码中，我们使用了 jQuery 的 ajax 函数来异步读取数据。读取数据后，我们调用 buildTreeData 函数来构建树形表格的数据，并将数据传递给 jqGrid 的 data 选项。然后，我们使用 jqGrid 的 treeGrid 和 treeGridModel 选项来启用树形表格功能。最后，我们使用 ExpandColumn、ExpandColClick 和 ExpandOnClick 选项来设置展开和折叠操作的行为。

您可以根据自己的需求调整这些选项和代码。希望这可以帮助您开始构建自定义 treetable。