Question

我正在寻找使用PHP和MySQL以及jQuery创建“多页面导航系统”。

理想情况下，我想要的是一个项目列表，例如：

* Item 1
* Item 2
* Item 3

在Item 1内，还有3个其他子类别，Item 2内有2个子类别，其中2个子类别还有3个子类别

所以我真正想要的是以下内容：

1) when i click on 'Item 2` is displays the 2 subcategories
2) when I click on one of these subcategories it displays the 3 others

理想情况下，我想在使用AJAX时这样做，因为我希望这是在jQuery UI对话框中。

我有两张桌子：

category
id | title
----------
 1 | item 1
 2 | item 2
 3 | item 3

subcategory (simplified)
id | cat_id | parent_id | title
-------------------------------
 1 |   1    |  0        | subcat1
 2 |   1    |  0        | subcat2 
 3 |   1    |  1        | subcat1_subcat1
 4 |   1    |  1        | subcat1_subcat2
 5 |   1    |  1        | subcat1_subcat3

我的主要问题是如何做到这一点？

我真的不想拥有包含所有数据的大数组，因为它可能会有更多的类别和子类别。

有没有人知道什么是最好的解决方案呢？

由于

Answer 1

将它全部存储在数组中有什么问题？除非你计划在这些菜单项中有成千上万的元素（这将是非常用户友好的），所以它只是在公园散步PHP。

此外，您可能希望更具体地了解您的要求。它是jQuery，PHP还是两者兼而有之？你需要代码还是概念？

编辑：解决方案

因此，基于您列出的评论，这是一个概念证明。

<强> PHP ：您需要从数据库中读取并将它们加载到数组中。这对PDO来说很容易。只需使用fetchAll()命令并在关联数组中检索整个结果集。棘手的部分变成了将“扁平”DB转换为多维数组。这是：

// Retrieve the details from the database in the $rows associative array
...

// Now, we need to expand the 'flat' DB structure into a multi-
// dimensional array.
$multid=findKids($rows);

// Send it back, JSON-encoded
die(json_encode(
    'result'   => 'success',
    'response' => $multid
)); // Send the response back via AJAX

/**
 * Here's the function that converts the flat DB into a multi-
 * dimensional array. It tracks all the parents in a single
 * array and collects the kids for those parents. If it comes
 * across a new parent, if fetches all the kids recursively.
 */
function findKids( $rows, $parentid=NULL, &$parents=NULL ) {
    // Create a temporary array for the kids
    $shelter;

    // Go through all the rows
    foreach($rows as $index => $row) {
        // Find the kids that belong to this parent
        if($row['parentid']==$parentid) {
            // This kid belongs to this parent
            // Move it to the temporary shelter
            $shelter[$parentid][]=$row;
        }
        else {
            // This kid doesn't belong to this parent.
            // Have we already talked to the parent before?
            if(isset($parents[$row['parentid']])) {
                // Yes, the parent has already been visited. Ignore
            }
            else {
                // Parent hasn't been visited; add it
                $shelter[$row['parentid']][]=findKids($rows,$row['parentid'],$parents);
            }
        } // close else{ }      
    } // close foreach{ }

    // Return the shelter, with all the kids
    return $shelter;
}

返回的数组将包含如下响应：

$response=[
    'result'=>'success',
    'response'=>[
        0=>[ // Contains the kids for $parentid=0
            ['id'=>1, 'cat_id'=>1, 'parent_id'=>0],
            ['id'=>2, 'cat_id'=>1, 'parent_id'=>0]
           ],
        1=>[ // Contains the kids for $parentid=1
            ['id'=>3, 'cat_id'=>1, 'parent_id'=>1],
            ['id'=>4, 'cat_id'=>1, 'parent_id'=>1],
            ['id'=>5, 'cat_id'=>1, 'parent_id'=>1]
           ],
     ]
];

jQuery ：您将解释JSON响应并迭代响应以动态创建菜单。

这是一个示例脚本，它将数组显示为嵌套的无序列表。

// Call the printMyFamily method on the element to display
// that you'd like to see the menu appear in
$outputElem.html($.printMyFamily(NULL,response['response']));

$.printMyFamily = function(parentid,haystack){
    // Our output variable
    output="<ul>";

    // Find the kids
    $haystack.each(function(index,elem){
        // Is this kid ours?
        if(elem[parentid] == parentid){
            // Yes. Add to output
            output+="<li id='"+elem['id']+"'>"+elem['catid']+"</li>";

            // Find this items kids (if any)
            output+=$.printMyFamily(elem['id'],haystack);
        }
        else { /* not ours, ignore */ }
    });

    // Is the result an empty string? If so, just clear it
    if(output=="<ul>"){ output=""; }

    // Return the output
    return output;
};

多页面导航和AJAX

1 个答案:

编辑：解决方案