Bootstrap-table：如何在带有 getSelected 的表中显示模式窗口数据答案

【问题标题】：Bootstrap-table: How to show in modal window data from table with getSelectedBootstrap-table：如何在带有 getSelected 的表中显示模式窗口数据
【发布时间】：2016-10-05 15:31:55
【问题描述】：

我正在使用 bootstrap 和 bootstrap-table，我想在模态窗口中显示所选项目的数据。我得到所选项目的信息：

我的js：

var $table = $('#tableprod'),
            $button = $('#button');

            $(function () {
                $button.click(function () {
                    alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
                });
            });

这是有效的，但现在 getSelection 显示我的这个信息：

getSelections: [{"_data":{},"seleccion":true,"_seleccion_data":{},"estado":"<span class=\"btn btn-xs glyphicon glyphicon-ok\" title=\"Activat\" style=\"background-color:YellowGreen; color:white;\"></span>","_estado_data":{},"edicion":"12","_edicion_data":{},"pagina":"6","_pagina_data":{},"codigo":"38","_codigo_data":{},"image":"<img class=\"img-rounded\" src=\"prod/images/00038.jpg\" width=\"50px\">","_image_data":{},"descripcion-cat":"Pizza Ristorante carbonara","_descripcion-cat_data":{},"descripcion-esp":"Pizza Ristorante carbonara","_descripcion-esp_data":{},"marca":"DR. OETKER","_marca_data":{},"gramaje":"340 g","_gramaje_data":{},"destacado":"","_destacado_data":{},"pvp-cat":"2,39","_pvp-cat_data":{},"pvp-lev":"2,39","_pvp-lev_data":{},"pvp-and":"2,39","_pvp-and_data":{},"pvp-cen":"2,39","_pvp-cen_data":{},"pvp-nor":"2,39","_pvp-nor_data":{},"pvp-vas":"2,39","_pvp-vas_data":{},"pvp-spar":"2,39","_pvp-spar_data":{},"user":"oscar.ruz","_user_data":{},"fecha-mod":"05/10/16","_fecha-mod_data":{},"edit":"<p data-placement=\"top\" data-toggle=\"tooltip\" title=\"Edit\"><button class=\"btn btn-xs edit btn-edit\" data-title=\"Edit\" data-toggle=\"modal\" data-target=\"#edit\"><i class=\"material-icons\" style=\"font-size: 20px\">edit</i> </button></p>","_edit_data":{}}]

我的表格和模态窗口代码 HTML：

  echo "<table class='table-bordered' id='tableprod'
                                   data-toggle='table'
                                   data-toolbar='#toolbar'
                                   data-show-refresh='true'
                                   data-show-toggle='true'
                                   data-sort-name='name'
                                   data-sort-order='desc'
                                   data-show-columns='true'
                                   data-pagination='true'
                                   data-search='true'>";
                                   // data-click-to-select='true'>";
                        echo "<thead class='thead-inverse'>";
                            echo "<tr>";  
                                echo "<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>";
                                echo "<th data-field='estado' data-switchable='false'></th>"; 
                                echo "<th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>";   
                                echo "<th data-field='pagina' data-sortable='true'>PÀGINA</th>";  
                                echo "<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>";  
                                echo "<th data-field='image' data-switchable='false'>IMATGE</th>";
                                echo "<th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th>"; 
                                echo "<th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th>"; 
                                echo "<th data-field='marca' data-sortable='true'>MARCA</th>"; 
                                echo "<th data-field='gramaje' data-sortable='true'>GRAMATJE</th>"; 
                                echo "<th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th>"; 
                                echo "<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>"; 
                                echo "<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>"; 
                                echo "<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>"; 
                                echo "<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>"; 
                                echo "<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>"; 
                                echo "<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>"; 
                                echo "<th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th>"; 
                                echo "<th data-field='user' data-sortable='true' data-visible='false'>USER</th>"; 
                                echo "<th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th>";
                                echo "<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>";
                            echo "</tr>"; 
                        echo "</thead>"; 
                        echo "<tbody>";
                    while ($row = pg_fetch_row($result)){   
                            // echo $estado = EstadoColorRow($row[14]);  
                            echo "<tr>";
                                echo "<td></td>";
                                echo $estado = EstadoIcon($row[2]); 
                                echo "<td name='edicion'>$row[1]</td>";
                                echo "<td name='pagina'>$row[3]</td>"; 
                                echo "<td name='codigo'>$row[0]</td>";  
                                echo $imatge = AddImage($row[9]); 
                                echo "<td name='descripcion-cat'>$row[5]</td>"; 
                                echo "<td name='descripcion-esp'>$row[4]</td>"; 
                                echo "<td name='marca'>$row[6]</td>"; 
                                echo "<td name='gramaje'>$row[7]</td>"; 
                                echo "<td name='destacado'>$row[8]</td>"; 
                                echo "<td name='pvp-cat'>$row[10]</td>";
                                echo "<td name='pvp-lev'>$row[11]</td>";    
                                echo "<td name='pvp-and'>$row[12]</td>";  
                                echo "<td name='pvp-cen'>$row[13]</td>";  
                                echo "<td name='pvp-nor'>$row[14]</td>";  
                                echo "<td name='pvp-vas'>$row[15]</td>"; 
                                echo "<td name='pvp-spar'>$row[16]</td>";
                                echo "<td name='user'>$row[17]</td>";
                                echo "<td name='fecha-mod'>$row[18]</td>"; 
                                echo "<td>"?><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-xs edit btn-edit' data-title='Edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></p></td>
                            </tr>  
                    <?php }  ?>
                        </tbody>
                    </table> 

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                    <h4 class="modal-title custom_align" id="Heading">EDITAR REGISTRE</h4>
            </div>
            <form action="/store.php">
                <div class="modal-body">
                        <input type="hidden" name="id" type="text"> <!-- hidden input for id -->
                        <div class="form-group">
                            CODI<input class="form-control" name="codigo" type="text" placeholder="Codi">
                        </div>
                        <div class="form-group">
                            EDICIÓ<input class="form-control" name="edicion" type="text" placeholder="Codi">
                        </div>
                        <div class="form-group">
                            PÀGINA<input class="form-control" name="pagina" type="text" placeholder="Pàgina">
                        </div>
                        <div class="form-group">
                            DESCRIPCIÓ CAT<input class="form-control" name="descripcion-cat" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            DESCRIPCIÓ ESP<input class="form-control" name="descripcion-esp" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            MARCA<input class="form-control" name="marca" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            GRAMATGE<input class="form-control" name="gramaje" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            DESTACAT<input class="form-control" name="destacado" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            IMATGE<input class="form-control" name="imagen" type="text" placeholder="Descripció">
                        </div>
                        <div class="form-group">
                            PVP-CAT<input class="form-control" name="pvp-cat" type="text" placeholder="pvp-cat">
                        </div>
                        <div class="form-group">
                            PVP-LEV<input class="form-control" name="pvp-lev" type="text" placeholder="pvp-lev">
                        </div>
                        <div class="form-group">
                            PVP-AND<input class="form-control" name="pvp-and" type="text" placeholder="pvp-and">
                        </div>
                        <div class="form-group">
                            PVP-CEN<input class="form-control" name="pvp-cen" type="text" placeholder="pvp-cen">
                        </div>
                        <div class="form-group">
                            PVP-NOR<input class="form-control" name="pvp-nor" type="text" placeholder="pvp-nor">
                        </div>
                        <div class="form-group">
                            PVP-VAS<input class="form-control" name="pvp-vas" type="text" placeholder="pvp-vas">
                        </div>
                        <div class="form-group">
                            PVP-SPAR<input class="form-control" name="pvp-spar" type="text" placeholder="pvp-vas">
                        </div>
                </div>

                <div class="modal-footer ">
                    <input type="submit" class="btn btn-group btn-default" style="width: 100%;" value="UPDATE">
                </div>
            </form>
        </div>
    </div> 
</div>

如何恢复信息（getSelected）以在模态窗口中使用？还是有其他方法？

【问题讨论】：

当它启动事件时，我不知道恢复信息以显示在模式窗口中。我已经创建了一个示例来显示表格的行，但标识符在但在我的情况下，我启动以单击编辑按钮。我更新了代码以添加表格定义。

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

我想你会想从表格中选择一行并将其数据填充到模式中包含的表单中。

首先您需要找到选定的$row，然后找到所有<td> 元素，然后您将能够获取行值并将它们设置为this demo 的形式。

【讨论】：

好吧，我不明白。价值是什么意思？在这一行 $.each($tdata, function(index, value) {
value 是集合 $tdata 中的元素，在这种情况下 value 是元素。你可以看看api.jquery.com/jquery.each
非常有趣，感谢您提供的信息 :) 您可以解释一下 jquery 如何在 modal-windos 中显示信息？我见过： $("input:eq(" + index + ")").val($(this).text());但是如何引用 modal-window 我看不到模态窗口的 id 或其他东西在哪里。
我正在我的代码中调整你的示例，但我看到事件点击没有启动，我打开了浏览器的控制台，它没有显示任何内容。
我已经看到问题可能是变量没有得到值。（行...）