本文介绍如何在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>
本代码主要在程序（留学申请）中实现，很多情况下都可以重写这个方法，保存记录
天龙工作室
扫一扫
7893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
