jQuery和PHP層次結構視圖

Question

美好的一天！

您能幫我構造一個jquery函數，將以下數組輸出到類似於此鏈接CSS層次結構的視圖嗎？

該結構“包含一個具有N個子元素的父元素。HTML組件結構由兩個塊組成：.hv-item-parent和.hv-item-children -wrapper for children”

CSS中的結構-圖片

在不是真的擅長前端開發。 先感謝您！

PHP腳本：

public function buildStructure($details=array(), $parentId = 0) {
  $build = array();
  foreach ($details as $dtl) {
      if ($dtl['parent_job_int_id'] == $parentId) {
          $children = $this->buildStructure($details, $dtl['child_job_int_id']);
          if ($children) 
              $dtl['children'] = $children;              
          $build[] = $dtl;
      }
  }
  return $build;
}

數組中的輸出：

Array
(
    [child_id] => 6
    [parent_id] => 0
    [children] => Array
        (
            [0] => Array
                (
                    [child_id] => 7
                    [parent_id] => 6
                    [children] => Array
                        (
                            [0] => Array
                                (
                                    [child_id] => 18
                                    [parent_id] => 7
                                )

                        )

                )

            [1] => Array
                (
                    [child_id] => 11
                    [parent_id] => 6
                    [children] => Array
                        (
                            [0] => Array
                                (
                                    [child_id] => 40
                                    [parent_id] => 11
                                    [children] => Array
                                        (
                                            [0] => Array
                                                (
                                                    [child_id] => 73
                                                    [parent_id] => 40
                                                )

                                            [1] => Array
                                                (
                                                    [child_id] => 83
                                                    [parent_id] => 40
                                                    [children] => Array
                                                        (
                                                            [0] => Array
                                                                (
                                                                    [child_id] => 20
                                                                    [parent_id] => 83
                                                                )

                                                        )

                                                )

                                        )

                                )

                            [1] => Array
                                (
                                    [child_id] => 49
                                    [parent_id] => 11
                                )

                        )

                )

        )

)
Array
(
    [child_id] => 26
    [parent_id] => 0
)   

為數組輸出創建循環（與鏈接相同的視圖）

Answer 1

您可以使用orgchart獲取層次結構圖，這里是鏈接https://github.com/dabeng/OrgChart