表格无刷新行内编辑 基于x-editable的无刷新表格行内编辑

预览截图

功能介绍

此插件是一款基于x-editable实现的表格无刷新行内编辑功能的插件。

使用方法

首先我们需要在我们当前的控制器所对应的JS文件头部添加依赖,追加一个editable,如下:

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

然后我们只需要在JS中的字段配置简单添加一个editable:true即可生效,例如:

{field: 'title', title: __('Title'), editable: true},

但其实editable参数还支持更多配置,例如:

{
    field: 'status', 
    title: __('Status'),
    editable: {
        type: 'select',
        pk: 1,
        source: [
            {value: 'normal', text: '正常'},
            {value: 'hidden', text: '隐藏'},
        ]
    }
}

请注意在使用editable配置时,formatter渲染请删除,否则会出现一些意想不到的问题产生。
editable参数可用的配置请参考x-editable官网:https://vitalets.github.io/x-editable/

特别感谢

x-editable
Bootstrap-table

查看更多

点赞 打赏 分享