fastadmin使用editable实现行内编辑无刷新效果

article/2025/9/13 16:16:10

记录:fastadmin使用editable实现行内编辑无刷新效果。

一、下载资源

editable资源下载地址

二、放在如下目录

在这里插入图片描述

三、引入并应用

1
在这里插入图片描述

代码示例:

require.config({paths: {'editable': '../libs/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min','x-editable': '../editable/js/bootstrap-editable.min',},shim: {'editable': {deps: ['x-editable', 'bootstrap-table']},"x-editable": {deps: ["css!../editable/css/bootstrap-editable.css"],}}
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'editable'], function ($, undefined, Backend, Table, Form, Editable) {var Controller = {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: 'dealerxilie/index' + location.search,add_url: 'dealerxilie/add',edit_url: 'dealerxilie/edit',del_url: 'dealerxilie/del',multi_url: 'dealerxilie/multi',import_url: 'dealerxilie/import',table: 'dealer_xilie',}});var table = $("#table");// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'name', title: __('Name'), operate: 'LIKE'},{field: 'code', title: __('Code'), operate: 'LIKE'},{field: 'remark', title: __('Remark'), align: 'left',editable: true,operate: false, formatter:function (value, row, index) {return  !value?'无':value;}},                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]],onEditableSave:function (field, row, oldValue, $el) {var data = {};  //组合更新数据data["row[field]"] =field;  //字段名data["row[" + field + "]"] = row[field];    //字段值data["row[id]"] = row['id'];    //主键Fast.api.ajax({url: $.fn.bootstrapTable.defaults.extend.edit_url + "/ids/" + row[this.pk],data: data},function () {$(".btn-refresh").trigger("click");});},});// 为表格绑定事件Table.api.bindevent(table);},add: function () {Controller.api.bindevent();},edit: function () {Controller.api.bindevent();},api: {bindevent: function () {Form.api.bindevent($("form[role=form]"));}}};return Controller;
});

四、页面效果

在这里插入图片描述


http://chatgpt.dhexx.cn/article/MhLqvooY.shtml

相关文章

editable type支持function实现不同行type分别为select、text

bootstrap table一般注重一列中所有行都是一个处理方式,很少对应有同一列不同行要处理成不同的形式。但是formate啊,index啊,这些倒是随着行变化。 那么结合x-editable呢,它本身type只支持text,select等string&#x…

《Flutter 控件大全》第九十六:TextField、EditableText、TextInput

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。EditableText EditableText是一…

fastadmin中使用 x-editable

fastadmin中的表格使用的是 bootstarp-table的插件, 其中 没有看到它集成 x-editable , x-eidtable 插件可以允许用户直接在表格的字段上去修改数据, 这个功能还是很方便的, 那么我们怎么去让fastadmin也拥有这样的功能呢? 网上有一个分享方法,很好的, 我在这里做一下记录, 不…

bootstrap X-editable使用。

x-editable英文官网 参考 – 中文文档 demo 需求:如下图所示,我想要在点击 高于20 时,弹出框内只显示20(弹出框做数字验证)。修改为50后点击对号保存。表格内的高于20 变为 高于50 。 最终效果如下图: 修…

bootstrapTable行内编辑----X-editable组件

阅读目录 一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案 1、文本框2、时间选择框3、下拉框4、复选框5、“阴魂不散”的select2 四、总结 正文 前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能&#x…

android editable接口,Spannable与Editable区别

在看TextView源码时候又看到了这两个接口:Spannable和Editable; 之前一直没有认真研究过两者的关系,现在看了源码记录下来。 1:两者属于继承关系,Editable继承于Spannable Editable: Spannable: 相较于Spa…

editable组件_表格行内编辑事件

1.简介 x-editable组件是一个适用于bootstrap(目前只更新到bootstrap3),jquery,jquery UI三种风格样式的弹出框编辑插件。本文根据项目需求主要介绍它在bootstrap-tabe中的应用。 x-editable开源地址:https://github.com/vitalets…

关于Editable的学习

Editable是EditText中用于获取字符串的一个类,里面的常用方法有 其实是一个类似字符串的类,常用的有append,delete 我们在这里删除用0到5位置的字符串,这个时候EditText上面显示的永远是从5开始以后的字符串

linux 开放5222端口,XMPP协议、IM、客户端互联详解

导读 对于推送,IM服务器,目前可以使用一些厂家提供的SDK来实现,但是我们的老板又总是担心使用别人的SDK,假如别人的服务出现问题,或者别人偷看咱们的信息,那岂不是出现很大问题了 聊一聊xmpp的服务器openfire和测试客户端spark 1、什么是XMPP 这里说一下XMPP,我在前几节说…

XMPP协议实现原理介绍

原文地址为: XMPP协议实现原理介绍 本文介绍XMPP协议原理及相关信息。 XMPP协议简介 XMPP(Extensible Messageing and Presence Protocol:可扩展消息与存在协议)是目前主流的四种IM(IM:instant messagin…

XMPP协议简介[转载]

1. 简介 XMPP来源于Jabber开源社区,基于XML,提供准实时的传递消息、在线状态和请求/响应服务。XMPP使用客户/服务模式,服务器之间能够相互连接,建立在面向连接的协议上,通常是TCP。 下图概要描述了XMPP架构&#xff1…

XMPP协议解析

XMPP国际标准的协议 可扩展的消息和展示的协议,是一种基础的开放式实时通信协议。可扩展新,强可读性。相比Email的发展史,163和qq邮箱之间的通信。为了兼容,符合同一种标准。即实现不同邮箱之间的通信。国内腾讯一家独大&#xf…

xmpp协议(即时通信协议规范)

转载自 https://www.cnblogs.com/jiyuqi/p/5085932.html 相关背景 IM(Instant Messaging)正在被广泛使用,特别是公司与它们的客户互动连接方案以及互联网与Web2.0相关的应用。为了解决即时通信的标准问题,IETF(互联网…

XMPP协议的原理介绍

XMPP(可扩展消息处理现场协议)是基于可扩展标记语言(XML)的协议,它用于即时消息(IM)以及在线现场探测。它在促进服务器之间的准即时操作。这个协议可能最终允许因特网用户向因特网上的其他任何人…

XMPP协议详解

原文链接:http://www.jianshu.com/p/a94749385755 xmpp协议详解一:xmpp基本概念 作者 riverli 关注 2015.07.30 14:22* 字数 3204 阅读 6104 评论 1 喜欢 17 概述 XMPP是一个开放式的XML协议,设计用于准实时消息和出席信息以及请求&#xff0…

物联网协议对比(HTTP、websocket、XMPP、COAP、MQTT和DDS协议)

目录 1、HTTP和websocket 2、XMPP 3、COAP 4、MQTT协议 5、DDS 对于物联网,最重要的是在互联网中设备与设备的通讯,现在物联网在internet通信中比较常见的通讯协议包括:HTTP、websocket、XMPP、COAP、MQTT 1、HTTP和websocket 在互联网…

XMPP基本概念

概述 XMPP是一个开放式的XML协议,设计用于准实时消息和出席信息以及请求-响应服务。 通用的架构 通常采用客户端服务器架构进行实现,其中客户端通过TCP方式使用XMPP访问服务器,服务器之间也采用TCP方式进行通信。 xmpp通用架构…

kafka的isr机制

Data Replication Kafka 的 Data Replication 需要解决如下问题: 怎样 Propagate 消息 在向 Producer 发送 ACK 前需要保证有多少个 Replica 已经收到该消息 怎样处理某个 Replica 不工作的情况 怎样处理 Failed Replica 恢复回来的情况 Propagate 消息 通过zook…

kafka-04数据同步原理ISR、ACK、LEO、HW

1. 分区策略 分区的原因 (1)方便在集群中扩展,每个 Partition 可以通过调整以适应它所在的机器,而一个 topic 又可以有多个 Partition 组成,因此整个集群就可以适应任意大小的数据了; (2&#…

Cisco ISR4221 路由器密码重置方法

【Cisco路由器重置】Cisco ISR4221 路由器密码重置方法 使用usb-console线连接路由器,使用secureCRT连接 记得使用串口serial模式,Port如果没有自动识别,可能是你没有安装FT232R USB UART驱动。教程:https://www.cnblogs.com/iBo…