效果

用Fastadmin做管理後台的時候,有時候需要在後台列表中某列數據加一個明細彈窗, 點擊該列數據後在彈窗中展示關聯明細信息, 效果如下圖所示:
設備分組列表中,想在彈窗中展示對應分組關聯的設備列表

點擊關聯設備列表出現下面的彈窗

實現上面效果的代碼

1. 設備分組group.js中做如下修改

//打開device/group/index頁面的時候fastaadmin會自動根據地址欄對應的action
//也就是index加載下面index中編輯的js到對應頁面上 
index:function() {
//給設備列表增加點擊展示彈窗事件,
$(document).on("click", ".lists_index_simple", function (e) {
    url = $(this).attr('data-href');
    Fast.api.open(url, "設備列表", { area: ['80%', '80%'] })
});

var table = $("#table");
table.bootstrapTable({
  url: $.fn.bootstrapTable.defaults.extend.index_url,
  pk: 'id',
  columns:[[
        // {checkbox: true},
    {field: 'id', title: __('Id')},
    {field: 'group_name', title: __('Group_name'), operate: 'LIKE'},
    {
        field: 'base_detail', 
        title: __('設備列表'), 
        operate: false, 
        formatter: function (value, row, index) {
            var html = '<span class="lists_index_simple text-info"  style="cursor: pointer"  data-href="device/lists/index_simple?group_id=' + row.id + '">設備列表</span>';
            return html;
        }
    },
      ]]    
});
}

2. 編輯device/lists控制器中index_simple方法

app\admin\controller\device\Lists.php

//設備分組中的設備列表
public function index_simple()
{
    $group_id = $this->request->param('group_id');
    //按照fastadmin的構建查詢格式, 構建查詢某個分組下的設備
    $this->request->get([
        'filter' => json_encode(['group_id' => $group_id]),
        'op' => json_encode(['group_id' => '='])
    ]);
    $this->request->get(['is_all_type' => 1]);
    return $this->index();
}

3. 參考lists/index.html創建index_simple.html頁面視圖文件

由於設備分組那裏展示設備列表不涉及添加,編輯操作只做展示,所以要把操作相關按鈕都隱藏起來

4. 在lists.js中構建渲染index_simple.html要加載的js

在lists.js文件中(也就是渲染device/Lists控制器對應方法頁面時候fastadmin自己加載js), 增加渲染index_simple對應的js

// 簡單設備列表
        index_simple: function () {
        // 初始化表格參數配置
        Table.api.init({
            extend: {
                index_url: 'device/lists/index_simple' + location.search,
                table: 'device_lists'
            }
        });

        var table = $("#table");

        // 初始化表格
        table.bootstrapTable({
            url: $.fn.bootstrapTable.defaults.extend.index_url,
            pk: 'id',
            sortName: 'id',
            showExport:false,
            columns: [
                [
                    // {checkbox: true},
                    {
                        field: 'type',
                        title: '設備類型',
                        operate: false,
                        formatter: function (value, row){
                            return row.type === 3?'售賣一體機':'一代投遞機'
                        }
                    },
                    {
                        field: 'name',
                        title: __('設備名稱'),
                        operate: 'LIKE',
                        sortable: false,
                        width: '300px',
                    }
                ]
            ]
        });

        // 為表格綁定事件
        Table.api.bindevent(table);
    },

這裏編輯的就是設備分組中設備列表彈框的展示樣式: