在php框架fastadmin中，如何将一个数组显示在bootstrap table中，并且在每一列的后面，加一个输入框和按钮，按钮按下后，提交输入框内容到控制器？

本文链接：https://blog.youkuaiyun.com/weixin_33557724/article/details/130961270

在FastAdmin框架中，通过创建控制器获取Model数据，并在模板中利用BootstrapTable展示。同时，结合jQuery和AJAX，实现在表格内编辑数据并提交更新，控制器处理更新请求完成数据修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在FastAdmin中，可以将一个数组显示在Bootstrap Table中，具体步骤如下：

创建一个控制器，利用Model获取需要显示的数据，并传入模板；
在模板中引入Bootstrap Table和jQuery库，并将获取到的数据输出至表格中；
在每一列的后面添加一个输入框和一个提交按钮，并利用jQuery获取输入框内容，将数据通过AJAX请求发送给控制器。

下面是一个示例代码：

控制器：

namespace app\admin\controller;

use think\Controller;
use app\admin\model\TestModel;

class TestController extends Controller
{
    public function index()
    {
        $test = new TestModel();
        $data = $test->field('id,name,age')->select();

        $this->assign('data', $data);
        return $this->fetch();
    }

    public function update()
    {
        $id = input('post.id');
        $name = input('post.name');
        $age = input('post.age');

        // 更新数据的逻辑

        return json(['code' => 1, 'msg' => '更新成功']);
    }
}

模板：

{extend name="layout/layout"}

{block name="content"}

<table class="table" data-toggle="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {volist name="data" id="item"}
        <tr>
            <td>{$item.id}</td>
            <td>{$item.name}</td>
            <td>{$item.age}</td>
            <td>
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="update({
                            id: {$item.id},
                            name: $('input', this.parentNode).val(),
                            age: {$item.age}
                        })">提交</button>
                    </span>
                </div>
            </td>
        </tr>
        {/volist}
    </tbody>
</table>

<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="__PUBLIC__/bootstrap-table/bootstrap-table.min.js"></script>
<script>
    function update(data) {
        $.post('{:url("test/update")}', data, function(res) {
            if (res.code == 1) {
                alert(res.msg);
                location.reload();
            } else {
                alert(res.msg);
            }
        });
    }
</script>

{/block}

在这个示例中，控制器中的index方法获取了TestModel中的数据，将其传入模板中后，在模板中使用了Bootstrap Table将数据渲染出来。在每一行的最后一列中，使用了Bootstrap中的输入框和按钮，并绑定了一个onclick事件，将输入框中的内容通过AJAX请求发送给TestController中的update方法进行处理。在update方法中，可以实现数据的更新逻辑，并返回更新结果。