Easyui datagrid formatter 删除行失败解决

devtools/2024/11/29 1:19:03/

Easyui datagrid formatter 删除行失败解决

问题现象

使用formatter 为每行新增一个删除操作,,删除第一个行的时候没问题,如果存在多行的时候,当删除行时,提示错误
在这里插入图片描述
在这里插入图片描述

问题原因

因为是使用 formatter 相当于每行在渲染的时候index已经固定了,因此我在删除的时候就会出现index错误

解决方案

1、使用checkbox选择框进行删除(非行编辑);
2、在每次删除之后重新的渲染formatter 使得index更新

由于需求要求按行删除,因此选择方案2

错误代码

javascript">function formatOpt(value, row, index){return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> '
}/*删除行*/
function deleteRow(index){$('#addTable').datagrid.('deleteRow',index)
}

修改后代码

javascript">function formatOpt(value, row, index){return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> '
}/*删除行*/
function deleteRow(index){console.log('index',index)let dg = $('#addTable');// 从数据源中删除该行数据let dataSource = dg.datagrid('getData');dataSource.rows.splice(index, 1);dg.datagrid('loadData', dataSource);// 重新设置formatter相关逻辑,更新索引dg.datagrid('getColumnOption', 'id').formatter = function(value, row, index){return '<a href="javascript:void(0)" οnclick="deleteRow('+index+')"><font color="blue" style="text-decoration:underline">删除</font></a> ';};
}

如果每次删除之后和服务器交互刷新datagrid也可以解决此问题;


http://www.ppmy.cn/devtools/137796.html

相关文章

(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验二----网络分析(超超超详细!!!)

相信实验一大家已经完成了&#xff0c;对Arcgis已进一步熟悉了&#xff0c;现在开启第二个实验 ArcMap实验--网络分析 目录 ArcMap实验--网络分析 1.1 网络分析介绍 1.2 实验内容及目的 1.2.1 实验内容 1.2.2 实验目的 2.2 实验方案 2.3 实验流程 2.3.1 实验准备 2.3.2 空间校正…

python学opencv|读取图像

【1】引言 前序学习了使用matplotlib模块进行画图&#xff0c;今天开始我们逐步尝试探索使用opencv来处理图片。 【2】学习资源 官网的学习链接如下&#xff1a; OpenCV: Getting Started with Images 不过读起来是英文版&#xff0c;可能略有难度&#xff0c;所以另推荐一…

YOLOv7论文讲解和代码复现

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

物联网实验室建设方案

一、物联网实验室建设 (1) 基础理论教学云平台 唯众基础理论教学云平台是一个专为物联网相关专业教学打造的综合性在线教学平台。该平台凭借先进的技术架构和丰富的教学资源&#xff0c;为师生提供了一个高效、便捷、互动的学习环境。以下是该平台的主要特点和功能描述&#…

Oracle-伪劣rowid和rownumber的用法

-- 伪列 ROWID 物理地址 -- 使用ROWID可以快速的定位表中的某一行 -- ROWID值唯一 用来删除重复数据 -- 建表造数测试 -- rowid 的用法 select rowid,d.* from dept_test d; -- 删除重复数据 select a.deptno,min(rowid) as rd from dept_test a group by a.deptno; sele…

STM32完全学习——使用标准库完成PWM输出

一、TIM2初始化 我这里使用的是STM32F407ZGT6这个芯片&#xff0c;我这里使用的是定时器TIM2来完成PWM输出&#xff0c;由于这里没有使用中断&#xff0c;因此不需要初始化NVIC&#xff0c;下面先来进行定时器的相关初始化 TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStruct;R…

Zabbix 模板翻译自动化教程

在企业 IT 运维管理中&#xff0c;Zabbix 作为一款强大的开源监控平台被广泛应用。而 Zabbix 模板作为监控配置的重要组成部分&#xff0c;用来定义监控项、触发器、图形等。随着国际化的需求增加&#xff0c;Zabbix 模板的翻译工作变得日益重要&#xff0c;特别是在需要为不同…

LeetCode 404.左叶子之和

题目&#xff1a;给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 思路&#xff1a;一个节点为「左叶子」节点&#xff0c;当且仅当它是某个节点的左子节点&#xff0c;并且它是一个叶子结点。因此我们可以考虑对整 node 时&#xff0c;如果它的左子节点是一个叶子…