通过 php 在 bootstrap 模式中编辑数据

Question

我显示了一个基本的 bootstrap-table。当我点击一个单元格时，我想要一个模式来打开该行的 deviceId，以及“功能”单元格的结果。如果“功能”单元格中没有任何内容，模式仍会加载并允许我为该单元格输入数据。一旦模式打开，我想编辑然后保存数据，或者取消。我已经查看了此论坛上提出的其他几个问题，但 none 似乎找到了答案。模态加载，但那里没有可编辑的数据。通过 php 返回正确的数据（我可以在 Firefox 的控制台中看到这一点），但没有显示任何内容。

这是我的 table:

<div class="container">
        <div class="row-fluid">
        
            <div class="col-xs-6">
                <div class="table-responsive">
            
                <table class="table table-responsive table-striped" 
                    id="scandata"
                    sortName="deviceId"
                    sortOrder="desc"
                    data-toggle="table"
                    data-detail-view="true"
                    data-detail-formatter="detailFormatter"
                    data-filter-control="true"
                    data-pagination="true">
                    <thead class="table-dark">
                    <tr>
                        <th data-name="deviceId" data-field="deviceId" data-visible="false">ID</th>
                        <th data-name="hostname" data-field="hostname_id" data-sortable="true" data-filter-control="input" data-align="center">Hostname</th>
                        <th data-name="ipAddr" data-field="ip_id" data-sortable="true" data-filter-control="input" data-align="center">IP</th>
                        <th data-name="macAddr_id" data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-align="center">Mac Address</th>               
                        <th data-name="openPorts" data-field="openPorts" data-sortable="true" data-filter-control="input" data-align="center">Open Ports</th>               
                        <th data-name="network" data-field="network" data-sortable="true" data-filter-control="input" data-align="center">Network</th>               
                        <th data-name="status" data-field="status" data-sortable="true" data-filter-control="input" data-align="center">Status</th>               
                        <th data-name="functionData" data-field="functionData" data-sortable="true" data-filter-control="input" data-align="center">Function</th> 
              
                    </tr>
                    </thead>
                    <tbody>
                <?php
                    while($row = $result->fetch_assoc()) {  ?>
                            
                        <tr>

                        <td><?php echo $row["deviceId"]; ?></a></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["hostname"]; ?></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo long2ip($row["ip"]); ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["macAddr"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["openPorts"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["network"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["status"]; ?></td>
                        <!-- <td><a href="" data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["functionData"]; ?></a></td> -->
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["functionData"]; ?></td>
                    
                        </tr>

                <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>

还有我的模态：

<div class="modal fade drop-shadow" id="myModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Function</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button> 
                <!-- <h4 class="modal-title">Notification</h4>                                                              -->
            </div> 
            <div class="modal-body">
                <form action="update.php" id="save-form">
                    <div class="col-md-10 m-auto">
                        <div class="form group">
                            <label for="functionData"></label>
                            <input class="form-control" type="text" name="functionData" id="functionData">
                            <!-- <input class="modalTextinput form-control" type="text" name="deviceId" id="deviceId" > -->
                        </div>
                    </div>  
                </div> 
                <div class="modal-footer">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cancel</button>    -->
                    <button type="button" id="save-btn" class="btn btn-primary">Save Changes</button>                               
                                
                </div>
            </form>
        </div>                                                                       
    </div>  
</div>

这是我的 jquery 加载模式，确实如此。问题是它不加载单元格数据。

$('#scandata').on('click-cell.bs.table', function (field, value, row, $el) {
  if ( value == "functionData") {
 
    // alert($el.deviceId+"-"+$el.functionData);
    let deviceId = $el.deviceId;
    let functionData = $el.functionData;
    $.ajax({
      url: 'getFunctionData.php',
      type: 'post',
      data: {deviceId: deviceId, functionData:functionData},
      success: function(response){ 
        // Add response in modal body
        $('.functionData').val(response.functionData);
        $('#myModal').modal('show'); 
      }
    });
  }
});

还有我的getFunctionData.php：

if ( $stmt = $connection->prepare($functionQuery)) {
    $stmt->bind_param("i", $deviceId);
    $stmt->execute();
    $stmt->bind_result($functionData);
}

echo json_encode($functionData);

Answer 1

您的输入字段具有 id="functionData"，但您尝试使用不存在的 class 来寻址输入字段。将 $('.functionData') 更改为 $('#functionData').

$('.functionData').val(...) 用于 classes <input class="functionData" ...

$('#functionData').val(...) 用于 id 的 <input id="functionData" ...

通过 php 在 bootstrap 模式中编辑数据

edit data in bootstrap modal via php

php

ajax

jquery

bootstrap-table

bootstrap-4