我想上面的主和子系统使用PHP,MYSQL &JQuery .
我附上示例图像链接下面见截图
Product Quantity and UOM是属于主表和的字段代码,部件,类别,数量(也)&UOM(副本)属于子表。
我想添加代码,组件,类别,数量等多次每当用户点击添加。只需要知道我如何保存所有这些多个记录时,有人完成了他们的作品,并点击最终保存按钮?
我真的非常积极地寻找这个问题,但没有得到任何答案。
如果有人能找到方法或任何帮助或任何东西,将帮助我对这个系统。
Thanks a lots, please please Help
你会想使用
jQuery ajax保存数据
.clone()要在UI中添加一条记录,你必须重置值。
你应该开始了
每次用户单击'add'时,您都希望获取表单输入的值,构建一个新的表行并显示其所选值。这很简单,但是您还需要添加隐藏的输入,这些输入表示用户在上面的选择框中选择的内容,这样当用户单击save时,整个表单将被发布,您可以处理输入。一个简单的例子是:
<script>
var count = 0;
$('#add').click(function(event)
{
var code = $('#code').val(),
component = $('#component').val()
category = $('#category').val(),
uom = $('#uom').val();
$('#table').append(
'<tr>'
+ '<td>' + code + '<input type="hidden" name="record[' + count + '][code]"></td>'
+ '<td>' + component + '<input type="hidden" name="record[' + count + '][component]"></td>'
+ '<td>' + category + '<input type="hidden" name="record[' + count + '][category]"></td>'
+ '<td>' + uom + '<input type="hidden" name="record[' + count + '][uom]"></td>'
+ '</tr>'
);
/*
EDIT: I changed this to a DECREMENTOR so our keys don't overlap and override
anything that is CURRENTLY in the database
*/
count --;
})
</script>
这将为添加按钮附加一个单击处理程序。每次点击它,我们都会获得输入的值,将它们存储在一个变量中,并在下面的"预览表"中添加一个新的表行,显示他们选择的值并创建隐藏的输入,这些输入可以在用户单击Save后稍后处理。
关于这个的一些注意事项:-它只获得所选输入的值(因此对于选择框,option
的value
而不是文本)。您需要做一些额外的工作来将它替换到表行中。-你的整个表将被封装在一个<form>
标签,你的save
按钮也必须在里面。
一旦你得到了发布的数据到服务器,做一个print_r($_POST)
看看它是什么样子,你应该能够弄清楚如何处理它相当容易。
编辑好吧,你在这里问了很多问题,我会尽我所能地解决它们,而不是写小说。
如果有人错误地点击了添加,想要取消添加(或改变主意,无论如何)。
这其实并不难。如果发生这种情况,只需使用$.remove从表中删除附加的表行。由于所有隐藏的input
元素都包含在表行中,因此它们也将从表单中删除,因此当用户发布时,字段将不存在。您应该如何对数据进行消毒?
在用户单击add
时(在填充表单时)清理数据,而不是在之后(在发布表单之前)清理数据。当用户点击添加时处理输入错误要比点击保存时处理输入错误要容易得多。如果要修改数据库中的现有记录,如何使用此方法?
有几种不同的方法可以解决这个问题。最简单的方法是为数据库中的每个现有行预先填充表单,并为表行上的记录添加id
(假设对每一行都有一个自动递增的主键)输入值。这样,当您处理表单时,您将能够通过检查发布数据中的id
是否存在并验证它是否存在于数据库中来查看它是否是一个现有的记录。如果它没有id
键,你知道它是一个新记录,你需要做一个INSERT
,如果它有,你可以做一个UPDATE
或留下这个记录。对于DELETED
行,您需要在执行任何INSERT
之前循环遍历已发布的数据,并收集已发布的id
值,然后运行类似DELETE FROM table WHERE ID IN (<list of posted ids>)
的查询。这将删除用户删除的所有行,然后您可以再次遍历张贴数据并插入新行。
预填充该表的示例如下:
<?php
$query = "SELECT * FROM bill_items WHERE bill_id = 123";
$result = mysql_query($query);
$materials = array();
while ($row = mysql_fetch_assoc($query))
{
$materials []= $row;
}
?>
<? foreach ($materials as $material): ?>
<tr>
<td>
<?= $material['code']; ?>
<input type="hidden" name="record[<?= $material['id']; ?>][code]"
value="<?= $material['uom']; ?>">
</td>
<td>
<?= $material['component']; ?>
<input type="hidden" name="record[<?= $material['id']; ?>][component]"
value="<?= $material['uom']; ?>">
</td>
<td>
<?= $material['category'];
<input type="hidden" name="record[<?= $material['id']; ?>][category]"
value="<?= $material['uom']; ?>">
</td>
<td>
<?= $material['quantity']; ?>
<input type="hidden" name="record[<?= $material['id']; ?>][quantity]"
value="<?= $material['uom']; ?>">
</td>
<td>
<?= $material['uom']; ?>
<input type="hidden" name="record[<?= $material['id']; ?>][uom]"
value="<?= $material['uom']; ?>">
<input type="hidden" name="record[<?= material['id']; ?>][id]"
value="<?= $material['id']; ?>">
</td>
</tr>
<? endforeach; ?>
还有,一个注释。我改变了上面的javascript示例代码。我将count++
更改为count--
,因为当您使用数据库中当前的数据预填充表单时,您将在输入键中使用材料的id
。当用户添加新数据时,使用javascript(使用count++
)生成的键有可能与现有表数据发生冲突。为了纠正这个问题,我们将其更改为count--
。这个键(在javascript中)真的不重要,它只是将我们的数据分组在一起,所以这里的负值不会影响任何东西。