Fastadmin中表格中修改字段值

require-table.js

// classname = j.classname ? j.classname : (dropdown ? 'btn-' + name + 'one' : 'btn-primary btn-' + name + 'one');
classname = typeof j.classname === 'function' ? j.classname.call(table, row, j) : j.classname ? j.classname : (dropdown ? 'btn-' + name + 'one' : 'btn-primary btn-' + name + 'one');

1. 点击弹窗选择修改

1.1 对应js文件

1.1.1 表格字段

{
    field: 'anti_spam_level',
    title: __('Anti_spam_level'),
    table: table,
    buttons: [
        {
            name: 'anti_spam_level',
            text: function (row,
                value) {
                return row.anti_spam_level_text
            },
            title: function (row,
                value) {
                return row.anti_spam_level_text
            },
            classname: function (row,
                value) {
                if (row.anti_spam_level == 1) {
                    return 'btn btn-xs btn-success click_anti_spam_level'
                } else if (row.anti_spam_level == 2) {
                    return 'btn btn-xs btn-warning click_anti_spam_level'
                } else if (row.anti_spam_level == 3) {
                    return 'btn btn-xs btn-danger click_anti_spam_level'
                }
            },
    },
  ],
    formatter: Table.api.formatter.buttons
},

1.1.2 绑定对应事件

// 为表格绑定事件
Table.api.bindevent(table);

$(document).on('click',
    '.click_anti_spam_level',
    function () {
        var row = table.bootstrapTable('getData')[
            $(this).data('rowIndex')];
        var id = row.id;
        var accountname = row.accountname;
        var anti_spam_level = row.anti_spam_level;
        // 状态选项
        var options = {
            1: '无',
            2: '半量',
            3: '全量'
        };
        // 构建 select 的 HTML
        var html = '<div style="padding: 20px;">';
        var options = {
            1: '无',
            2: '半量',
            3: '全量'
        };
        $.each(options,
            function (val,
                text) {
                var checked = (val == anti_spam_level) ? 'checked' : '';
                html += '<label class="radio-inline" style="margin-right: 20px;">';
                html += '<input type="radio" name="anti_spam_level_radio" value="' + val + '" ' + checked +
                    '> ' + text;
                html += '</label>';
            });
        html += '</div>';
        layer.open({
            type: 1,
            title: '修改账户 ' + accountname + ' 的防灌水级别',
            content: html,
            btn: [
      '确认',
      '取消'],
            yes: function (index,
                layero) {
                var newValue = layero.find('input[name="anti_spam_level_radio"]:checked').val();
                if (!newValue) {
                    layer.msg('请选择状态', {
                        icon: 5
                    });
                    return;
                }
                if (newValue == anti_spam_level) {
                    layer.msg('状态未改变', {
                        icon: 0,
                        time: 1500
                    });
                    return;
                }
                // 同样的 ajax
                Fast.api.ajax({
                        url: 'client/client/switch_anti_spam_level',
                        data: {
                            ids: id,
                            value: newValue,
                            key: 'anti_spam_level'
                        }
                    },
                    function (data,
                        ret) {
                        layer.msg(ret.msg, {
                            icon: 6,
                            time: 2000
                        });
                        layer.close(index);
                        table.bootstrapTable('refresh', {});
                    },
                    function (data,
                        ret) {
                        layer.msg(ret.msg, {
                            icon: 5,
                            time: 2000
                        });
                    });
            }
        });
    });

2. 下拉选择弹窗确认修改

2.1 对应js文件

2.1.1 表格字段

{
    field: 'anti_spam_level',
    title: __('Anti_spam_level'),
    table: table,
    formatter: function (value,
        row,
        index) {
        // 当前值
        var current = parseInt(row.anti_spam_level);
        // 选项
        var options = {
            1: '无',
            2: '半量',
            3: '全量'
        };
        // 根据当前值给 select 加不同颜色
        var colorClass = '';
        if (current == 1) {
            colorClass = 'anti-spam-select-info';
        } else if (current == 2) {
            colorClass = 'anti-spam-select-warning';
        } else if (current == 3) {
            colorClass = 'anti-spam-select-danger';
        }
        var html = '<select class="form-control anti-spam-select ' + colorClass + '" ' +
            'data-id="' + row.id + '" ' +
            'data-accountname="' + (row.accountname || '') + '" ' +
            'data-old="' + current + '" ' +
            'style="width: 65px; display: inline-block;">';
        $.each(options,
            function (val,
                text) {
                var selected = (val == current) ? 'selected' : '';
                html += '<option value="' + val + '" ' + selected + '>' + text + '</option>';
            });
        html += '</select>';
        return html;
    }
},

2.1.2 绑定对应事件

// 为表格绑定事件
Table.api.bindevent(table);

$(document).on('change', '.anti-spam-select', function () {
    var $this = $(this);
    var id = $this.data('id');
    var accountname = $this.data('accountname');
    var oldValue = $this.data('old');
    var newValue = $this.val();
    // 值没变直接返回
    if (newValue == oldValue) {
        return;
    }
    var textMap = {
        1: '无',
        2: '半量',
        3: '全量'
    };
    layer.confirm(
        '确认将防灌水级别切换为【' + textMap[
            newValue] + '】吗？', {
            title: '账户: ' + accountname,
            btn: [
        '确认',
        '取消']
        },
        function (index) {
            Fast.api.ajax({
                    url: 'client/client/switch_anti_spam_level',
                    data: {
                        ids: id,
                        value: newValue,
                        key: 'anti_spam_level'
                    }
                },
                function (data,
                    ret) {
                    layer.msg(ret.msg, {
                        icon: 6,
                        time: 1500
                    });
                    layer.close(index);
                    // 更新颜色和 old 值
                    $this.data('old',
                        newValue);
                    $this.removeClass(
                        'anti-spam-select-info anti-spam-select-warning anti-spam-select-danger');
                    if (newValue == 1) {
                        $this.addClass('anti-spam-select-info');
                    } else if (newValue == 2) {
                        $this.addClass('anti-spam-select-warning');
                    } else if (newValue == 3) {
                        $this.addClass('anti-spam-select-danger');
                    }
                    // 同步更新 row 数据，避免下次刷新前数据不一致
                    var rowIndex = $this.closest('tr').data('index');
                    // 或者用 table.bootstrapTable('refresh') 重新拉取
                },
                function (data,
                    ret) {
                    // 失败时把 select 回滚到原来的值
                    $this.val(oldValue);
                    layer.msg(ret.msg, {
                        icon: 5,
                        time: 2000
                    });
                });
        },
        function (index) {
            // 取消时回滚
            $this.val(oldValue);
            layer.close(index);
        }
    );
});

2.2 index.html添加简单样式

<style>
    .anti - spam - select {
        -webkit - appearance: none; -
        moz - appearance: none;
        appearance: none;
        padding: 3 px 22 px 3 px 10 px!important;
        height: 26 px!important;
        /*line-height: 1.2;*/
        border - radius: 5 px!important;
        cursor: pointer;
        outline: none;
        transition: border - color 0.15 s ease, background - color 0.15 s ease;
        background - repeat: no - repeat;
        background - position: right 8 px center;
        background - size: 9 px 5 px;
        background - image: url(
            "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23999999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"
        );
    }

    .anti - spam - select: hover {
        border - color: #b3b3b3!important;
    }

    .anti - spam - select: focus {
        border - color:
            #999 !important;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
    }

    .anti-spam-select-info {
        background-color: # f5f6f7;
        border: 1 px solid# dcdfe3!important;
        color: #606266;
    }

    .anti-spam-select-warning {
        background-color: # fdf6ec;
        border: 1 px solid# f0d9a8!important;
        color: #b8860b;
    }
    .anti - spam - select - warning {
        background - image: url(
            "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23b8860b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"
        );
    }

    .anti - spam - select - danger {
        background - color: #fef0f0;
        border: 1 px solid# f3c1c1!important;
        color: #c45656;
    }
    .anti - spam - select - danger {
        background - image: url(
            "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23c45656' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"
        );
    }

    .anti - spam - select option {
        color: #333;
        background-color: # fff;
    }
</style>

3. 对应控制器添加 switch_anti_spam_level 方法

/**
 * 切换状态
 * @param null $ids // 主键id
 * @param $value // 值
 * @param $key // 字段名
 * @return mixed
 */
public function switch_anti_spam_level($ids = null, $value, $key) {
    $result = $this->model->save([$key => $value], ['id' => $ids]);

    if ($result) {
        $this >success('修改成功');
    }

    $thi ->error('修改失败');
}

4. 效果图