当前位置：首页 > CMS教程 > Fastadmin

利用 x-editable 实现在表格中直接修改单个字段的值

管理员 2024-12-14

Fastadmin

实现效果

适用性

目前业务只用到普通 text 类型，以后有需求会再扩展类型

实现步骤

下载 x-editable 插件至 /assets/libs 目录下

bower方式安装

bower install x-editable

其它方式安装

GitHub地址: https://github.com/vitalets/x-editable

将插件引入require-backend.js配置文件

在对应的js模块中加载插件

初始化表格时，在列的配置中，修改字段的显示格式（比如 nickname 字段）

初始化表格时，增加 onLoadSuccess 函数，并指定字段名（比如 nickname）

函数代码：

onLoadSuccess: function (data) {    var field = 'nickname';    var selector = '.' + field;    var name = 'row[' + field + ']';    $(selector).editable({        type: 'text',        url: function (params) {            $.ajax({                type: 'POST',                dataType: 'JSON',                url: $.fn.bootstrapTable.defaults.extend.edit_url + '/ids/' + params.pk,                data: {[name]: params.value},                complete: function (xhr, status) {                    if (xhr.responseJSON.code === 1) {                        Toastr.success('操作成功');                    } else {                        Toastr.error(xhr.responseJSON.msg !== '' ? xhr.responseJSON.msg : '未知错误');                        table.bootstrapTable('refresh');                    }                }            });        }    });}

测试效果

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。各类知识收集拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS，易优CMS， YzmCMS，讯睿CMS，极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF，等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。

未经允许不得转载：Str Tom工作室 » 利用 x-editable 实现在表格中直接修改单个字段的值

管理员

如果您对网站的内容有任何想法或意见，请call我！~~

  6已赞

PHP建站技术分享-从入门到精通