1

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

理想的には、これをjQuery UIダイアログにしたいので、AJAXを使用してこれを行いたいと思います。

私は2つのテーブルを持っています:

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

私の主な問題は、これをどのように行うかです。

より多くのカテゴリとサブカテゴリを持つ可能性があるため、すべてのデータを含む大きな配列を実際には持ちたくありません。

これについての最善の解決策は何か考えがありますか?

ありがとう

4

1 に答える 1

0

すべてを配列に格納することの何が問題になっていますか? これらのメニュー項目に何千もの要素を含めることを計画していない限り (これは信じられないほどユーザーフレンドリーではありません)、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;
};
于 2013-04-08T15:47:09.137 に答える