Fastadmin后台管理之表格行内编辑requireJS加载x-editable.js

游离于山间之上的Java爱好者

发布于 2022-09-21 08:58:46

2K0

发布于 2022-09-21 08:58:46

文章被收录于专栏：你我杂志刊

本文也已同步发布个人博客，https://qiucode.cn/article/89

也可直接到文末，点击阅读原文，即可到达笔者个人博客站点，个人站点还在开发中，目前已实现，首页文章列表、文章详情页、文章评论、主题/模板列表、主题/模板详情页、站点点点滴滴功能，其他还在努力开发中，毕竟业余时间有限，还有一点就是要写《同一地方》小说作品，在下首部作品《同一地方》发布于中文起点网(https://www.qidian.com/)，初次起笔，写的可能不是很好，但笔者终会把它写好、写完，毕竟写小说也是笔者的一个爱好。

由于Fastadmin官方只有安装表格可编辑的插件才有这个功能，但笔者是一个爱折腾的人，所以也就有了本文，requireJS加载BootstrapTable扩展功能，表格可编辑，基于x-editable.js扩展库

1、下载x-editable js以及css

x-editable官网https://vitalets.github.io/x-editable/

2、在require-backend.js文件添加以下内容

找到 public/assets/js/require-backend.js 文件，进行如下操作

require.config({
    ...,
    ...,
    paths: {
        ...,
        ...,
        'editable': '../libs/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min',
        'x-editable': '../libs/bootstrap-x-editable/bootstrap-editable.min',
    },
    // shim依赖配置
    shim: {
       ...,
       ...,
        'editable': {
            deps: ['x-editable', 'bootstrap-table']
        },
        "x-editable": {
            deps: ["css!../libs/bootstrap-x-editable/bootstrap-editable.css"]
        }
    },
    ...,
    ...,
});
...,
...

3、需要在控制器所对应的JS文件头部添加依赖，追加一个editable，如下：

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

4、在bootstrapTable渲染是，添加一个属性 editable:true

 table.bootstrapTable({
                ...,
                columns: [
                    [
                        {
                            field:'title',
                            title: '标题',
                            width: '120px',
                            editable: true
                        },
                      ...,
                      ]
                   ],
                   ...,
               })

最终实现效果如下：