[fastadmin]第四篇 子页面使用到表格

之前写了子页面 表格

但是这个表格，依然是依赖于fastadmin的。
这里下面的作者，完全新增控制器，来处理第二个表格。思路很赞，大家可以参考

我们经常会遇到，点击某条数据，子页面又要显示另外一个表格。

举例场景：后台有给用户发送优惠券的功能，用户列表每行数据有个按钮，点击就能弹出所有可用的优惠券

但这样做，并不好实现。因为在优惠券管理那边肯定有==“添加”==或其他功能，你在给用户发送的时候，并不需要，所以如果这样，还得去判断是从哪个入口进来的，要显示什么，不显示什么。所以要做就是要把弹出优惠券列表和原本的优惠券管理分开来。那么，我为什么不直接新建个控制器，虽然代码和优惠券管理一样，但是因为是新的控制器，你不需要的东西完全可以去掉。而且，利用fastadmin命令行生成增删改查列表，分分钟的事情。
如图：

第二种方法：我们知道fastadmin的表格使用的是bootstrap,所以完全可以用bootstrap数据表格来构造。

首先，在表格内新增一个按钮。比如enrolluser,这时候，同样需要其中使用
Controller.api.bindevent();然后在开始子页面的数据表格的构建。fastadmin中写法如下，后台具体代码就不贴出来，只要按bootstrap要求的数据格式返回即可。

enrolluser : function(){
    function addFunctionAlty(value, row, index) {
       return [
       '<button id="edituser" type="button" class="btn btn-success">编辑</button>',
       '<button id="deluser" type="button" class="btn btn-danger">删除</button>',
       ].join('');
     } 
    window.operateEvents = {
        'click #edituser': function (e, value, row, index) {
           Fast.api.open("enroll/useredit?id="+row.id, "编辑", {});
         },
         'click #deluser': function (e, value, row, index) {
              $.get("enroll/deluser?id="+row.id,"",function(res){
                  parent.Toastr.success(res.msg);
                  location.reload();
              });
         }
     };

    function initTable (searchValue){
        // console.log(searchValue,"测试");
        $("#coupon_table").bootstrapTable({
            url : "enroll/enrolluserData?activity_id="+Fast.api.query('activity_id'),
            columns: [
                {field: 'user_id', title: '用户ID'},
                {field: 'name', title: '用户姓名'},
                {field: 'age', title: '年龄'},
                {field: 'avatar', title: '用户头像',events: Table.api.events.image, formatter: Table.api.formatter.image},
                {field: 'sex', title: '性别'},
                {field : 'like', title : '爱好'},
                {field : 'strong', title : '强项'},
                {field : 'motto', title : '参赛宣言'},
                {field: 'images', title: '参赛图片',events: Table.api.events.image, formatter: Table.api.formatter.images},
                {field : 'love', title : '人气值',sortable:true},
                {field : 'create_time', title : '报名时间'},
                {field : 'operate', title : '操作',events:operateEvents,formatter:addFunctionAlty},
            ],
            search: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 15, 20],
            showColumns: false,
            showRefresh: false,
            showToggle: false,
            sidePagination:'server',//服务端分页，必须写，不然无法加载

        });
    }

    initTable();

    // $("#search").click(function(){
    //     var name = $("#name").val();
    //     var obj = {
    //         'name' : name
    //     }
    //     console.log(obj);
    //     initTable(obj);
    // });



    Controller.api.bindevent();
},

效果页面如下：

其中值得一提的是：因为是自定义的bootstrap表格，存在一个，编辑之后，表格不会刷新。解决方法就是在Form.api.bindevent中进行回调刷新父页面。

原文

blog.csdn.net/weixin_42273669/arti...

关联 ：如何在FastAdmin中使用Ajax发送请求?

html页面：
相关js文件里添加以下代码（这个是自己模块对应的js文件，不懂的话，得先了解一下fastadmin 基础）：

{field: 'uid', title: __('解绑'), table: table, buttons: [
        {
            name: 'ajax',
            text: __('解绑'),
            title: __('解绑'),
            classname: 'btn btn-xs btn-success btn-magic btn-ajax',
            icon: 'fa fa-magic',
            url: 'player/player/unbundling?',
            confirm: '确认是否要解绑',
            success: function (data, ret) {
                if(ret["msg"]["code"]==200){
                    Layer.alert("解绑"+ret["msg"]["msg"]);
                }
                else {
                    Layer.alert('<span id="" style="color: red;">'+ret["msg"]["msg"]+'</span>');
                }
            },
            error: function (data, ret) {
                console.log(data, ret);
                Layer.alert(ret.msg);
                return false;
            }
        }
    ], operate:false, formatter: Table.api.formatter.buttons},

后端php： 省略。

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