php 使用codeigniter 3将一行数据转换为带两个参数的模态

qni6mghb  于 2022-10-30  发布在  PHP
关注(0)|答案(1)|浏览(116)

我和我的团队正在做一个项目,其中我们需要将变量传递给模态。我如何使用loan id作为参数,从我选择的表行将数据传递给模态?
例如:|贷款标识|姓名|观|--|--|--|小行星0964|查尔斯|按钮|小行星0562|最高电压|按钮
当您按下该特定行的按钮时,将显示一个模态,其中将加载该行的详细信息。
此外,模态还将具有所需的信息,但这些信息来自不同的数据库表,但参数是name而不是loan id
有没有办法做到这一点呢?我没有太多的经验,在jquery和 AJAX ,但我读到,这可能是一个解决我的问题。
下面是显示按钮和行信息的表视图。

<?php foreach($open_applications as $row): ?>
<tr>
    <td><?php echo $row->col_full_name; ?></strong><td>
    <td><?php echo $row->col_loan_assignid; ?></td>
    <td>
        <button class="btn btn-secondary btn-xs" data-bs-toggle="modal" data-bs-target="#loanDecision">Pending</button>
        <a href="<?php echo site_url('Users/borrowerdetails')?>" role="button" class="btn btn-link btn-xs">View</button>
    </td>
</tr>

下面是我的模态,它需要显示行中的信息和来自不同表的信息

<div class="modal fade" id="loanDecision" tabindex="-1" aria-labelledby="loanDecisionLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header border-0">
            <h5 class="modal-title" id="loanDecisionLabel">This would be where the name is from the row</h5><br>
        </div>

        <div class="modal-header">
            <h5 class="modal-title" id="loanDecisionSubtitle">this would be where the person's job is from the row</h5>
        </div>

        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-hover table-bordered">
                    <thead class="thead">
                        <tr>
                            <th scope="col">title of the column from a different table</th>
                            <th scope="col">title of the column from a different table</th>
                            <th scope="col">title of the column from a different table</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>

                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                            <td>data from the column from the different table</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

我已经创建了一个控制器和一个模型,但我不知道如何将它们连接到模态,但这里是我的控制器和模型:
公共函数fetchDetails($col_loan_assignid,$col_borrower_id){ $data ['获取贷款详细信息'] = $this-〉用户模型-〉获取贷款详细信息($col_loan_assignid);用户模型-〉获取活动详细信息($col_border_id);}

public function getingloandetails($col_loan_assignid){
    $sql = "select * from $this->tbl_loan_application where col_loan_assignid like '%$col_loan_assignid%'";
    $query = $this->db->query($sql);
    return $query->result();
}

public function getactiondetails($col_borrower_id){
    $sql = "select * from $this->tbl_action where col_loan_assignid like '%$col_borrower_id%'";
    $query = $this->db->query($sql);
    return $query->result();
}
bfhwhh0e

bfhwhh0e1#

第一步:在查看按钮中为数据属性设置唯一id。
示例data-loanid='".$row->loanid."'
第二步:为视图按钮添加一个公共类,并在其中添加事件监听器。
示例view-btn
第三步:添加事件监听器后,从其获取数据属性。这样就可以能够访问唯一的。

$(".view-btn").click(function(){
        let loan_id=$(this).data('loanid');
        console.log(loan_id);
    });

第四步:在获得唯一id后,so可以通过 AJAX 或fetch api发送请求。
第五步:在ci3上创建一个路由,验证控制器中的数据,将数据传递给模型,从数据库中获取数据,并返回响应。
获取API示例

let ApiRequest = async function(Url,param) {
        try {
            const url = Url;
            const options = {
                method: 'POST',
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: param,
                //body:field1=Value1&field2=value2
            }
            const response = await fetch(url, options);
            // response as json
           return await response.json();
        } catch (error) {
            console.error('Error:', error);
            return false;
        }
}

let url="http://www.example.com/api/getdata";
let parameter=field1=Value1&field2=value2;
let Result=ApiRequest(url,parameter);
console.log(Result);

相关问题