fastadmin弹窗添加二级类别

最新推荐文章于 2024-11-20 10:08:34 发布

原创最新推荐文章于 2024-11-20 10:08:34 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#php #前端

本文介绍如何在FastAdmin后台系统中，通过代码实现一级表格（如ask）中的每一项点击后弹窗显示其对应的二级表格（如answer）详情，并在弹窗内进行增删改查操作。详细步骤包括添加查看按钮、控制器与视图中的detail代码修改、删除与添加方法的实现，特别适合需要直观展示一二级关系数据的场景。

在程序开发中，经常遇上有一、二级表格情况，例如ask和answer，一个ask中，就有很多个answer，如果在后台中分两个列表很容易实现，但很不直观，现通过代码，实现在ask列表中，每个item添加一个查看answer按钮，点击该按钮弹窗显示对应的answer列表，在该弹窗中实现增删改查操作，如下图

1、添加（申请详情）按钮，此操作参考前面写的文章（添加商品详情查看按钮）

2、controll中的detail代码

public function detail($ids = null){
    //$ids就是订单的id
    $orderDetails = LxsqApplyDetModel::order('id desc')->where('lxsq_apply_id', $ids)->select();
    if($orderDetails){
        foreach($orderDetails as $k=>$vo){
            $vo['cTime'] = date('Y-m-d H:i',$vo['createtime']);
        }
    }
    $this->assign('ids',$ids);
    $this->assign('orderDetails',$orderDetails);
    return $this->view->fetch();
}

3、view中的detail.html代码，该代码中对edit和del方法进行了改告，代码如下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="never">
    <meta name="robots" content="noindex, nofollow">

    <link rel="shortcut icon" href="/assets/img/favicon.ico" />
    <!-- Loading Bootstrap -->
    <link href="/assets/css/backend.css?v=1681475121" rel="stylesheet">


    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="/assets/js/html5shiv.js"></script>
    <script src="/assets/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var require = {
            config:  {"site":{"name":"\u6211\u7684\u7f51\u7ad9","cdnurl":"","version":1681475121,"timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"}},"upload":{"cdnurl":"","uploadurl":"\/AbMdtFimEB.php\/ajax\/upload","bucket":"local","maxsize":"100mb","mimetype":"jpg,png,bmp,jpeg,gif,webp,zip,rar,xls,xlsx,wav,mp4,mp3,webm,pdf","chunking":false,"chunksize":2097152,"savekey":"\/uploads\/{year}{mon}{day}\/{filemd5}{.suffix}","multipart":[],"multiple":false,"fullmode":false,"thumbstyle":"","storage":"local"},"modulename":"admin","controllername":"lxsq.applydet","actionname":"index","jsname":"backend\/lxsq\/applydet","moduleurl":"\/AbMdtFimEB.php","language":"zh-cn","referer":null,"__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":"","ueditor":{"baiduMapAk":""}}    };
    </script>

</head>

<body class="inside-header inside-aside ">
<div id="main" role="main">
    <div class="tab-content tab-addtabs">
        <div id="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <section class="content-header hide">
                        <h1>
                            控制台                                    <small>Control panel</small>
                        </h1>
                    </section>
                    <div class="content">
                        <div class="panel panel-default panel-intro">

                            <div class="panel-body">
                                <div id="myTabContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="one">
                                        <div class="widget-body no-padding">
                                            <div id="toolbar" class="toolbar">
                                                <!--<a href="javascript:;" class="btn btn-success btn-add " title="添加" ><i class="fa fa-plus"></i> 添加</a>-->
                                                <button class="btn btn-success btn-add" onclick="window.location.href='{:url('lxsq/applydet/add',array('id'=>$ids))}'"><i class="fa fa-plus"></i> 添加</button>

                                            </div>
                                            <!-- 商品信息 -->
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <span>申请详情1</span>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="goods">
                                                        <table class="table table-bordered table-goods" data-operate-edit="1"
                                                               data-operate-del="1">
                                                            <thead>
                                                            <tr>
                                                                <th class="text-center">id</th>
                                                                <th class="text-center">申请ID</th>
                                                                <th class="text-center">名称</th>
                                                                <th class="text-center">创建时间</th>
                                                                <th class="text-center">操作</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            {volist name="$orderDetails" id="vo" key='k'}
                                                            <tr>
                                                                <td class="text-center" scope="row">{$vo.id}</td>
                                                                <td class="text-center" scope="row">{$vo.lxsq_apply_id}</td>
                                                                <td class="text-center" scope="row">{$vo.name}</td>
                                                                <td class="text-center" scope="row">{$vo.cTime}</td>

                                                                <td style="text-align: center; vertical-align: middle;">
                                                                    <a href="{:url('/lxsq/applydet/edit',array('ids'=>$vo['id']))}" class="btn btn-xs btn-success btn-editone" data-toggle="tooltip" title="" data-table-id="table" data-field-index="6" data-row-index="0" data-button-index="1" data-original-title="编辑"><i class="fa fa-pencil"></i></a>
                                                                    <a title="删除" class="btn btn-xs btn-danger btn-delone"  href="javascript:;" onclick="delApplyDet('{$vo.id}')"
                                                                       class="ml-5" style="text-decoration:none">
                                                                        <i class="fa fa-trash"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                            {/volist}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/assets/js/require.js" data-main="/assets/js/require-backend.js?v=1681475121"></script>
<script>

    /*删除*/
    function delApplyDet(id){
//        alert(id)
        layer.confirm('确认要该申请详情吗？',function(index){
            //发异步删除数据
            $.ajax({
                type:'POST',
                url:"{:url('lxsq/applydet/del2Id')}",
                data:{'id':id},
                dataType:"json",
                success:function (data){
                    if(data.status==1){
//                          alert(data.message);
                        layer.msg('已删除!',{icon:1,time:1000});
                        window.location.reload();
                    }else{
                        alert(data.message);
                        window.location.reload();
                    }
                }
            })

        });
    }
</script>
</body>
</html>

3、在controll/applydet，中添加了删除代码

/**
 * 删除
 */
public function del2Id()
{

    $id = $this->request->param('id');
    $result = LxsqApplyDetModel::where('id',$id)->delete();
    if($result){
        $status = 1;
        $message = '删除成功';
    }else{
        $status = 0;
        $message = '删除失败';
    }
    return ['status' => $status, 'message' => $message];

}

4、在controll/applydet，重写了add方法，传入ids参数，再传和add表中，从偶获取是ask的哪一个id，固定ask的ID值，不用重新选择，重写add的lxsq_apply_id代码

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Lxsq_apply_id')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-lxsq_apply_id" value="{$ids}" disabled data-rule="required" data-source="lxsq/apply/index" class="form-control selectpage" name="row[lxsq_apply_id]" type="text" value="">
    </div>
</div>

本代码主要在程序（留学申请）中实现，很多情况下都可以重写这个方法，保存记录

天龙工作室