首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在Admin-on-rest客户端的列表视图中编辑'record‘对象?

在Admin-on-rest框架中,客户端列表视图默认是不允许编辑记录的。但是,可以通过自定义列表视图组件来实现这一功能。以下是如何在Admin-on-rest客户端的列表视图中编辑'record'对象的方法:

基础概念

  • Admin-on-rest: 是一个用于构建管理界面的React框架。
  • 列表视图: 显示数据集合的界面。
  • 编辑视图: 允许用户修改单个数据记录的界面。

相关优势

  • 提高用户体验:允许用户在浏览列表时直接编辑数据,减少点击和跳转的次数。
  • 提升效率:对于频繁需要编辑的数据,直接在列表中编辑可以节省时间。

类型

  • 内联编辑: 在列表项内部直接显示编辑控件。
  • 弹出编辑: 点击编辑按钮后弹出一个模态框进行编辑。

应用场景

  • 数据库记录管理:如客户信息、产品列表等。
  • 内容管理系统:文章、页面等内容的快速编辑。

实现方法

以下是一个简单的示例,展示如何在Admin-on-rest的列表视图中添加编辑功能:

代码语言:txt
复制
import * as React from 'react';
import { List, Datagrid, EditButton, TextField } from 'admin-on-rest';

const MyList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="name" />
            <EditButton basePath="/myresource" />
        </Datagrid>
    </List>
);

export default MyList;

在这个例子中,EditButton组件被添加到了Datagrid中,允许用户在列表视图中点击编辑按钮来编辑记录。

遇到的问题及解决方法

问题:如何在点击编辑按钮后直接在列表项中显示编辑控件?

解决方法:可以使用自定义组件来实现内联编辑功能。

代码语言:txt
复制
import * as React from 'react';
import { List, Datagrid, EditButton, TextField, TextInput } from 'admin-on-rest';

const InlineEdit = ({ record, resource, basePath, translate }) => (
    <div>
        <TextInput source="name" record={record} />
        <button onClick={() => saveRecord(record)}>保存</button>
    </div>
);

const MyList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <InlineEdit />
            <EditButton basePath="/myresource" />
        </Datagrid>
    </List>
);

export default MyList;

在这个示例中,InlineEdit组件会在列表项中显示输入框,允许用户直接编辑数据。需要实现saveRecord函数来处理数据的保存逻辑。

注意事项

  • 确保后端API支持接收和处理更新请求。
  • 考虑数据一致性和并发编辑的问题,可能需要实现乐观锁或其他并发控制机制。

通过上述方法,可以在Admin-on-rest的列表视图中实现记录的编辑功能,从而提升应用的用户体验和工作效率。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET MVC学习笔记06编辑方法和编辑视图

调试,浏览,然后点击一个条目,进入编辑。 ? 如上图所示,Edit(编辑)链接是由Views\ Movies\Index.cshtml 视图中Html.ActionLink方法所生成的....最后一个参数是一个匿名对象 (anonymous object),用来生成路由数据 (在上图中,ID 为1 的)。...他们得到一个电影对象(或对象列表中,如本案例的 Index),并把模型数据传递给视图。Create方法传递一个空的影片对象给Create视图。...(使 用 Distinct修饰符,不会添加重复的流派 – 例如,在我们的示例中添加了两次喜剧)。 该代码然后在ViewBag对象中存储了流派的数据列表。...的SelectList对象在ViewBag作 为存储类数据(这样的电影流派),然后在下拉列表框中的数据访问类别,是一个典型的MVC applications的方法。

5K50

Power BI数据回写SQL Server(1)没有中间商赚差价

我们在【重磅来袭】在Power BI 中使用Python(4)——PQ数据导出&写回SQL 讲过如何在Power BI中调用Python实现powerquery获取和处理的数据回写到MySQL中。...点击:转换-运行Python脚本,编辑代码,运行。...,运行后增加了5行2019/1/1的数据,查询一次却增加多行的原因我们在【重磅来袭】在Power BI 中使用Python(4)——PQ数据导出&写回SQL中也说过,尚未明确知晓什么原理,只能通过其他办法来处理...那么重要的就来了: 如果我们能够将PQ返回的表按行转换为一条条的record记录,再逐条导入SQL Server,那么我们的需求就得到了解决。...---- 以下,后续文章预告: 今天我们讲的是PQ生成record列表,再逐个导入SQL中,那有没有办法将PQ中的table作为一个整体导入SQL中呢?

3.3K31
  • 2-UFT简介

    “编辑窗口”:资源管理器的编辑窗口,包括Action的代码视图,该测试方案的Action流程视图等 “工具箱”:如下图所示,分类显示库函数、测试对象和本地函数等 “Data”:参数化的实际传入值和输出值等等...2、录制一个简单脚本 因为录制安装UFT自带的飞机订票系统,该系统是个window客户端程序,因此只需要ActiveX插件即可。...detail/henujyj/9468705 录制过脚本后 查看UFT左边的Toolbox如下: 视图中的Active Screen,根据光标所在的代码行,显示对应的程序截图: 3、...如下: 关键字视图: 专家视图: 两种视图的区别是:关键字视图的每一步都是在视图中记录成一行,而专家视图必须定位到业务操作最终的对象,并且每一句的结束,以其最终对象的业务行为完毕为基准...或是通过开始菜单打开的应用程序; Application specified below:仅录制和运行添加到列表中的应用程序,通过单击“+”按钮来添加应用程序(添加程序的路径) 4)录制模式的切换

    1.2K10

    Salesforce LWC学习(四十) dynamic interaction 浅入浅出

    因为详情页的组件使用的 lightning-record-form,只要有权限,就会展示编辑页面。问题就来了。 1. 如果右侧的信息更改了,中间的内容是否可以动态改变呢?  2....使用Dynamic Interaction,Lightning页面上某个组件中发生的事件,例如用户单击列表视图中的某个item,可以更新页面上的其他组件。...当目标组件的属性显示在事件属性编辑器中时,将忽略目标组件中的信息组件。 如果为包含动态交互的页面切换页面模板,则可用模板列表仅显示支持动态交互的模板。...在富文本编辑器中输入表达式时,autocomplete不起作用。...我们点击了一个item,右侧进行编辑,将3更改成2. 2. save以后,左侧的列表也会自动的变更。

    97630

    钉钉消息已读、未读咋实现的嘞?

    有没有成本低的方案呢 小谈 挺好的一个问题,可惜其他的回答要么是大而化之想当然,要么是顾左而言他,没有一个正经的回答。...来处理,你跟"虚拟人"组成了一个"对话列表(msg_group)" “虚拟人”与正常人的区别就是,虚拟人与你的对话是单向的,只能他向你发消息,你无法回复。...所有,判断有没有小红点,或者小红点的数字是多少,就是简单的获取你与虚拟人的对话的未读的消息的数量。...这个队列有基本的信息:参与人(图中的例子只有2个,你和“虚拟人”),maximal_msg_id。...热门内容 用户互动非常活跃,所以在写入log record的时候,会直接同步更新缓存,但是缓存的数据并不保证十分准确,它只是迷惑用户的,准确的数据是以log record为准的,你在wb经常可以看热门内容的点赞数跟实际的数量不符

    53410

    《手Q Android线程死锁监控与自动化分析实践》

    这类由死锁造成的功能不可用的问题,具有表象简单但影响非常严重的特点。一般用户在遇到这类问题后,除了采取杀掉进程重启的策略,没有其他办法继续使用应用。...原因分析完成以后,就可以进行提单,然后再跟进每个卡死问题的解决。 整个方案的关键是上图中两个标红的部分:客户端上报线程卡死的关键信息,后台自动化分析卡死原因。下面将详细介绍这两部的实现。...如果有办法能够让这些不同的地址都指向同一个地址,只要能够做到这件事情,那么问题就迎刃而解。...具体的解决方案的分析思路如下: 1、既然阻塞的LockSupport锁对象地址是不同的,那么是否可以寻找系统堆栈中LockSupport锁对象之前的有没有什么共同特征呢?...2、分析所有dump的堆栈后发现,在系统堆栈的LockSupport锁对象之前,有相同的函数调用,可以提取这些关键的字符串,将其统一特征进行归类。

    5.9K91

    《手Q Android线程死锁监控与自动化分析实践》

    这类由死锁造成的功能不可用的问题,具有表象简单但影响非常严重的特点。一般用户在遇到这类问题后,除了采取杀掉进程重启的策略,没有其他办法继续使用应用。...原因分析完成以后,就可以进行提单,然后再跟进每个卡死问题的解决。 整个方案的关键是上图中两个标红的部分:客户端上报线程卡死的关键信息,后台自动化分析卡死原因。下面将详细介绍这两部的实现。...上图中右的代码中121行已经获取了sychornized锁,但是左边的java堆栈中并没有展示对应锁的信息,故使用抓取java堆栈的方式不可行。 既然使用Java抓取堆栈信息不可行,有没有其他方案呢?...右图的代码在执行lock.lock()之后,线程已经获取了LockSupport锁,但是从左边的系统堆栈中却没有这个锁的信息。 这将是后续进行自动化分析的一个难点问题。那么有没有什么解决方案?...具体的解决方案的分析思路如下: 1、既然阻塞的LockSupport锁对象地址是不同的,那么是否可以寻找系统堆栈中LockSupport锁对象之前的有没有什么共同特征呢?

    2.2K90

    二、设计模式总览及工厂模式详解

    简单工厂适用于工厂类负责创建的对象较少的场景,且客户端只需要传入工厂类的参数,对于如何创建对象的逻辑不需要关心。...在工厂方法模式中用户只需要关心所需产品对应的工厂,无须关心创建细节,而且加入新的产品符合开闭原则。...3.3.4.优缺点 工厂方法适用于以下场景: 创建对象需要大量重复的代码。 客户端(应用层)不依赖于产品类实例如何被创建、实现等细节。 一个类通过其子类来指定创建哪个对象。...客户端(应用层)不依赖于产品类实例如何被创建、实现等细节,强调的是一系列相关的产品对象(属于同一产品族)一起使用创建对象需要大量重复的代码。...那么上图中,颜色最深的正方形就代表美的洗衣机、颜色最深的圆形代表美的空调、颜色最深的菱形代表美的热水器,颜色最深的一排都属于美的品牌,都是美的电器这个产品族。

    43230

    企业应用架构模式 读书笔记

    模式列表 Active Record 活动记录:包装数据库表或视图中的行,封装数据库访问,并将业务逻辑加到该数据上的对象。...Class Table Inheritance 类表继承:表示了类的继承层次,每个类都对应一个表。 Client Session State 客户会话状态: 将会话状态存储于客户端。...Data Mapper 数据映射器:由映射器组成的一个层次,它在对象和数据库间之间移动数据,并保证他们之间互相独立,映射器间互相独立。...Data Transfer Object 数据传输对象:在进程间进行数据传递的对象,目的是减少进程间方法调用的次数。...引言 0.1 架构 最高层次的系统分解 系统中不易改变的决定 涉及企业应用主要组成部分和希望能尽早做出的决定。 层次方式,管道方式,过滤方式

    60130

    unity3d自学教程_3D技巧

    面板左侧有Favorites和Assets两个分支,其中Assets分支为所有资源的树状层级列表,类似于Windows资源管理器,而Favorites分支可存放经常访问的资源以及某次资源查找的结果,类似于收藏夹...面板右侧是以图标(或列表)形式显示的资源集合,其右上方放大镜图标所标识的输入框为资源查找框,可输入资源名称、类型和标签进行查找。...层级面板(Hierarchy):列出当前场景视图中的所有游戏对象(GameObject)。一旦游戏对象在场景视图中被添加或删除,在层级视图中也将同步更新。...屏幕坐标的本质是激活的视口坐标(相机有多个,每个相机有自己的视口坐标,屏幕对应于被激活相机的视口,因此屏幕坐标是被激活相机的视口坐标)。鼠标位置坐标属于屏幕坐标。...Reset:用户点击属性监视面板(Inspector)的Reset按钮或首次添加该组件时执行,仅在编辑模式下执行。 OnDestroy:当游戏对象将被销毁时执行。

    3.3K20

    salesforce零基础学习(一百四十)Record Type在实施过程中的考虑

    是否需要 Record Type 1. 业务需求 是否需要不同的流程:确定不同的组或部门是否需要不同的业务流程。Record Type可以实现不同的组或者部门显示不同的定制的布局和选项列表值。...Profile Assignment只会控制对象的创建和编辑访问权限,但不控制读取访问权限。...Public Read/Write,代表着Sales Profile User可以访问并且编辑Business Record Type的Account记录,只是无法创建而已。...如果系统中有获取当前表的 Picklist Value或者列表检索等,需要检查并且做出适当的逻辑修改。...Record Type部署举例 我们在实际的需求确定以后,一定是在sandbox测试完成以后才可以进行部署的,这里推荐的是使用metadata api方式部署而不是change set。

    17610

    zabbix监控主动模式、被动模式、添加监控主机、添加自定义模板、处理图形乱码、自动发现

    19.7 主动模式和被动模式 主动模式和被动模式所针对的对象是客户端,意思是客户端主动向服务端上报数据和由服务端到客户端采集数据。数据的提交时间在监控中心设置。...点击“添加”进入主机群组列表: 然后点击“主机”: 点击“创建主机:” 在此配置要客户端主机名称(在客户端zabbix配置文件:/etc/zabbix/zabbix_agentd.conf中的Hostname...将template os Linux模板导出,在此会生成一个XML文件,然后编辑该文件,编辑完成后再导入模板列表(一定要记得改模板名称)。。。...Why:字符集(已配置,排除该原因);像图中这种有规律的“乱码”不是字符集问题,而是缺少相应的字库(中文字库)。...解决办法: 编辑服务端配置文件: [root@z1 ~]# vim /usr/share/zabbix/include/defines.inc.php #在该文件下搜ZBX_FONTPATH #在参数

    1.6K30

    Godot游戏开发实践之一:使用High Level Multiplayer API制作多人游戏(上)

    在多人游戏中,有一个重要的概念是区分:服务端和客户端。...再举个例子:玩家A进入多人游戏场景,那么服务器端和客户端都有玩家A对象,但实际上只有一个地方(比如服务端)可以操作控制自己的角色,比如玩家A在服务器端通过键盘事件控制位置移动后,客户端几乎同时也能看到玩家...游戏联网后,每个玩家(服务器、客户端)都有一个特定的网络 id (在前面的场景结构图中,两个玩家 1 和 62889 实际就是他们各自的 ID ),通过这个 id 利用 rpc_id 或者 rset_id...他们三个有一个服务端,两个客户端) 相对于玩家A电脑中的场景:玩家A对象是主人节点,玩家B和玩家C是对应的奴隶节点 同理,相对于玩家B中的场景:玩家B对象是主人节点,A和C都是奴隶节点 玩家A只能是玩家...) 不管你有没有搞懂,反正我是没办法再举例子了。太混乱了!小二,来瓶 80 年的 XO 压压惊……“酒醒后第二天,发现下图能看懂了!”

    1.9K00

    UE4 GamePlay架构学习篇

    AI有自己的独立控制器,在Pawn上面进行设置即可。可在蓝图中选择,在这里还会衍生出AITree等一系列的AI模块的东西。...2>当前不止第一条,还有一些射线检测; 3>GM的命令行 4>客户端的HUD和视口GameViewPortClient 5>PlayerCameraManager相机管理 用于播放相机动画, 以及ShakeCamera...12>AHUD: 角色的2D视口绘制类,就是UI类,比如绘制一个FPS游戏的准心 13>UMG: 可视化编辑的UI系统,就像cocos2d里面的cocosstudio编辑UI的界面的工具。...14>UMG->Slate: 它是UMG的底层实现,也是UE4编辑器界面使用的GUI的架构,也就是说UE4的编辑器界面就是用Slate写的。...16>UEditorViewportClient: 编辑器的视口管理 17>AGameUserSetting: 游戏的默认存档设置,比如全局的抗锯齿等级等。

    1.6K30

    odoo ORM API学习总结兼orm学习教程

    返回 date/datetime结果对象 static context_today(record, timestamp=None)[源代码] 按客户端时区以适合date字段的格式返回当前日期...注解 此方法不是用作默认初始值设定项,因为datetime字段在客户端显示时会自动转换。对于默认值,应使用now() 参数 record – 从中获取时区的记录集。...这意味着视图中不存在的字段在创建记录期间不会触发调用。...在出现字段的表单视图中,当修改某个给定字段时,将调用该方法。在包含表单中存在的值的伪记录上调用该方法。该记录上的字段赋值将自动返回客户端。...使用[]表示匹配所有 fields (list) – 对象上指定的列表视图中存在的字段列表。

    13.5K10

    Asp.Net MVC +EntityFramework主从表新增编辑操作的实现(删除操作怎么实现?)

    Index :查询Table List Create :新增页面 Edit : 编辑页面 EditForm :Partial View内嵌在Create 和Edit页面中 _OrderDetailForm...,在Controller的Create,Edit 方法中的Order就是没有[ObjectState]这个字段的值;所以在Controller层还得写很多代码来修改实体状态 Controller层代码...[ObjectState]这个字段的值序列化所以写了一个foreach来修改状态,不知道你们有没有什么好的解决方案 Popup Modal编辑子表数据代码 新增表体按钮 $('#neworderdetailbutton...用于生产对应的Partial View 我在这里也试过在OrderController中不添加对子表操作的Action,完全使用JS完成对行的操作,但在对编辑现有表体数据时出现了问题。...后来注销掉了@*@Html.Partial("_OrderDetailForm")*@ 现在还有非常棘手的问题就是如何进行删除操作,一旦在编辑状态下,把其中一个表体的记录删掉,删除后就没办法把数据提交到后台

    1.9K80

    iOS应用架构谈 本地持久化方案及动态部署

    在天猫客户端,我去的时候天猫这个App就已经属于基本毫无持久层可言了,比较混乱。...如果A请求的一系列同步操作里面包含了插入某个对象的操作,B请求的一系列同步操作里面正好又删除了这个对象,那么由于到达次序的先后问题错乱,就导致这个数据没办法删除。...双向数据同步实现上会比单向数据同步要复杂一些,而且有的时候还会存在实时同步的需求,比如协同编辑。...在发起同步请求之前,我们都应该先去查询有没有待执行的列表,当待执行的操作列表同步完成之后,就可以删除里面的记录了,然后再把本地待同步的数据交给服务器。同步完成之后就可以把这些数据删掉了。...何时从服务器拉取待执行列表 每次要把本地数据丢到服务器去同步之前,都要拉取一次待执行列表,执行完毕之后再上传本地同步数据 每次进入相关页面的时候都更新一次,看有没有新的操作 对实时性要求比较高的,要么客户端本地起一个线程做轮询

    92070

    Kafka如果丢了消息,怎么处理的?

    在producer得到ack后,哪怕是所有机器都停电,数据也至少会存在于leader的磁盘内。 上面第三点提到了ISR的列表的follower,需要配合另一个参数才能更好的保证ack的有效性。...ISR是Broker维护的一个“可靠的follower列表”,in-sync Replica列表,broker的配置包含一个参数:min.insync.replicas。...该参数表示ISR中最少的副本数。如果不设置该值,ISR中的follower列表可能为空。此时相当于acks=1。 如上图中: acks=0,总耗时f(t) = f(1)。...Producer Producer丢失消息,发生在生产者客户端。 为了提升效率,减少IO,producer在发送数据时可以将多个请求进行合并后发送。被合并的请求咋发送一线缓存在本地buffer中。...在正常情况下,客户端的异步调用可以通过callback来处理消息发送失败或者超时的情况,但是,一旦producer被非法的停止了,那么buffer中的数据将丢失,broker将无法收到该部分数据。

    1.1K20

    必看的高频面试题!

    在producer得到ack后,哪怕是所有机器都停电,数据也至少会存在于leader的磁盘内。 上面第三点提到了ISR的列表的follower,需要配合另一个参数才能更好的保证ack的有效性。...ISR是Broker维护的一个“可靠的follower列表”,in-sync Replica列表,broker的配置包含一个参数:min.insync.replicas。...该参数表示ISR中最少的副本数。如果不设置该值,ISR中的follower列表可能为空。此时相当于acks=1。 如上图中: acks=0,总耗时f(t) = f(1)。...Producer Producer丢失消息,发生在生产者客户端。 为了提升效率,减少IO,producer在发送数据时可以将多个请求进行合并后发送。被合并的请求咋发送一线缓存在本地buffer中。...在正常情况下,客户端的异步调用可以通过callback来处理消息发送失败或者超时的情况,但是,一旦producer被非法的停止了,那么buffer中的数据将丢失,broker将无法收到该部分数据。

    36510
    领券