如何在表中保存Foreach中的数据并在popover中显示相同的数据(Jquery)

时间:2016-04-26 08:42:20

标签: php jquery codeigniter popover

我有一个问题..我正在使用codeigniter并在表格中有foreach循环这是正常的事情..但我想将DATA保存在表格中并在popover上显示.. ??我怎么能这样做?



<?php if(isset($data)) { ?>
<?php foreach($data as $key) {?>
<tr>
  <th scope="row">
    <?php echo $key->id ?></th>
  <th scope="row" name="nasip">
    <?php echo $key->nasname ?></th>
  <th scope="row">
    <?php echo $key->shortname ?></th>
  <th scope="row">
    <?php echo $key->type ?></th>
  <th scope="row">
    <?php echo $key->ports ?></th>
  <th scope="row">
    <?php echo $key->secret ?></th>
  <th scope="row">
    <?php echo $key->server ?></th>
  <th scope="row">
    <?php echo $key->community ?></th>
  <th scope="row">
    <?php echo $key->description ?></th>
  <th scope="row"><a data-toggle="modal" data-target=".bs-example-modal-sm" id="delete" class="btn btn-danger active" role="button">Delete</a>
  </th>
  <th scope="row"><a data-toggle="modal" data-target="#exampleModal" href="" class="btn btn-success active" id="edit" role="button">Edit Nas</a>
  </th>


</tr>

<?php }?>
<?php }else{ echo "<div>NO DATA !</div>"; } ?>

<!-- Section Edit Page -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">Update Nas Info</h4>
      </div>
      <div class="modal-body">
        <form id="form_id">
          <div class="form-group">
            <label for="recipient-name" class="control-label">NAS IP</label>
            <input type="text" class="form-control" id="nasname" value="<?php echo $key->nasname ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Shortname:</label>
            <input type="text" class="form-control" id="shortname" value="<?php echo $key->shortname ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Type:</label>
            <input type="text" class="form-control" id="type" value="<?php echo $key->type ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Ports:</label>
            <input type="text" class="form-control" id="ports" value="<?php echo $key->ports ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Secret:</label>
            <input type="text" class="form-control" id="secret" value="<?php echo $key->secret ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Server:</label>
            <input type="text" class="form-control" id="server" value="<?php echo $key->server ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Community:</label>
            <input type="text" class="form-control" id="community" value="<?php echo $key->community ?>">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Description:</label>
            <input type="text" class="form-control" id="description" value="<?php echo $key->description ?>">
          </div>

        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
&#13;
&#13;
&#13;

如果我使用这种方式,我无法更新或删除等...那么如何使用Jquery解决此问题?

非常感谢..

1 个答案:

答案 0 :(得分:0)

如果您的Query返回大约20或30个结果,那么在没有JQuery的情况下可以执行的操作的一个示例:为每个结果创建一个模态,然后显示用户选择的模式。如果你有很多结果,取决于你的服务器和客户端性能,这个解决方案不是最好的方法,因为执行时间和超时风险很高:

<?php 
$table = "<table>";
$modals = "";
if(isset($data)) {
    foreach($data as $key) {
        $table .=  '
<tr>
  <th scope="row">
    '.$key->id.'</th>
  <th scope="row" name="nasip">
    '.$key->nasname.'</th>
  <th scope="row">
    '.$key->shortname.'</th>
  <th scope="row">
    '.$key->type.'</th>
  <th scope="row">
    '.$key->ports.'</th>
  <th scope="row">
    '.$key->secret.'</th>
  <th scope="row">
    '.$key->server.'</th>
  <th scope="row">
    '.$key->community.'</th>
  <th scope="row">
    '.$key->description.'</th>
  <th scope="row"><a data-toggle="modal" data-target=".bs-example-modal-sm" id="delete" class="btn btn-danger active" role="button">Delete</a>
  </th>
  <th scope="row"><a data-toggle="modal" data-target="#edit'.$key->id.'" href="" class="btn btn-success active" id="edit" role="button">Edit Nas</a>
  </th>
</tr>';
        $modals .= '
<div class="modal fade" id="#edit'.$key->id.'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">Update Nas Info</h4>
      </div>
      <div class="modal-body">
        <form id="form_id">
          <div class="form-group">
            <label for="recipient-name" class="control-label">NAS IP</label>
            <input type="text" class="form-control" id="nasname" value="'.$key->nasname.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Shortname:</label>
            <input type="text" class="form-control" id="shortname" value="'.$key->shortname.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Type:</label>
            <input type="text" class="form-control" id="type" value="'.$key->type.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Ports:</label>
            <input type="text" class="form-control" id="ports" value="'.$key->ports.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Secret:</label>
            <input type="text" class="form-control" id="secret" value="'.$key->secret.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Server:</label>
            <input type="text" class="form-control" id="server" value="'.$key->server.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Community:</label>
            <input type="text" class="form-control" id="community" value="'.$key->community.'">
          </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Description:</label>
            <input type="text" class="form-control" id="description" value="'.$key->description.'">
          </div>
        </form>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>
        ';
    }
    $table .= "</table>";
}
else {
    echo "<div>NO DATA !</div>";
}

?>