表格配置项:public/assets/js/require-table.js
视图模型的JS文件:public/assets/js/backend
     operate: function (value, row, index) {
                    var table = this.table;
                    // 操作配置
                    var options = table ? table.bootstrapTable('getOptions') : {};
                    // 默认按钮组
                    var buttons = $.extend([], this.buttons || []);

                    if (options.extend.dragsort_url !== '') {
                        buttons.push({
                            name: 'dragsort',
                            icon: 'fa fa-arrows',
                            title: __('Drag to sort'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-primary btn-dragsort'
                        });
                    }
                    if (options.extend.edit_url !== '') {
                        buttons.push({
                            name: 'edit',
                            icon: 'fa fa-pencil',
                            title: __('Edit'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-success btn-editone',
                            url: options.extend.edit_url
                        });
                    }
                    if (options.extend.del_url !== '') {
                        buttons.push({
                            name: 'del',
                            icon: 'fa fa-trash',
                            title: __('Del'),
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-danger btn-delone'
                        });
                    }
                    // 
                                // 这里是增加的查看操作
                    if (options.extend.view_url !== '') {////判断视图容器的url是否存在
                        buttons.push({
                            name: 'view',//操作名称
                            icon: 'fa fa-search',//显示图标 参考fastadmin图标库
                            title: '查看',//提示信息
                            extend: 'data-toggle="tooltip"',
                            classname: 'btn btn-xs btn-success btn-viewone',//这里的btn-viewone 就是上面增加的事件
                            url: options.extend.view_url//要记得保证这里的url没错 不然会报404
                        });
                    }
                   

如上新增了查看的事件那么在视图容器的JS里面也需要做一些更改

         Table.api.init({
                extend: {
                    index_url: 'invitations/index',
                    add_url: 'invitations/add',
                    edit_url:'',
                    view_url: 'invitations/Qrcode',//这里的view_url要新增上去 因为点击图标后会根据这个url进行跳转
                    del_url: '',
                    multi_url: 'invitations/multi',
                    table: 'invitations',
                }
            });
单元格点击事件
        // 单元格元素事件
            events: {
                operate: {
                    'click .btn-editone': function (e, value, row, index) {
                        e.stopPropagation();
                        e.preventDefault();
                        var table = $(this).closest('table');
                        var options = table.bootstrapTable('getOptions');
                        var ids = row[options.pk];
                        row = $.extend({}, row ? row : {}, { ids: ids });
                        var url = options.extend.edit_url;
                        Fast.api.open(Table.api.replaceurl(url, row, table), __('Edit'), $(this).data() || {});
                    },
                    'click .btn-viewone': function (e, value, row, index) {
                        console.log('查看事件被触发了');
                        e.stopPropagation();
                        e.preventDefault();
                        var table = $(this).closest('table');
                        var options = table.bootstrapTable('getOptions');
                        var ids = row[options.pk];
                        row = $.extend({}, row ? row : {}, { ids: ids });
                        var url = options.extend.view_url;
                        console.log('url为', url);
                        Fast.api.open(Table.api.replaceurl(url, row, table), '查看', $(this).data() || {});
                    },
                    'click .btn-delone': function (e, value, row, index) {
                        e.stopPropagation();
                        e.preventDefault();
                        var that = this;
                        var top = $(that).offset().top - $(window).scrollTop();
                        var left = $(that).offset().left - $(window).scrollLeft() - 260;
                        if (top + 154 > $(window).height()) {
                            top = top - 154;
                        }
                        if ($(window).width() < 480) {
                            top = left = undefined;
                        }
                        Layer.confirm(
                            __('Are you sure you want to delete this item?'),
                            { icon: 3, title: __('Warning'), offset: [top, left], shadeClose: true },
                            function (index) {
                                var table = $(that).closest('table');
                                var options = table.bootstrapTable('getOptions');
                                Table.api.multi("del", row[options.pk], table, that);
                                Layer.close(index);
                            }
                        );
                    }
                }
            },
Last modification:September 14, 2023
反正也没人会打赏