Bootstrap-table — изменение полей с модальным бутстрапом

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

<!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 для подключения к базе данных и добавления данных в таблицу. Моя идея состоит в том, что с помощью кнопки редактирования можно изменить эти поля из модального окна. После этого я хотел бы обновить базу данных.

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

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

Спасибо!


person ruzD    schedule 13.09.2016    source источник
comment
вы можете отображать данные, но не редактировать их и обновлять базу данных с отредактированными данными?   -  person boroboris    schedule 13.09.2016
comment
Да, проблема в этом. Я правильно показываю данные, но не могу редактировать и обновлять базу данных :(   -  person ruzD    schedule 13.09.2016
comment
вы хотите редактировать данные, отображаемые в таблице, в модальном окне, которое вы открываете, верно?   -  person boroboris    schedule 14.09.2016
comment
да это вопрос   -  person ruzD    schedule 14.09.2016


Ответы (2)


Способ попробовать сделать правильный. Что вам нужно сделать, так это щелкнуть ссылку «Изменить», найти ближайший 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
  });
});

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

person Suresh Dhanakotti    schedule 13.09.2016
comment
Спасибо за Ваш ответ. Я пытаюсь понять ваш код. - person ruzD; 14.09.2016
comment
Извините, но я плохо понимаю последнюю строчку. Что это значит? '#txtbox'? И как мне сделать ссылку с моей формой? - person ruzD; 14.09.2016
comment
Я изменил строку кода: $('#txtbox').val($(this).text()) на $('#txtbox').val(1) и не показывает 1. Я думаю это не работает нормально :( Также я пытался указать значение не каждое... но оно тоже не работает нормально. - person ruzD; 14.09.2016
comment
$('#textbox') - ваше текстовое поле в модальном окне. В вашем модальном окне у вас есть текстовое поле ‹input class=form-control type=text placeholder=Codi› ваш код должен быть $('#cod').val($(this).text()); - person Suresh Dhanakotti; 14.09.2016
comment
Это не работает. Этот код $('#cod')? Заполнитель (Codi) входного класса не является идентификатором или именем для идентификации Javascript, не так ли? Помимо этого я пробую простой код: $('.edit').click(function(){ $('#codi').val('1'); и тоже не работает. - person ruzD; 15.09.2016

Первый шаг - как-то определить строку. Я работаю предполагая, что $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 click для копирования значений из строк и заполнения модальных полей ввода правильными значениями:

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
  });
});

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

МОДАЛЬНЫЙ

<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();
?>

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

person boroboris    schedule 15.09.2016
comment
Большое спасибо! Я собираюсь пересмотреть ваш код и попробовать его. Спасибо еще раз :) - person ruzD; 16.09.2016
comment
нп. Если у вас есть вопросы по коду или что-то не так, пишите сюда, я проверю. - person boroboris; 16.09.2016
comment
Код не работает. Среда IDE обнаружила ошибку в команде continue. Часть этого я не понимаю в коде jquery :( - person ruzD; 19.09.2016
comment
Поскольку у меня нет всех данных и средств для тестирования этого кода, я написал его больше как идею того, как это решить. Но это требует небольшой отладки с реальными данными. Я обновил часть jquery с комментариями. оператор continue: w3schools.com/js/js_break.asp - person boroboris; 19.09.2016
comment
Для тестирования я комментирую все строки jquery на веб-странице и добавляю только это: $('#edit').click(function(){ alert(Это работает!); это не работает!Нет, он не показывает никаких сообщений :( - person ruzD; 19.09.2016
comment
Что означает эта строка: $([name=id]).val(row.attr(id));? - person ruzD; 19.09.2016
comment
Я думаю, что нашел проблему. Когда я нажимаю кнопку редактирования, функция javascript не работает. Я уверен, потому что я изменил все строки в функции, и только там есть предупреждение о записи (это работает), и если оно работает, когда я помещаю в кнопку событие onclick... но это не так - person ruzD; 19.09.2016
comment
Я думаю, что ошибка заключалась в том, что я поставил id=edit вместо class=edit (я изменил код jquery и index.php, чтобы отразить это). Я думаю, что эта строка осталась от чего-то, что я пробовал и забыл удалить. - person boroboris; 19.09.2016
comment
Это снова не работает. Я попробовал новый html-документ, и я поместил два текстовых поля, кнопку редактирования и модальное окно, чтобы показать данные текстовых полей, и он работает нормально! Я плохо понимаю, почему это не работает в документе index.php :( Что-то не так!? - person ruzD; 20.09.2016
comment
Вы создали таблицу со случайными данными и добавили кнопку редактирования или просто кнопку редактирования, чтобы открыть модальное окно? - person boroboris; 20.09.2016
comment
Я создал два текстовых поля с текстом: 1 и 2 после кнопки редактирования. Когда я нажимаю кнопку редактирования, появляются модальные окна с двумя новыми текстовыми полями с текстом: 1 и 2. - person ruzD; 20.09.2016
comment
в порядке. Спасибо. Поскольку я сейчас работаю, я еще раз взгляну на свой код сегодня вечером или завтра утром, исправлю ошибки и отредактирую ответ, чтобы отразить изменения. Из того, что я понял из ваших комментариев, ошибка, вероятно, связана с кодом jquery. - person boroboris; 20.09.2016
comment
В итоге проблему не нашел :( - person ruzD; 22.09.2016