javascript list转tree

将一个列表转换为树形结构的主要思路是使用递归。以下是一个示例代码，假设列表中的每个项都具有以下属性：

- `id`：唯一标识符
- `parentId`：父节点的唯一标识符
- `children`：子节点的数组（初始为空数组）

function listToTree(list) {
  // 使用一个空对象作为所有节点的容器
  const nodes = {};
  // 遍历列表，将每个节点添加到容器中
  list.forEach(node => nodes[node.id] = { ...node, children: [] });
  // 遍历容器中的每个节点，将其添加到其父节点的 `children` 属性中
  Object.values(nodes).forEach(node => {
    if (node.parentId) {
      nodes[node.parentId].children.push(node);
    }
  });
  // 返回根节点数组
  return Object.values(nodes).filter(node => !node.parentId);
}

这个函数将返回一个根节点数组，其中每个根节点都包含其所有子节点。您可以使用此函数将列表转换为树形结构，并将其传递给渲染函数，以在UI中显示树形结构。

相关问题

jqgrid tree table 配合c# List简单集合怎么使用

要使用 jqGrid tree table 配合 C# List 简单集合，需要进行以下步骤：

1. 在前端页面引入 jqGrid 相关的 CSS 和 JavaScript 文件；
2. 在页面中创建一个表格元素，并指定 id；
3. 在 JavaScript 中通过 AJAX 请求获取 C# List 简单集合数据，并将数据转换为 JSON 格式；
4. 使用 jqGrid 的配置项，将 JSON 数据渲染到表格中。

下面是一个简单的示例代码，可以帮助你理解如何使用 jqGrid tree table 配合 C# List 简单集合：

HTML 代码：

<table id="treeGrid"></table>

JavaScript 代码：

// 定义 jqGrid 配置项
var gridConfig = {
    url: 'your-api-url',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['ID', '名称', '父级ID'],
    colModel: [
        {name: 'id', index: 'id', width: 60, hidden: true},
        {name: 'name', index: 'name', width: 200},
        {name: 'parentId', index: 'parentId', width: 60, hidden: true}
    ],
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'name',
    ExpandColClick: true,
    caption: 'treeGrid 示例'
};

// 发送 AJAX 请求，获取 C# List 简单集合数据并转换为 JSON 格式
$.ajax({
    url: 'your-api-url',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        // 将 JSON 数据渲染到表格中
        $('#treeGrid').jqGrid(gridConfig).jqGrid('setGridParam', {data: data}).trigger('reloadGrid');
    },
    error: function (xhr, status, error) {
        console.error(error);
    }
});

在上面的代码中，你需要将 `your-api-url` 替换为你的 API 接口地址，该接口返回的数据格式应该是一个包含 C# List 简单集合数据的 JSON 对象。

同时，你还需要根据实际情况调整 jqGrid 的配置项，以满足你的需求。