首页 > 解决方案 > 如何使用 JQuery Repeater 和 php 显示数据库中的数据

问题描述

我一直在努力让 JQuery 中继器插件能够从数据库中获取数据。我已经完成了将数据插入数据库的工作,但我还没有检索插入的数据来编辑它。

这是我在 php 和 html 中的代码。

<div id="repeater">
            <div class="repeater-heading" align="left">
                <a role="button" class="btn btn-info repeater-add-btn" ><span class="glyphicon glyphicon-plus">&nbsp;</span>Add Transactional Impact</a>
            </div>

            <div class="clearfix"></div>
            <br>

            <div class="items" data-group="impacts">
                <div class="item-content">
                    <div class="form-group">
                        <?php                                   
                        $query_raw_num = "SELECT * FROM revenue_impact_number WHERE revenue_impact_id='".$id."' ";
                        $results = $mysqli->query($query_raw_num);

                        while($impacts = $results->fetch_assoc()){
                        ?>
                        <div class="row" data-repeater-item>
                            <div class="col-md-2">
                                <label>Region:</label>
                                <select data-skip-name="true" data-name="region_id[]" id="region_id" class="form-control">
                                    <option value="">-- Select --</option>
                                    <?php                                   
                                    $query_raw = "SELECT regions_id, regions_name FROM regions ";
                                    $result = $mysqli->query($query_raw);

                                    while($row = $result->fetch_assoc()){
                                    ?>              
                                    <option value="<?php echo $row['regions_id']; ?>" <?php echo ($row['regions_id']==$impacts['region_id'] ? 'selected' : ''); ?> ><?php echo $row['regions_name']; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Product:</label>
                                <select data-skip-name="true" data-name="product_id[]" id="product_id" class="form-control">
                                    <option value="">-- Select --</option>
                                    <?php                                   
                                    $query_raw_products = "SELECT product_id, product_name FROM products ";
                                    $result_products = $mysqli->query($query_raw_products);

                                    while($products = $result_products->fetch_assoc()){
                                    ?>              
                                    <option value="<?php echo $products['product_id']; ?>" <?php echo ($products['product_id']==$impacts['product_id'] ? 'selected' : ''); ?> ><?php echo $products['product_name']; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Impact:</label>
                                <input type="text" data-skip-name="true" data-name="impact_number[]" id="impact" value="<?php echo $impacts['impact_number'];?>" class="form-control" style="width:200px;"/>
                            </div>
                            <div class="col-md-2">
                                <label>Expected:</label>
                                <input type="text" data-skip-name="true" data-name="expected[]" id="expected" value="<?php echo $impacts['expected'];?>" class="form-control" style="width:200px;"/>
                            </div>

                            <div class="col-md-2" style="margin-top:24px;" align="center">
                                <a id="remove-btn" role="button" onclick="$(this).parents('.item-content').remove()" class="btn btn-danger" ><span class="glyphicon glyphicon-trash">&nbsp;</span>Remove</a>
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                </div>
            </div>

        </di>

这是我正在使用的脚本功能。

$(function(){
$('#repeater').createRepeater();

});

当页面第一次加载时,一切都显示成功。见下图

首次加载页面时数据显示正确

我遇到的问题是,当我尝试添加新的字段组时,它会再次显示整个组,当我单击删除按钮时,它也会删除整个数据组。见下图。

添加整个数据组

标签: phpjqueryhtmlmysqlijquery.repeater

解决方案


在编辑时检索现有数据时,中继器代码存在问题。在“repeater.js”文件中的以下行注释

    /*
    if (key == 0) {
        items.remove();
        addItem(newItem, key);
    }
    */

推荐阅读