标记一下关于fastadmin在列表页获取视频时长并且AJAX提交到后端正常显示的过程

尝试了2次，因为这个问题对fastadmin列表的很多功能 更加熟悉

先看下目标的效果

 

 

就是点击这个数字  然后获取当前视频的时长 然后 存到库里面 更新数据

之前的思路是 想在数据加载完毕的时候自动获取，也是可以的，只是我觉得这个思路比就麻烦

 那么开始我的流程

1 添加视频时长这个字段 的属性  我把整个的JS发下来 标注下

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

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

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'course_name', title: __('Coursename')},
                        {field: 'chapter_id', title: __('Chapter')},
                        {
                            field: 'browser',
                            title: __('Course_time'),
                            operate: false,
                            events: Controller.api.events.browser,
                            formatter: Controller.api.formatter.browser
                        },
                        {field: 'operate', title: __('Operate'), table: table, 
                            events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });
            

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
            
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },

        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            formatter: {//渲染的方法
                browser: function (value, row, index) {
                    return  "<video width='1px' height='1px' id='video_"+row.id+"' controls='controls'><source src='"+row.course_video+"'  type='video/mp4'></video>"+'<a class="btn btn-xs btn-browser">'+row.course_time+'</a>';
                },
            },
            events: {//绑定事件的方法
                browser: {
                    'click .btn-browser': function (e, value, row, index) {
                        myVid=document.getElementById("video_"+row.id);
                        var course_time=parseInt(myVid.duration);
                        $.ajax({
                            url: '/admin.php/course/getvideotime',
                            type: 'post',
                            data:{course_time:course_time,id:row.id},
                            dataType: 'json',
                            success: function (ret) {
                                if(ret.res==1) {
                                    Layer.alert(ret.msg);
                                }
                                $("#table").bootstrapTable('refresh');
                            }
                        });
                    }
                },
            }
 
        },
  
    };
    return Controller;
});

 

2 控制器里面的代码比较简单 说白了就是接受数据 然后更新

    public function getvideotime()
    {
        if ($this->request->isAjax()) {
             $course_time=$this->request->post('course_time');
             $id=$this->request->post('id');
         
             $data['course_time']=$course_time;
             db('online_course')->where('id='.$id)->update($data);
             
             $result = array("res" => 1, "msg" => '操作成功');
 
             return json($result);
        }
    }

 

知道了几个点 

1 js文件里面的 index:  add: edit: 分别代表 index.html add.html edit.html对应的页面

2 formatter 是渲染事件 说白了就是显示效果

3 events: Controller.api.events.browser,   可针对一个filed加单独的触发事件