Bootstrap-table -使用bootstrap模式修改字段
Bootstrap-table -使用bootstrap模式修改字段
提问于 2016-09-13 20:14:19
我继续我的新网站，我正在尝试bootstrap框架，我想从bootstrap模式窗口修改行，它的字段。目前，我显示了一个带有字段的模式窗口，但我不知道如何包含表中行中的数据:(
<!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 © 2016 · All Rights Reserved · <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连接到数据库并将数据添加到表中。我的想法是从一个编辑按钮可以修改模式窗口中的字段。之后，我想更新数据库。
我不确定这是不是最好的方式，我没有在web环境下编程的经验。
请你能帮我从windows modal修改这个数据字段吗？
谢谢!
回答 2
Stack Overflow用户
发布于 2016-09-14 01:58:38
尝试这样做的方法是正确的。你要做的就是点击Edit链接，找到最近的tr，然后找到tr包含的所有td。逐一阅读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
});
});上面的代码将填充从row到modal窗口的所有值，然后您可以修改和提交表单。
Stack Overflow用户
发布于 2016-09-15 20:52:50
第一步-以某种方式识别行。我在假设$row是数据库中行的id的情况下使用。如果不是，则相应地更改代码。
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 event从行中复制值，并用正确的值填充模式输入字段：
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();
?>由于这需要更改大量代码，而且我没有时间和所有数据来正确测试它，所以您必须这样做，但这是您可以解决问题的方法之一。希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39469832
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号