2016-10-05 4 views
1

私はブートストラップとブートストラップテーブルを使用しています。選択したアイテムのデータをモーダルウィンドウに表示したいとします。ブートストラップテーブル:getSelectedを使用してテーブルからモーダルウィンドウのデータを表示する方法

マイ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> 

modal-windで使用する情報(getSelected)を復元する方法ああ?または別の方法がありますか?

+0

イベントを起動すると、モーダルウィンドウで表示する情報を回復することはわかりません。私はテーブルの行を表示する例を設立しましたが、識別子はですが、私の場合はedit button.iをクリックして起動し、テーブル定義を追加するコードを更新しました。 – ruzD

答えて

0

テーブルから行を選択し、そのデータをモーダルに含まれるフォームに取り込みたいとします。

まず、選択した$rowを見つけて、<td>の要素をすべて見つけて、行の値を取得し、this demoの形式で設定する必要があります。

+0

オク、私はそれをundestand。それは価値を意味しますか?この行の$ .each($ tdata、function(index、value){ – ruzD

+0

の値は、コレクション$ tdataの要素です。この場合、値は​​です)。http://api.jqueryを見ることができます。 com/jquery.each/ – vincentluth

+0

非常に面白い、情報ありがとう:)私はモーダルウィンズの情報を表示するにはどのようにjqueryを説明することができますか? $( "input:eq(" + index + ")")。val($(this).text());モーダルウィンドウの参照にはどうしたらいいのでしょうか?モーダルウィンドウのIDや別のものはどこに見えませんか? – ruzD