Question

我在php中有一个用于绘制树状菜单的功能，我想在javascript中做同样的功能但是我在java脚本中是新的，所以我需要帮助

这是javascript中的函数

/**
* Recursive Function to show the nested Menu 
* @param $data array of all the data in DataBase
* @param $level choose the level form which the nested menu will start 
* @return nested menu in Html Form.
*/
function recursive($data, $level) {
   $r = "<ul>";
   foreach ( $data as $i ) {

       if ($i['parent'] == $level ) {
          $r = $r . "<li><a href='#' onclick = 'getId(".$i['id'].")'>" . $i['title'] . recursive( $data, $i['id'] ) . "</a></li>";
       }
   }
   $r = $r . "</ul>";
   return $r;
}

数据参数是来自数据库的数据，它来自

    array (size=11)
  0 => 
    array (size=3)
      'id' => string '44' (length=2)
      'parent' => string '0' (length=1)
      'title' => string 'shreif' (length=6)
  1 => 
    array (size=3)
      'id' => string '50' (length=2)
      'parent' => string '44' (length=2)
      'title' => string 'ssss' (length=4)
  2 => 
    array (size=3)
      'id' => string '53' (length=2)
      'parent' => string '50' (length=2)
      'title' => string 'asdddd' (length=6)
  3 => 
    array (size=3)
      'id' => string '54' (length=2)
      'parent' => string '53' (length=2)
      'title' => string 'asd' (length=3)
  4 => 
    array (size=3)
      'id' => string '55' (length=2)
      'parent' => string '54' (length=2)
      'title' => string 'sad' (length=3)
  5 => 
    array (size=3)
      'id' => string '62' (length=2)
      'parent' => string '44' (length=2)
      'title' => string 'asd' (length=3)
  6 => 
    array (size=3)
      'id' => string '63' (length=2)
      'parent' => string '62' (length=2)
      'title' => string 'dddd' (length=4)
  7 => 
    array (size=3)
      'id' => string '64' (length=2)
      'parent' => string '63' (length=2)
      'title' => string 'sad' (length=3)
  8 => 
    array (size=3)
      'id' => string '67' (length=2)
      'parent' => string '64' (length=2)
      'title' => string 'asd' (length=3)
  9 => 
    array (size=3)
      'id' => string '68' (length=2)
      'parent' => string '0' (length=1)
      'title' => string 'aaaa' (length=4)
  10 => 
    array (size=3)
      'id' => string '69' (length=2)
      'parent' => string '67' (length=2)
      'title' => string 'asd' (length=3)

和level参数是水平开始我用O打印我这样的树

> shreif
       ssss
         asdddd
           asd
             sad
       asd
         dddd
           sad
             asd
              asd
 aaaa

我把这些数据改成了像这样的json：

var old_data = '<?php echo json_encode($nested); ?>';

我得到了这个

[
{"id":"44","parent":"0","title":"shreif"},
{"id":"50","parent":"44","title":"ssss"},
{"id":"53","parent":"50","title":"asdddd"},
{"id":"54","parent":"53","title":"asd"},
{"id":"55","parent":"54","title":"sad"},
{"id":"62","parent":"44","title":"asd"},
{"id":"63","parent":"62","title":"dddd"},
{"id":"64","parent":"63","title":"sad"},
{"id":"67","parent":"64","title":"asd"},
{"id":"68","parent":"0","title":"aaaa"},
{"id":"69","parent":"67","title":"asd"}];

所以我需要一个函数来获取它并绘制相同的嵌套菜单，就像我在php中所做的任何帮助

这是我的尝试：

function recursive(data,level)
{
    var list = document.getElementById("mylist");
    for ( i in data )
    {
        if ( i['parent'] == level ) 
        {
           var r = item.appendChild(
            document.createTextNode(
                "<li><a href='#' onclick = 'getId(".i['id'].")'>" . i['title'] . recursive( data, i['id'] ) . "</a></li>")
            );
        }

    }
    list.appendChild(r);
}

是吗？

Answer 1

使用ID创建您的选择列表。像这样：

<ul id="mylist"> </ul>

然后你可以找到它并添加它：

var list = document.getElementById("mylist");
var item = document.createElement('li');
item.appendChild(document.createTextNode("WHATEVER YOU WANT"));
list.appendChild(item);

将所有这些扔进循环中，你已经掌握了自己的功能。

在javascript中创建一个函数

1 个答案: