树状图 - 分层数据源 - 模板

要解决"树状图 - 分层数据源 - 模板"的问题，可以使用以下步骤：

1. 创建树状图的HTML模板：首先，创建一个包含树状图结构的HTML模板。可以使用 <ul> 和 <li> 标签来表示树形结构，使用CSS样式来定义节点的样式。

<ul id="tree">
  <li>Node 1
    <ul>
      <li>Node 1.1</li>
      <li>Node 1.2</li>
    </ul>
  </li>
  <li>Node 2</li>
  <li>Node 3
    <ul>
      <li>Node 3.1</li>
      <li>Node 3.2</li>
    </ul>
  </li>
</ul>

2. 创建数据源：在Javascript中，创建一个包含树状结构数据的变量，可以使用数组和对象的组合来表示树形结构数据。每个节点都包含一个 name 属性表示节点名称，以及一个 children 数组表示子节点。

var treeData = [
  {
    name: "Node 1",
    children: [
      {
        name: "Node 1.1",
        children: []
      },
      {
        name: "Node 1.2",
        children: []
      }
    ]
  },
  {
    name: "Node 2",
    children: []
  },
  {
    name: "Node 3",
    children: [
      {
        name: "Node 3.1",
        children: []
      },
      {
        name: "Node 3.2",
        children: []
      }
    ]
  }
];

3. 使用模板和数据源生成树状图：在Javascript中，使用递归函数来生成树状图。首先，获取树状图的容器元素，然后通过递归遍历数据源，生成对应的HTML节点，并将节点添加到容器中。

function generateTree(container, data) {
  var ul = document.createElement("ul");
  container.appendChild(ul);

  data.forEach(function(nodeData) {
    var li = document.createElement("li");
    li.textContent = nodeData.name;

    ul.appendChild(li);

    if (nodeData.children && nodeData.children.length > 0) {
      generateTree(li, nodeData.children);
    }
  });
}

// 使用模板和数据源生成树状图
var container = document.getElementById("tree");
generateTree(container, treeData);

通过以上步骤，可以使用模板和数据源生成树状图。将上述代码复制到HTML文件中，并将HTML模板和数据源替换为实际的内容，即可将树状图渲染到页面中。