fastadmin订单父子表管理端

fastadmin后台父子表使用方法

发布于 2021-01-22 12:48:10

fastadmin后台的所有表格都是支持父子表配置的，只需要简单修改一下对应的JS即可，下面直接进入主题。
示例是我的全国省市行政区划表，是从国家统计局网站采集下来的，共五级行政数据，非常适合用来做父子表，按照级别一级一级查看数据最好不过了。
第一步，打开对应的JS文件，在index中添加：

var table = $("#table");
var oInit = new Object()复制

第二步，在colunms后面添加：

onExpandRow: function (index, row, $detail) {
    oInit.InitSubTable(index, row, $detail);
}复制

第三步，在table.bootstrapTable后面加上：

oInit.InitSubTable = function (index, row, $detail) {
    var parentid = row.id;
    var cur_table = $detail.html('<table></table>').find('table');
    $(cur_table).bootstrapTable({
        url: '/tools/area/index',
        toolbar: false, // 此处往下6个参数是关闭子表的相关按钮，不加的话会导致上面的表头按钮错乱，并且会报错
        showColumns: false,
        showToggle: false,
        showExport: false,
        search: false,
        commonSearch: false,
        sortOrder: 'ASC',
        queryParams: function(params){
            var tmp = {
                limit: params.limit,
                offset: params.offset,
                order: params.order,
                pid: parentid
            }
            return tmp;
        },
        detailView: true,//父子表
        columns: [
            {checkbox: true},
            {field: 'id', title: __('Id')},
            {field: 'pid', title: __('Pid')},
            {field: 'level', title: __('Level')},
            {field: 'area_code', title: __('Area_code')},
            {field: 'zip_code', title: __('Zip_code')},
            {field: 'city_code', title: __('City_code')},
            {field: 'name', title: __('Name')},
            {field: 'short_name', title: __('Short_name')},
            {field: 'merger_name', title: __('Merger_name')},
            {field: 'pinyin', title: __('Pinyin')},
            {field: 'lng', title: __('Lng'), operate:'BETWEEN'},
            {field: 'lat', title: __('Lat'), operate:'BETWEEN'},
            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
        ],
        onExpandRow: function (index, row, $Subdetail) {
            oInit.InitSubTable(index, row, $Subdetail);
        }
    });
};复制

注意子表中的columns字段列可以直接从主表复制下来，也可以自定义
下面是我的完整的JS：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'tools/area/index' + location.search,
                    add_url: 'tools/area/add',
                    edit_url: 'tools/area/edit',
                    del_url: 'tools/area/del',
                    multi_url: 'tools/area/multi',
                    table: 'area',
                }
            });

            var table = $("#table");
            var oInit = new Object()
            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                sortOrder: 'ASC',
                detailView: true,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'pid', title: __('Pid')},
                        {field: 'level', title: __('Level')},
                        {field: 'area_code', title: __('Area_code')},
                        {field: 'zip_code', title: __('Zip_code')},
                        {field: 'city_code', title: __('City_code')},
                        {field: 'name', title: __('Name')},
                        {field: 'short_name', title: __('Short_name')},
                        {field: 'merger_name', title: __('Merger_name')},
                        {field: 'pinyin', title: __('Pinyin')},
                        {field: 'lng', title: __('Lng'), operate:'BETWEEN'},
                        {field: 'lat', title: __('Lat'), operate:'BETWEEN'},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ],
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });
            oInit.InitSubTable = function (index, row, $detail) {
                var parentid = row.id;
                var cur_table = $detail.html('<table></table>').find('table');
                $(cur_table).bootstrapTable({
                    url: '/tools/area/index',
                    toolbar: false,
                    showColumns: false,
                    showToggle: false,
                    showExport: false,
                    search: false,
                    commonSearch: false,
                    sortOrder: 'ASC',
                    queryParams: function(params){
                        var tmp = {
                            limit: params.limit,
                            offset: params.offset,
                            order: params.order,
                            pid: parentid
                        }
                        return tmp;
                    },
                    detailView: true,//父子表
                    columns: [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'pid', title: __('Pid')},
                        {field: 'level', title: __('Level')},
                        {field: 'area_code', title: __('Area_code')},
                        {field: 'zip_code', title: __('Zip_code')},
                        {field: 'city_code', title: __('City_code')},
                        {field: 'name', title: __('Name')},
                        {field: 'short_name', title: __('Short_name')},
                        {field: 'merger_name', title: __('Merger_name')},
                        {field: 'pinyin', title: __('Pinyin')},
                        {field: 'lng', title: __('Lng'), operate:'BETWEEN'},
                        {field: 'lat', title: __('Lat'), operate:'BETWEEN'},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ],
                    onExpandRow: function (index, row, $Subdetail) {
                        oInit.InitSubTable(index, row, $Subdetail);
                    }
                });
            };
            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});复制

第四步，JS处理完了，还需要处理一下控制器，控制器数据筛选需要手动增加一个父级ID，即子表中的parentid，传到后台控制器，需要判断一下，如果没有传则给个默认值。以下是我的控制器方法：

public function index()
{
    //设置过滤方法
    $this->request->filter(['strip_tags', 'trim']);
    if ($this->request->isAjax()) {
        //如果发送的来源是Selectpage，则转发到Selectpage
        if ($this->request->request('keyField')) {
            return $this->selectpage();
        }
        list($where, $sort, $order, $offset, $limit) = $this->buildparams();
        $pid = $this->request->param('pid');// 这两行是新加的
        $orwhere['pid'] = isset($pid) ? $pid : '0';
        $list = $this->model
            ->where($where)
            ->where($orwhere) //这行是新加的
            ->order($sort, $order)
            ->paginate($limit);

        $result = array("total" => $list->total(), "rows" => $list->items());

        return json($result);
    }
    return $this->view->fetch();
}复制

最终效果如下图：