簡體   English   中英

PHP 根據數據庫中的數據填充表頭

[英]PHP Populate Table Headers Based on Data from Database

我有一個table_headers數據庫表,其中包含包含此數據的idheader文本、 parent_idorder_number

在此處輸入圖像描述

我如何循環到該記錄以使其產生這種 HTML?

        <tr>
            <th colspan='2'>Header 1</th>
            <th colspan='6'>Header 2</th>
            <th rowspan='3'>Header 3</th>
        </tr>

        <tr>
            <th rowspan=2>H1 Child 1</th>
            <th rowspan=2>H1 Child 2</th>
            <th rowspan=2>h2 Child 1</th>
            <th colspan=4>h2 Child 2</th>
        </tr>

        <tr>
            <th>H2 C2 C1</th>
            <th>H2 C2 C2</th>
            <th>H2 C2 C3</th>
            <th>H2 C2 C4</th>
        </tr>

結果應該是這樣的。

在此處輸入圖像描述

最后,如何擁有一個包含最低孩子 ID 的數組,就像這樣。

$lowest_child[0]=4; //because the ID of `H1 Child 1` is 4
$lowest_child[1]=5; //because the ID of `H1 Child 2` is 5 and so on
$lowest_child[2]=;
$lowest_child[3]=;
$lowest_child[4]=;
$lowest_child[5]=;
$lowest_child[6]=;
$lowest_child[7]=;

另一個使用 ggordon 提供的答案的示例數據集。 在此處輸入圖像描述

它輸出到這個。 似乎沒有遵循孩子的順序。 在此處輸入圖像描述

解決方案

這可以在生成一些有用的元數據后實現。 下面的代碼遍歷並在關聯數組中構建一棵樹。 在一些輔助函數getRowSpangetColSpan的幫助下,表格是從元數據生成的。 生成的json元數據已包含在下面。

為了得到最低孩子的數組。 您只需要使用$levels[$depth]將返回最低深度的子關聯數組。 鍵是孩子的 ID。

HTML/PHP 代碼

<!DOCTYPE html>
<html>
<body>

<?php

$headings = []; # store heading data as array

$numOfRows = count($headings); # 3
$levels = [];
$depth = 0;
$subHeadings = [];
$levels[$depth]=[];
for($i=0;$i<$numOfRows;$i++){
   if($headings[$i]["parent_id"]==null){
      $headings[$i]["child_count"]=0;
      $headings[$i]["child_ids"]=[];
      $headings[$i]["depth"]=0;
      $levels[$depth][$headings[$i]["id"]]=$headings[$i];
   }else{
      $subHeadings[]=$headings[$i];
   }
}

while(count($subHeadings)>0){
   $depth++;
   $levels[$depth]=[];
   $subHeadingNext=[];
   foreach($subHeadings as $sub){
       if(
         isset( $levels[$depth-1][
             $sub["parent_id"]
         ])
       ){
           $levels[$depth-1][$sub["parent_id"]]["child_count"]++;
           $levels[$depth-1][$sub["parent_id"]]["child_ids"][]=$sub["id"];
           $sub["child_count"]=0;
           $sub["child_ids"]=[];
           $sub["depth"]=$depth;
           $levels[$depth][$sub["id"]]=$sub;
       }else{
           $subHeadingNext[] = $sub;
       }
   }
   $subHeadings=$subHeadingNext;
}

#echo json_encode($levels,true);
#colspan is total of all child nodes

function getColSpan($node,$levels){
    $childCount = $node["child_count"];
    $visitor = $node;
    $childrenIds = $visitor["child_ids"];
    
    foreach($childrenIds as $childId){
         
        $childCount+= getColspan($levels[$visitor["depth"]+1][$childId],$levels);
    }
    
    return $childCount;
}
#max depth - depth of last child
function getRowSpan($node,$maxDepth){
   return $node["child_count"] > 0 ? 1 : $maxDepth - $node["depth"]+1;
}


?> 

<table border="3">
<?php
foreach($levels as $level => $nodes){
?>
<tr>
<?php
   foreach($nodes as $node){
       ?>
       <td colspan="<?php echo getColSpan($node,$levels)  ?>" rowspan="<?php echo getRowSpan($node,$depth)  ?>"><?php echo $node["header"] ?></td>
       <?php
   }
?>
</tr>
<?php
}
?>
</table>
</body>
</html>

Output

 <table border="3"> <tbody><tr> <td colspan="2" rowspan="1">Header 1</td> <td colspan="6" rowspan="1">Header 2</td> <td colspan="0" rowspan="3">Header 3</td> </tr> <tr> <td colspan="0" rowspan="2">H1 Child 1</td> <td colspan="0" rowspan="2">H1 Child 2</td> <td colspan="0" rowspan="2">H2 Child 1</td> <td colspan="4" rowspan="1">H2 Child 2</td> </tr> <tr> <td colspan="0" rowspan="1">H2-C2-C1</td> <td colspan="0" rowspan="1">H2-C2-C2</td> <td colspan="0" rowspan="1">H2-C2-C3</td> <td colspan="0" rowspan="1">H2-C2-C4</td> </tr> </tbody></table>

JSON 元數據生成

這是存儲在$levels中的處理結果。 它是一個關聯數組。 可以使用$levels[0]訪問從0開始的每個級別。 在每個級別內都有另一個關聯數組,其中包含節點/ tr /表格單元格/標題。 每個標題節點都由 id 索引,即要獲得Heading 1 ,我們將使用$levels[0][1] 您可能會在下面看到生成和存儲的其他元數據(深度、子 ID 和子數):


[
    {
        "1":{
            "id":"1",
            "header":"Header 1",
            "parent_id":null,
            "order_number":"1",
            "child_count":2,
            "child_ids":[
                "4",
                "5"
            ],
            "depth":0
        },
        "2":{
            "id":"2",
            "header":"Header 2",
            "parent_id":null,
            "order_number":"1",
            "child_count":2,
            "child_ids":[
                "6",
                "7"
            ],
            "depth":0
        },
        "3":{
            "id":"3",
            "header":"Header 3",
            "parent_id":null,
            "order_number":"1",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":0
        }
    },
    {
        "4":{
            "id":"4",
            "header":"H1 Child 1",
            "parent_id":"1",
            "order_number":"1",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":1
        },
        "5":{
            "id":"5",
            "header":"H1 Child 2",
            "parent_id":"1",
            "order_number":"1",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":1
        },
        "6":{
            "id":"6",
            "header":"H2 Child 1",
            "parent_id":"2",
            "order_number":"1",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":1
        },
        "7":{
            "id":"7",
            "header":"H2 Child 2",
            "parent_id":"2",
            "order_number":"1",
            "child_count":4,
            "child_ids":[
                "12",
                "13",
                "14",
                "15"
            ],
            "depth":1
        }
    },
    {
        "12":{
            "id":"12",
            "header":"H2-C2-C1",
            "parent_id":"7",
            "order_number":"1",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":2
        },
        "13":{
            "id":"13",
            "header":"H2-C2-C2",
            "parent_id":"7",
            "order_number":"2",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":2
        },
        "14":{
            "id":"14",
            "header":"H2-C2-C3",
            "parent_id":"7",
            "order_number":"3",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":2
        },
        "15":{
            "id":"15",
            "header":"H2-C2-C4",
            "parent_id":"7",
            "order_number":"4",
            "child_count":0,
            "child_ids":[
                
            ],
            "depth":2
        }
    }
]

更新 1:獲取沒有子節點的節點

以下 function 遍歷levels提取沒有子節點的節點

function getNodesWithNoChildren($levels){
   $nodesWithNoChildren = [];
   foreach($levels as $level => $nodes){
      foreach($nodes as $node){
          if($node['child_count']==0){
               $nodesWithNoChildren[]=$node;
          }
      }
   }
   return $nodesWithNoChildren;
}

$nodeNamesWithNoChildren =  array_map(function($node){
  return $node["header"];
}, getNodesWithNoChildren($levels));

echo implode(", ",$nodeNamesWithNoChildren);

Output

Header 3, H1 Child 1, H1 Child 2, H2 Child 1, H2-C2-C1, H2-C2-C2, H2-C2-C3, H2-C2-C4

更新 2:獲取沒有子節點的節點(從左到右)

function getLeftToRightNodesWithoutChildren($startNode,$levels){
    $nodesWithNoChildren = [];
    if($startNode == null){
        foreach($levels[0] as $headerNode){
            $subNodes = getLeftToRightNodesWithoutChildren($headerNode,$levels);
            foreach($subNodes as $node){
                $nodesWithNoChildren[]=$node;
            }
        }
    }else{
        if($startNode['child_count']==0){
            $nodesWithNoChildren[]=$startNode;
        }
        foreach($startNode['child_ids'] as $childId){
            $childNode = $levels[$startNode["depth"]+1][$childId];
            $subNodes = getLeftToRightNodesWithoutChildren($childNode,$levels);
            foreach($subNodes as $node){
                $nodesWithNoChildren[]=$node;
            }
        }
    }
    return $nodesWithNoChildren;

}

$nodeNamesWithNoChildren =  array_map(function($node){
  return $node["header"];
}, getLeftToRightNodesWithoutChildren(null,$levels));

echo implode(", ",$nodeNamesWithNoChildren);

Output

H1 Child 1, H1 Child 2, H2 Child 1, H2-C2-C1, H2-C2-C2, H2-C2-C3, H2-C2-C4, Header 3

獲取“包含最低孩子 ID 的數組”

$lowest_child = array_map(function($node){
  return $node["id"];
}, getLeftToRightNodesWithoutChildren(null,$levels));

echo implode(", ",$lowest_child);

Output

4, 5, 6, 12, 13, 14, 15, 3

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM