2017-08-05 11 views
11

"modules"という名前のMongoDBコレクションからHTMLテーブルを作成しました。私は(チュートリアルで見つかった)使用私の接続のためにテーブルエントリをクリックして別のmongodbコレクション(php/jquery)で検索する方法

<tr> 
    <th scope="row">1 
    </th><td>Module A</td> 
    <td>18kg</td> 
    <td> 
     <a href="cid1">Component 1</a> 
     <a href="cid2">Component 2</a> 
     <a href="cid3">Component 3</a> 
     <a href="cid4">Component 4</a> 
     <a href="cid5">Component 5</a> 
    </td>  
    <td>blue</td> 
</tr> 

$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); 
$filter = []; 
$options = [ 
    'sort' => ['_id' => 1], 
]; 

$query = new MongoDB\Driver\Query($filter, $options); 
$cursor = $manager->executeQuery('workshop.modules', $query); 

ドキュメントマイHTML-行構造

{ 
    "_id" : ObjectId("59859f9bd5234d8d415eb0ca"), 
    "name" : "Module A", 
    "weight" : 18, 
    "components" : [ "cid1", "cid2","cid3", "cid4","cid5"], 
    "color" : "blue" 
} 

:マイドキュメントは次のようになります「コンポーネント」コレクションから:

{ 
    "_id" : ObjectId("5985ca81d5234d8d415eb421"), 
    "name" : "Component 2", 
    "weight" : 1, 
    "price" : 10, 
    "color" : "blue" 
} 

私が行う方法を知りません以下:

Klickこれらのコンポーネントのうちの1つに、たとえば「コンポーネント2」。このエントリ(コンポーネント名またはID)の「components」という名前の別のコレクションを検索し、このコンポーネントに関する情報を新しいウィンドウまたはポップアップで表示します。

これはPHP/jquery/mongodbでどのように実現できますか?

PS:必要に応じてJSON構造を変更/改善することもできます。

UPDATE:私のapp.phpソースコードイストここ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<!-- Required meta tags --> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<!-- Custom CSS for Table --> 
<link rel="stylesheet" type="text/css" href="app.css"> 
</head> 
<body> 
<?php 
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); 

$filter = []; 
$options = [ 
    'sort' => ['_id' => 1], 
]; 

$query = new MongoDB\Driver\Query($filter, $options); 
$cursor = $manager->executeQuery('workshop.modules', $query); 
?> 
    <div class="form-group pull-right"> 
     <input type="text" class="search form-control" placeholder="What you looking for?"> 
    </div> 
    <span class="counter pull-right"></span> 
    <table class='table table-striped results'> 
    <thead class="thead-inverse"> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Weight</th> 
      <th>Components</th> 
      <th>Color</th> 
     </tr> 
      <tr class="warning no-result"> 
     <td colspan="4"><i class="fa fa-warning"></i> No result</td> 
    </tr> 
    </thead> 
    <?php 
    $i=1; 
    foreach ($cursor as $document) { 
    ?> 
    <tr> 
     <th scope="row"><?php echo $i; ?></td> 
     <td><?php echo $document->name; ?></td> 
     <td><?php echo $document->weight; ?>kg</td> 
     <td> 
      <?php 
      $components = $document->components; 
      foreach($components as $component) { 
       echo "<a class='component' href=$component>".$component."</a> "; 
      } 
      ?> 
     </td>  
     <td><?php echo $document->color; ?></td> 
    </tr> 
    <?php $i++; 
    } 
    ?> 
    </table> 



    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <!-- Search function for table --> 
    <script type="text/javascript" src="tablesearch.js"></script> 
</body> 
</html> 

私は私のapp.phpで動作する実用的なソリューションを必要としています。もちろん、必要に応じてapp.phpを調整することもできます。ここで

答えて

0

は多くの可能なアプローチの一つだ:

componentsコレクションから文書を取得し、データを表示する別のPHPスクリプトを呼び出し、新しいウィンドウを対象リンク、コンポーネントのIDを渡します。例えば

、下記のファイルcomponent.php

<!DOCTYPE html> 
<html lang="en"> 
/* ... */ 
<?php 
$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); 

$filter = [ 
    '_id' => (string) $_GET['id'] 
]; 
$options = []; 

$query = new MongoDB\Driver\Query($filter, $options); 
$cursor = $manager->executeQuery('workshop.components', $query); 
$document = reset($cursor); // select first result 
?> 
/* DISPLAY COMPONENT DETAILS HERE */ 

app.php内にコンポーネントリンクのhrefを変更:

echo "<a class='component' href='component.php?id=$component'>".$component."</a>"; 
関連する問題