2016-09-13 4 views
1

Я продолжаю работу с моим новым сайтом, и я пытаюсь создать фреймворк bootstrap, и я хотел бы изменить строку, ее поля, из модального окна загрузки. На данный момент я показать модальное окно с полями, но я не знаю, чтобы включить данные из строки таблицы :(Bootstrap-table - изменение полей с помощью bootstrap modal

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>AddCloud - Producció</title> 

    <!-- INCLUDES --> 

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css"> 
    <link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css"> 
    <script src="assets/jquery/jquery.min.js"></script> 
    <script src="assets/bootstrap/js/bootstrap.min.js"></script> 
    <script src="assets/bootstrap-table/dist/bootstrap-table.js"></script> 
    <script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script> 
</head> 

<body>  

     <!-- SESSION PHP OK --> 

    <?php 
     session_start(); 

     if(isset($_SESSION['username']) and $_SESSION['username'] <> ''){ 
    ?> 



     <!-- NAVIGATION --> 

     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
       <a class="navbar-brand" href="http://www.addvantage.es"><font color=#8abe44>AddCloud</font></a></div> 
      <div class="collapse navbar-collapse" id="defaultNavbar1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="edicions.php">Producció<span class="sr-only">(current)</span></a></li> 
       <li><a href="underconstruction.html">Menu2</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" 
       data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> <?php echo $_SESSION['username'] ?></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="underconstruction.html"><span class="glyphicon glyphicon-wrench"></span> preferències</a></li> 
        <li><a href="underconstruction.html"><span class="glyphicon glyphicon-lock"></span> canviar password</a></li> 
        <li class="divider"></li> 
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> log out</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </nav> 



     <!-- TABLE --> 

     <div class="container-fluid"> 
      <div class="row"> 
      <div class="col-md-6 col-md-offset-3"> 
       <h1 class="text-center">Miquel Alimentació</h1> 
      </div> 
      </div> 
      <hr> 
     </div> 
     <div class="container"> 
      <div class="row text-center"> 
      <div class="col-md-6 col-md-offset-3"><h3>Edició 12</h3></div> 
      </div> 
      <hr> 
      <div class="row"> 
      <?php 
        // Conexió a la base de dades 
        include("connect.php"); 
        $conn = Conectarse("localhost", "5432", "dbname", "dbuser", "dbpass"); 
        //query 
        $query = "SELECT * FROM produccion.ma_origen ORDER BY id_articulo ASC"; 
        $result = pg_query($conn, $query); 
        //se despliega el resultado 
        echo "<table 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 id='seleccion' data-switchable='false' data-checkbox='true'></th>"; 
           echo "<th data id='pagina' data-sortable='true'>pagina</th>"; 
           echo "<th data id='codigo' data-sortable='true' data-switchable='false'>codigo</th>"; 
           echo "<th data id='descripcion' data-sortable='true' data-switchable='false'>descripcion</th>"; 
           echo "<th data id='pvp-cat' data-sortable='true'>pvp-cat</th>"; 
           echo "<th data id='pvp-lev' data-sortable='true'>pvp-lev</th>"; 
           echo "<th data id='pvp-and' data-sortable='true'>pvp-and</th>"; 
           echo "<th data id='pvp-cen' data-sortable='true'>pvp-cen</th>"; 
           echo "<th data id='pvp-nor' data-sortable='true'>pvp-nor</th>"; 
           echo "<th data id='pvp-vas' data-sortable='true'>pvp-vas</th>"; 
           echo "<th data id='fecha-mod' data-sortable='true'>fecha-mod</th>"; 
           echo "<th data id='user' data-sortable='true' data-visible='false'>user</th>"; 
           echo "<th data id='edit' data-sortable='false' data-switchable='false'>edit</th>"; 
          echo "</tr>"; 
         echo "</thead>"; 
         echo "<tbody>"; 
        while ($row = pg_fetch_row($result)){ 
          echo "<tr>"; 
           echo "<td></td>"; 
           echo "<td>$row[2]></td>"; 
           echo "<td>$row[3]</td>"; 
           echo "<td>$row[4]</td>"; 
           echo "<td>$row[5]</td>"; 
           echo "<td>$row[6]</td>"; 
           echo "<td>$row[7]></td>"; 
           echo "<td>$row[8]</td>"; 
           echo "<td>$row[9]</td>"; 
           echo "<td>$row[10]</td>"; 
           echo "<td>$row[11]</td>"; 
           echo "<td>$row[12]</td>"; 
           echo "<td><p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' ><span class='glyphicon glyphicon-pencil'></span></button></p></td>"; 
          echo "</tr>"; 
        } 
         echo "</tbody>"; 
        echo "</table>"; 
       ?> 
      </div> 
      </div> 
      <hr> 
      <div class="row"> 
      <div class="text-center col-md-6 col-md-offset-3"> 
       <p>Copyright &copy; 2016 &middot; All Rights Reserved &middot; <a href="http://www.addvantage.es/" >http://www.addvantage.es</a></p> 
      </div> 
      </div> 
      <hr> 
     </div> 



     <!-- MODAL MENU --> 

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

        <div class="modal-body"> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="Pàgina"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="Codi"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="Descripció"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-cat"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-lev"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-and"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-cen"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-nor"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control " type="text" placeholder="pvp-vas"> 
         </div> 
        </div> 

        <div class="modal-footer "> 
         <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button> 
        </div> 
       </div> 
      </div> 
     </div> 


     <!-- SESSION PHP ERROR -->   
<?php 
    } else{ 
     ?><p>La sesión no está activa, por favor ingrese <a href="login.html">aquí</a></p> 
<?php 
    }?> 


</body> 
</html> 

Я использую PHP для подключения к базе данных и добавить данные в таблицу. Мою идею из этой кнопки можно изменить эти поля из модального окна.После этого я хотел бы обновить базу данных.

Я не уверен, что это лучший способ, у меня нет опыта программирования из веб-среды.

Пожалуйста, помогите мне изменить эти поля данных из окна modal?

Спасибо!

+0

Вы можете отображать данные, но не редактировать их и обновлять базу данных с помощью отредактированных данных? – boroboris

+0

Да, проблема в этом. Я правильно показываю данные, но я не могу редактировать и обновлять базу данных :( – ruzD

+0

вы хотите редактировать данные, отображаемые в таблице в модальном, который вы открываете, правильно? – boroboris

ответ

0

Способ попытаться сделать правильно. Что вам нужно сделать, это нажать ссылку «Изменить ссылку», найти ближайший tr и найти все td, которые содержат tr. Прочитайте td один за другим, назначив его в текстовое поле.

Ниже приведен код:

$('.edit').click(function(){ 
    var $row = $(this).closest("tr"), $tds = $row.find("td"); //This will all the tds we need. 
    $.each($tds, function() { 
    $('#txtbox').val($(this).text()); //textbox in the modal window 
    }); 
}); 

Приведенный выше код будет заполнить все значения из строки в модальное окно после того, что вы можете изменить и отправить форму.

+0

Спасибо за ваш ответ.Я пытаюсь понять ваш код. – ruzD

+0

Извините, но я не хорошо понимаю последнюю строку. Что это значит? '#txtbox'? И как я могу ссылаться на мою форму? – ruzD

+0

Я изменил строку кода: $ ('# txtbox'). Val ($ (this) .text()) по $ ('# txtbox'). Val ("1") и не показывает 1 Я думаю, что это не работает нормально :(И я попытался поставить значение напрямую не каждый ... но он тоже не работает. – ruzD

0

Первый шаг - определите строку как-то. Я работаю в предположении, что $ row [0] является идентификатором этой строки в базе данных. Если это не изменяет код соответственно.

index.php

while ($row = pg_fetch_row($result)){ 
    echo "<tr id="{$row[0]}">"; // assign id that corresponds to database id to each row 
     echo "<td></td>"; 
     echo "<td class="pagina">$row[2]></td>"; 
     echo "<td class="codigo">$row[3]</td>"; 
     echo "<td class="descripcion">$row[4]</td>"; 
     echo "<td class="pvp-cat">$row[5]</td>"; 
     echo "<td class="pvp-lev">$row[6]</td>"; 
     echo "<td class="pvp-and">$row[7]></td>"; 
     echo "<td class="pvp-cen">$row[8]</td>"; 
     echo "<td class="pvp-nor">$row[9]</td>"; 
     echo "<td class="pvp-vas">$row[10]</td>"; 
     echo "<td class="fecha-mod">$row[11]</td>"; 
     echo "<td class="user">$row[12]</td>"; 
     echo "<td> 
       <p data-placement='top' data-toggle='tooltip' title='Edit'> 
        <button class='edit' class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit'> 
         <span class='glyphicon glyphicon-pencil'></span> 
        </button> 
       </p> 
      </td>"; 
    echo "</tr>"; 
} 

Во-вторых, установить событие JQuery нажмите, чтобы скопировать значения из строк и заполнить модальные поля ввода с соответствующими значениями:

Jquery

$('.edit').click(function(){ 
    var row = $(this).closest("tr"), // edit button is in the same row as data you want to change 
     tds = row.find("td"); // get all table cells in that row 

    $.each(tds, function(index) { 
    if($.inArray(index, [0, 10, 11, 12])) { // indexes of cells not to be used when getting data from table cells to edit 
     return; // skip to next loop iteration if one of these indexes 
    } 

    var input_name = $(this).attr("class"); // get name of cell we are evaluating (pagina, codigo, descripcion etc) 

    $([name='"' + input_name + '"']).val($(this).text()); //input name in the modal window 
    }); 
}); 

Я изменил модальность, чтобы отразить изменения в коде выше.

MODAL

<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"> 
          <input class="form-control" name="pagina" type="text" placeholder="Pàgina"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="codigo" type="text" placeholder="Codi"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="descripcion" type="text" placeholder="Descripció"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-cat" type="text" placeholder="pvp-cat"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-lev" type="text" placeholder="pvp-lev"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-and" type="text" placeholder="pvp-and"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-cen" type="text" placeholder="pvp-cen"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-nor" type="text" placeholder="pvp-nor"> 
         </div> 
         <div class="form-group"> 
          <input class="form-control" name="pvp-vas" type="text" placeholder="pvp-vas"> 
         </div> 

       </div> 

       <div class="modal-footer "> 
        <input type="submit" class="btn btn-warning btn-lg" style="width: 100%;" value="Update"> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Файл для хранения отредактированных значений в базе данных:

store.php

<?php 
    $servername = "localhost"; 
    $username = "username"; 
    $password = "password"; 
    $dbname = "myDB"; 

    $conn = new mysqli($servername, $username, $password, $dbname); 

    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 

    $id = $_POST['id']; 
    $pagina = $_POST['pagina']; 
    $codigo = $_POST['codigo']; 
    $descripcion = $_POST['descripcion']; 
    $pvp-cat = $_POST['pvp-cat']; 
    $pvp-lev = $_POST['pvp-lev']; 
    $pvp-and = $_POST['pvp-and']; 
    $pvp-cen = $_POST['pvp-cen']; 
    $pvp-nor = $_POST['pvp-nor']; 
    $pvp-vas = $_POST['pvp-vas']; 

    $sql = "UPDATE produccion.ma_origen SET pagina='{$pagina}',codigo='{$codigo}',descripcion='{$descripcion}', 
       pvp-cat='{$pvp-cat}', pvp-lev='{$pvp-lev}',pvp-and='{$pvp-and}', 
       pvp-cen='{$pvp-cen}',pvp-nor='{$pvp-nor}',pvp-vas='{$pvp-vas}' 
       WHERE id={$id}"; 

    if ($conn->query($sql) === TRUE) { 
     echo "Record updated successfully"; 
    } else { 
     echo "Error updating record: " . $conn->error; 
    } 

    $conn->close(); 
?> 

Так как это было много кода, чтобы изменить и я у вас нет времени и всех данных, чтобы проверить это правильно, вам придется это сделать, но это один из как вы могли бы решить свою проблему. Надеюсь, поможет.

+0

Thaks is much! пересмотрите свой код и попробуйте его. s снова) – ruzD

+0

np. Если у вас есть вопрос относительно кода или что-то не так, напишите здесь, и я проверю его. – boroboris

+0

Код не работает. IDE обнаружит ошибку в команде. Часть этого я не понимаю код jquery :( – ruzD

Смежные вопросы