让dcatadmin再放光芒系列 -江南app体育官方入口

在日常开发中，让 modal 里面 再嵌套一个modal。可以让用户使用体验更好，不用再次切换页面。会让使用操作更丝滑。

• 非异步加载的modal嵌套 第二个modal 能正常弹出 ,但是被第一个modal遮挡.
• 异步加载的modal嵌套 第二个modal 弹出后，但是被第一个modal遮挡，数秒后自动关闭，因为触发了异步请求，得到的还是第一个modal的内容。

1.非异步加载的modal嵌套 还是想使用dcat写法

// 第二个 modal
                $modal2 = modal::make('查看环境要求','444');
                $modal2->title('查看环境要求');
                $modal2->style('z-index:1052 !important' ,true);
                $modal2->sm();
                $modal2->button('查看');
                // 第一个 modal
                $modal1 = modal::make();
                $modal1->title('安装 ' . $actions->row->product_name . '(' . $actions->row->package_name . ') 其它版本');
                $modal1->lg();
                $modal1->body($modal2->render())
                //$modal3->body((new releasestable())->payload(['package_name' => $actions->row->package_name,'product_name'=>$actions->row->product_name,'product_slug'=>$actions->row->product_slug]))
                ->button('    ');
                $actions->prepend($modal1);

关键点 （重新定义z-index ,让它高于 原来的 z-index:1050 ）

// 第一个参数是样式定义，第二个参数是把样式追回到后面(可选)
$modal2->style('z-index:1052 !important' ,true);
// 还需要 给modal 加一个 阴影效果 ，体现层次感：(不加的话会让两个modal 混在一起的，因为背景都是白色。)
admin::style(
  <<<css
.modal-dialog{box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;}
css
  );

2.异步加载的modal嵌套 结合 layer.open() 达到完美效果

第一个 modal

// 第一个 modal
                $modal1 = modal::make();
                $modal1->title('安装 ' . $actions->row->product_name . '(' . $actions->row->package_name . ') 其它版本');
                $modal1->lg();
                $modal1->body((new releasestable())->payload(['package_name' => $actions->row->package_name,'product_name'=>$actions->row->product_name,'product_slug'=>$actions->row->product_slug]))
                ->button('    ');
                $actions->prepend($modal1);

第二个 modal 异步加载数据表格

namespace dcat\admin\pluginstore\renderable;
use dcat\admin\admin;
use dcat\admin\grid;
use dcat\admin\grid\lazyrenderable;
use dcat\admin\models\administrator;
use dcat\admin\pluginstore\repositories\marketplacereleases;
use dcat\admin\dcatplusdemo\http\controllers\forms\userprofile;
use dcat\admin\widgets\modal;
class releasestable extends lazyrenderable
{
  public function grid(): grid
 { 
  // 监听点击事件，打开弹窗
 //  layer.open type: 1 是加载html ,type: 2 可以加载网址
 admin::script(
  <<<script
$('.preview-tags-require').click(function () {
 var package_name = $(this).attr('data-package_name'); var version_num = $(this).attr('data-version_num'); var tags_require = $(this).attr('data-tags_require'); layer.open({ type: 2,shade: [0.8, '#393d49'], title: '查看 环境要求', area: ['65%', '80%'], content: '/admin/plugin-store/viewtagsrequire?package_name='package_name'&version_num='version_num'&tags_require='tags_require, });});
script
  );
  $package_name = $this->payload['package_name'];
  return grid::make(new marketplacereleases(), function (grid $grid) use ($package_name) {
  //$grid->column('id', 'id')->sortable();
  $grid->model()->where(['package_name'=> $package_name]);
  $grid->setkeyname($package_name);
  $grid->disablerowselector();
  $grid->column('version_name','版本号');
  $grid->column('version_info','描述')->limit(15);
  $grid->column('release_date','发行时间');
  $grid->column('tags_require','环境要求')->display(function (){
  // 返回 带有 (preview-tags-require) class  并把要传递的数据写到 属性上 如：data-package_name="'.$this->package_name.'"
  return '
.urlencode($this->tags_require).'" data-package_name="'.$this->package_name.'" data-version_num="'.$this->version_num.'">查看
';
 });  $grid->paginate(10);
  $grid->setactionclass(grid\displayers\actions::class);
  $grid->actions(function ($actions) {
  // 去掉删除
  $actions->disableview();
  $actions->disabledelete();
  // 去掉编辑
  $actions->disableedit();
 });  $grid->disabletoolbar();
  $grid->filter(function (grid\filter $filter) {
  $filter->like('username')->width(4);
  $filter->like('name')->width(4);
 }); }); }}

dcat-plus admin （plus版）沿用 dcat-admn 最新代码，并让dcat-admin 保持活力。已支持到laravel11，并新增多个组件。

期待您的参与，让 dcat-admin 成为国内最开放，最好用的后台极速开发框架

加wx:q3664839 拉你入群

本作品采用《cc 协议》，转载必须注明作者和本文链接