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

最新推荐文章于 2025-05-14 10:03:42 发布

原创最新推荐文章于 2025-05-14 10:03:42 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fastadmin #requirejs #x-editable #可编辑表格

PHP 同时被 2 个专栏收录

14 篇文章

订阅专栏

ThinkPHP

4 篇文章

订阅专栏

本文详细介绍了如何在项目中集成x-Editable插件，包括下载资源、配置文件、添加依赖及使用方法等步骤，帮助开发者轻松实现表格内编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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
                        },
                      ...,
                      ]
                   ],
                   ...,
               })