PHP Array对jsTree [英] PHP Array to jsTree

问题描述

我有数据的 $键=＆GT的数组; $值对，我想很好地显示给用户。当我试图想办法做到这一点，我想出了不过的：

I have an array of data in $key => $value pairs that I wanted to display nicely to the user. As I was trying to think of ways to do it, I came up with the though of:

这会是很好，如果我可以只通过JSON页面，并有一个JavaScript树的。

It'd be nice if I could just pass the JSON to the page and have a javascript tree made.

然后我发现 jsTree ，这似乎完全符合我的要求。阅读文档后，我发现这是需要传递到创建树JSON格式 - 所以我创建了一个递归函数变换到正确的阵列格式，然后 json_en $ C $ ç倒是并将其传递给构造函数。问题是， json_en code 没有创建孩子节点正常，所以这是完全无法使用。我喜欢一般的解决方案，而不必从源格式的数据对于一个特定类型的显示（在这种情况下是jsTree），并决定我希望能够有效地采取任何数组并显示它与jsTree。经过搜索的时间我无法找到一个下拉解决这个问题。

Then I found jsTree, which seemed to fit my requirements perfectly. After reading the documentation, I found the JSON format which was needed to to be passed to create the tree - so I created a recursive function to transform it in to the correct array format, and then json_encode'd it and passed it to the constructor. The problem was, json_encode didn't create the children nodes properly, so it was completely unusable. I like general solutions, without having to format the data from the source for one particular type of display (being jsTree in this case), and decided I'd want to be able to take any array and display it with jsTree efficiently. After hours of searching I was unable to find a drop-in solution to this problem.

所以，我的问题是，什么是一个PHP数组转换的东西，jsTree将发挥很好的最好方式。加分如果孩子节点没有图标，也不是空间，图标是，因为我个人不处理的文件系统，并且拥有不需要的图标那里有没有孩子节点。

So, my question is, what is the best way to convert a PHP array to something that jsTree will play nicely with. Added bonus if the children nodes don't have icons, nor the space where the icon was, as I am personally not dealing with a file system and have no need for an icon where there are no children nodes.

推荐答案

首先，让我们来解决如何把一个数组中的东西jsTree将发挥很好，因为 json_en code 不能正常工作，我们会导致一个无序列表格式。由于输入阵列可以包含标量数据或阵列，它需要是递归

Creating jsTree from Array

First, let's tackle how to turn an array in to something jsTree will play nicely with, since json_encode doesn't work properly, we'll result to an unordered list format. Since the input array can contain either scalar data or an array, it will need to be recursive.

对于这一点，我们将创建 array2jstree 功能，这实质上是将在阵列中无序列表是不特定jsTree一个类例外。

For this, we'll create the array2jstree function, which essentially turns the array in to an unordered list that is not specific to jsTree with one class exception.

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>";
}

这样做是通过数组中的每个元素的推移，如果另一个数组，自称与父＆LT下面创建一个无序列表;李＆GT; 元素如果不是一个数组，仍然扩展为一个新的清单，但它仅包含值。以这种方式，阵列

What this does is goes through each element in the array and, if another array, calls itself and creates an unordered list underneath the 'parent' <li> element, if not an array, still expands to a new list, but it only contains the value. In this way, an array of:

array(
    'data' => 'value'
)

将在可扩展的数据显示值，因为它的孩子。

请注意对于非数组值类，为 jstree-nochildren 。这类不可jsTree的一部分，但被用于没有孩子的任何项目（这样的图标可以被成功去除。）

Note the class for the non-array value, being jstree-nochildren. This class is not part of jsTree, but is being used for any item that has no children (so the icon can be removed successfully.)

现在，所有需要的是放弃的功能，并传递一个数组给它一个很好的工作jsTree，带图标。将其组合在一起来展示如何使用它会（使用回声作为一个例子，但可以很容易地通过一个变量来一个模板引擎等是：

Now, all that is needed is to drop the function in, and pass an array to it for a nice working jsTree, with icons. Putting it together to show how to use it would be (using echo as an example, but can easily be pass as a variable to a templating engine, etc:

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

通过一项新的阵列功能的原因是，它有一个定义的根节点扩大，忽略它，如果你并不需要一个根节点。

The reason to pass a new array to the function is so that it has a defined 'root' node to expand, omit it if you don't need a root node.

而JS把它初始化为jsTree：

And the JS to initialize it as a jsTree:

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

现在你有一个下拉功能数组转换为jsTree！现在，回到没有图标，为那些没有孩子的节点的问题，我们将根据我们前面分配该类创建一个样式 jstree-nochildren ，以怎样的jsTree工作转换列表中，您需要添加的唯一风格是：

Now you have a drop-in function to convert arrays to a jsTree! Now, back to the issue of no icon for nodes that have no children, we will create a style based on that class we assigned earlier jstree-nochildren, and working with what jsTree converts the list to, the only style you need to add is:

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

现在你都做！

这篇关于PHP Array对jsTree的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！