Bootstrap-table:如何使用getSelected显示来自表的模态窗口数据

时间:2016-10-05 15:31:56

标签: javascript jquery ajax twitter-bootstrap

我正在使用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 for table&amp;模态窗口:

  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)?还是有另一种方式?

1 个答案:

答案 0 :(得分:0)

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

首先,您需要找到所选的$row,然后找到所有<td>元素,然后您就可以获取行值,并在表格中设置this demo