【问题标题】：PHP Array to jsTreePHP 数组到 jsTree
【发布时间】：2014-03-16 18:32:09
【问题描述】：

我有一个$key => $value 对中的数据数组，我想很好地向用户显示。当我试图想办法做到这一点时，我想到了：

如果我可以将 JSON 传递到页面并制作一个 javascript 树，那就太好了。

然后我找到了jsTree，它似乎完全符合我的要求。阅读文档后，我发现创建树需要传递的 JSON 格式 - 所以我创建了一个递归函数将其转换为正确的数组格式，然后 json_encode'd 并将其传递给构造函数。问题是，json_encode 没有正确创建children 节点，所以它完全无法使用。我喜欢通用解决方案，而不必为一种特定类型的显示（在本例中为 jsTree）格式化源中的数据，并决定我希望能够获取任何数组并使用 jsTree 有效地显示它。经过数小时的搜索，我无法找到解决此问题的方法。

所以，我的问题是，将 PHP 数组转换为 jsTree 可以很好地使用的东西的最佳方法是什么。如果子节点没有图标，也没有图标所在的空间，则额外奖励，因为我个人不处理文件系统并且不需要没有子节点的图标。

【问题讨论】：

标签： php arrays jstree

【解决方案1】：

从数组创建 jsTree

首先，让我们解决如何将数组转换为 jsTree 可以很好地使用的东西，因为 json_encode 不能正常工作，我们将导致无序列表格式。由于输入数组可以包含标量数据或数组，因此需要递归。

为此，我们将创建array2jstree 函数，它实质上将数组转换为一个不特定于jsTree 的无序列表，但有一个class 异常。

function array2jstree($ar){
    $out = '';
    foreach($ar as $k => $v){
        $out .= "<li>$k";
        if(is_array($v)){
            $out .= array2jstree($v);
        }else{
            $out .= "<ul><li class=\"jstree-nochildren\">$v</li></ul>";
        }
        $out .= '</li>';
    }
    return "<ul>$out</ul>";
}

它的作用是遍历数组中的每个元素，如果是另一个数组，则调用自身并在“父”<li> 元素下创建一个无序列表，如果不是数组，仍会扩展为一个新列表，但是它只包含值。这样，一个数组：

array(
    'data' => 'value'
)

将在 data 上展开，将 value 显示为子代。

注意非数组值的类，即jstree-nochildren。此类不是 jsTree 的一部分，但可用于任何没有子项的项目（因此可以成功删除图标。）

现在，所需要做的就是将函数放入其中，并将一个数组传递给它，以获得一个运行良好的带有图标的 jsTree。将它放在一起展示如何使用它（以echo 为例，但可以很容易地作为变量传递给模板引擎等：

echo '<div id="cTree">'. array2jstree(array('name' => $myArray)) .'</div>';

将新数组传递给函数的原因是它有一个定义的“根”节点来扩展，如果不需要根节点，则省略它。

而 JS 将其初始化为 jsTree：

    <script>
    $('#cTree').jstree();
    </script>

现在您有了一个将数组转换为 jsTree 的插入函数！现在，回到没有子节点没有图标的问题，我们将基于我们之前分配的那个类创建一个样式jstree-nochildren，并使用 jsTree 将列表转换为的样式，您需要添加的唯一样式是：

.jstree-nochildren > a > .jstree-icon { display:none !important; }

现在你已经完成了！

【讨论】：