当前位置: 首页 > news >正文

解决:使用layui.treeTable.updateNode,更新表格数据后,done里面的事件丢失问题

 1. 背景

在给树形表格添加行点击事件,并且只更新当前行数据。 treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据后,点击事件失效。

1. 给字段绑定事件:

class="link_a link_style"

              , {field: 'Name', title: '预算专项名称/项目名称', minWidth: 240, rowspan: 2, templet: function (d) {if (d.IsParent) {return `<a  href="javascript:;"class="link_a link_style internal_link"data-type="speProjCode"data-value="${d.Code}"data-name="${d.CtrlObjectValue1Name}">${d.CtrlObjectValue1Name}</a>`;} else {return `<a  href="javascript:;"class="link_a link_style internal_link"data-type="projCode"data-name="${d.Name}"data-value="${d.ExpBudProjectId}">${d.Name}</a>`;}}}

2. done里面的点击事件:click 

                treeTable.render({elem: '#SpeProjInfoSel', id: "SpeProjListId", method: "post", height: 'full-300', even: true, data: self.SpecProjInfoList, autoSort: false, page: false, css: [// 对开启了编辑的单元格追加样式'.layui-table-view td[data-edit]{color: #16B777;}'].join(''), cols: [cols, fundCols], limit: 20, tree: {view: {expandAllDefault: true,},customName: {children: "ProjInfoList",name: "Code",isParent: "IsParent"},data: {rootPid: "",},callback: {onExpand: function () {format.init();}}}, done: function (res) {format.init();form.render();$(".expandAll").on("click", function () {treeTable.expandAll("SpeProjListId", true);})$(".foldAll").on("click", function () {treeTable.expandAll("SpeProjListId", false);});urp.callbackFunction.Remark_callBack = function (value, tag) {var indexArr = tag.split(",");var indexs = indexArr[1].split("-");var list = self.SpecProjInfoList[indexs[0]].ProjInfoList[indexs[1]];if (indexArr[0] == "Remark") {list.Remark = value;}}//预算专项抽屉式弹窗(父) 这里的事件触发$(".link_a").click(function () {module.CustomFunction.configSpecInfo($(this).data("value"), $(this).data("name"), $(this).data("type"), $(this).attr("folder-width"));return;});}});

 3. 点击事件的回调函数:

 urp.callbackFunction.RefreshTable_Link_a=function(){};

函数里面使用了treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据。此时点击事件丢失。

4. 解决方法:  table.reload('SpeProjListId', {});重新渲染done里面的事件。

     CustomFunction: {configSpecInfo: function (value, valueName, type, folderWidth) {var paramData = {};if (type == "speProjCode") {paramData = module.SpecProjInfoList.find(speInfo => { return speInfo.CtrlObjectValue1 == value });}const area = folderWidth != undefined ? [folderWidth, '100%'] : (type == "projCode" || type == "projAppCode" ? ['70%', '100%'] : ['30%', '100%']);urp.callbackFunction.RefreshTable_Link_a = function (data) {//把数据塞到预算专项里面var result = module.SpecProjInfoList.find(obj => obj.Code == data.CtrlObjectValue1);result = $.extend(result, data)module.SpecProjInfoList = module.SpecProjInfoList.filter(speInfo => { return speInfo.Code != data.CtrlObjectValue1 });module.SpecProjInfoList = module.SpecProjInfoList.concat(result);format.init();
//使用updateNode渲染行数据treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);table.reload('SpeProjListId', {});format.init();form.render();}let linkInfo = module.CustomFunction.getLinkHref(type, value)urp.openWindow({href: linkInfo.href,title: linkInfo.title + ` - ${valueName}`,callbackFunction: 'RefreshTable_Link_a',area: area,target: 'parent',queryString: "viewMode=edit",ParamData: paramData,initOpt: {offset: 'r',anim: 'slideLeft',target: 'self',shade: 0.1,shadeClose: true,},})},getLinkHref: (type, value) => {switch (type) {case "speProjCode":return { href: `/BG/ExpBudCtrl/ExpBudProjSpeProjDetail?CtrlObjectValue1=${value}&IsDrawersWindow=true`, title: "预算专项信息" }case "projCode":return { href: `/BG/ExpBudProj/ExpBudProjectDetailR?ExpBudProjectId=${value}&IsDrawersWindow=true`, title: "项目预算信息" }case "projAppCode":return { href: `/PL/ProjectApp/ProjectAppDetailR?ProjCode=${value}&IsDrawersWindow=true`, title: "项目申报书信息" }}},}

4.  效果图

相关文章:

解决:使用layui.treeTable.updateNode,更新表格数据后,done里面的事件丢失问题

1. 背景 在给树形表格添加行点击事件&#xff0c;并且只更新当前行数据。 treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据后&#xff0c;点击事件失效。 1. 给字段绑定事件&#xff1a; class"link_a link_style" , {…...

【Linux】环境变量(初步认识环境变量)

文章目录 1. 环境变量1.1 基本概念 2. 认识常见环境变量2.1 PATH2.2 HOME2.3 SHELL2.4 PWD2.5 USER 3. 理解环境变量 1. 环境变量 在main函数的命令行参数中&#xff0c;有argc、argv、env三个参数。 argc&#xff1a;命令行参数的个数argc&#xff1a;存放每个参数的具体数值…...

79. 单词搜索

思路 每次以当前位置为初始位置开始遍历&#xff0c;看是否找到单词 &#xff08;以官方题解做出&#xff09; v:代表等于work[k]且已走过的位置 d:四个方向 回溯&#xff08;遍历&#xff09;&#xff1a; 匹配不上&#xff1a;终止 找到了&#xff1a;终止&#xff08;先…...

[单master节点k8s部署]28.Istio流量管理(四)

金丝雀发布实验 部署两个pod&#xff0c;他们分别是canary-v1和canary-v2。 随后进行service的部署&#xff1a; apiVersion: v1 kind: Service metadata:name: canary-svc34namespace: default spec:selector:apply: canaryports:- port: 80protocol: TCPtargetPort: 80进行…...

Windows 11 安装配置 Git 教程

目录 Git Windows 11 环境安装配置 Git Git Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是目前世界上最流行的版本控制系统&#xff0c;广泛应用于软件开发中。 以下是Git的一些关键特…...

Go基础学习11-测试工具gomock和monkey的使用

文章目录 基础回顾MockMock是什么安装gomockMock使用1. 创建user.go源文件2. 使用mockgen生成对应的Mock文件3. 使用mockgen命令生成后在对应包mock下可以查看生成的mock文件4. 编写测试代码5. 运行代码并查看输出 GomonkeyGomonkey优势安装使用对函数进行monkey对结构体中方法…...

PHP基础教程

PHP基础教程 1. PHP简介 PHP是一种广泛使用的开源服务器端脚本语言&#xff0c;它特别适用于网页开发&#xff0c;并可嵌入到HTML中使用。 2. PHP环境搭建 Windows: 可以使用XAMPP或WAMP。Mac: 可以使用MAMP。Linux: 可以使用XAMPP或LAMP。 3. 第一个PHP程序 创建一个名为…...

Python或R时偏移算法实现

&#x1f3af;要点 计算单变量或多变量时序距离&#xff0c;使用欧几里得、曼哈顿等函数量化不同时序差异。量化生成时序之间接近度相似性矩阵。使用高尔距离和堪培拉距离等相似度测量。实现最小方差匹配算法&#xff0c;绘制步进模式的图形表示。其他语言包算法实现。 &…...

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务&#xff08;Log Tank Service&#xff0c;简称 LTS&#xff09;&#xff0c;用于收集来自主机和云服务的日志数据&#xff0c;通过海量日志数据的分析与处理&#xff0c;可以将云服务和应用程序的可用性和性能最大化&#xff0c;为您提供实时、…...

Python--加载Hugging Face模型文件异常处理

尝试加载 Hugging Face 模型的配置文件时&#xff0c;无法从 https://huggingface.co 获取所需的 config.json 文件。这个错误通常是由于网络连接问题、访问受限或路径配置错误导致的。让我们一步步分析并解决这个问题。 可能原因及解决方案&#xff1a; 网络连接问题&#xf…...

补码加/减运算的具体示例

补码加法运算示例 示例&#xff1a;计算两个十进制数的和&#xff0c;35 18&#xff0c;假设使用8位二进制表示。 1、求原码&#xff1a; 35的原码&#xff1a;00100011 18的原码&#xff1a;00010010 2、求补码&#xff08;对于正数&#xff0c;补码与原码相同&#xff0…...

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…...

flume系列之:flume jmx页面导出flume、java进程等全部指标

flume系列之:flume jmx页面导出flume、java进程等全部指标 一、需求背景二、完整的jmx指标信息三、修改jmx指标导出规则四、启动jmx导出程序一、需求背景 目前jmx页面指标只导出了flume相关的指标,现在需要导出java相关的指标二、完整的jmx指标信息 主要有flume指标java进程指…...

(17)MATLAB使用伽马(gamma)分布生成Nakagami-m分布的方法1

文章目录 前言一、使用伽马分布生成Nakagami分布随机变量的方法一二、MATLAB仿真代码后续 前言 MATLAB在R2013a版本中引入Nakagami分布对象&#xff0c;可以用来生成Nakagami随机变量。但是在更早的MATLAB版本中&#xff0c;并没有可以直接生成 Nakagami分布的随机变量的内置的…...

NFT 是什么?

NFT 是什么? NFT,全称Non-Fungible Token,即“非同质化代币”,是一种基于区块链技术的独特数字资产。NFT的核心特性在于其唯一性、不可分割性和不可替代性,这使其与传统的加密货币(如比特币、以太坊等)形成了鲜明的对比。比特币等加密货币是同质化的,每个单位之间可以…...

mysql的学习

垂直连接union join是水平连接&#xff0c;UNION 是垂直连接&#xff0c;它是把两张表的结果集按列堆叠&#xff0c;行数增加了&#xff0c;但列数保持不变。 UNION 垂直连接的作用 在 MySQL 中&#xff0c;UNION 可以将两个具有相同列数且列数据类型兼容的查询结果合并在一…...

微服务之间的相互调用的几种常见实现方式对比

目录 微服务之间的相互调用的几种实现方式 一、HTTP HTTP/RESTful API调用工作原理 二、RPC 设计理念与实现方式 协议与传输层 RPC远程调用工作原理 应用场景与性能考量 特点 三、Feign 设计理念与实现方式 协议与传输层 Feign调用的基本流程 Feign调用的工作原理…...

FPGA时序分析和约束学习笔记-(1、FPGA基本原理)

FPGA时序分析和约束学习笔记-&#xff08;1、FPGA基本原理&#xff09; Field现场Programmable可编程Gate门Array阵列 1、FPGA基本资源组成 可编程逻辑功能块&#xff08;logic elements &#xff0c;缩写LE&#xff09; 片内互联线&#xff08;interconnect&#xff0c;缩写…...

华为仓颉语言入门(9):for-in表达式

for-in 表达式用于遍历序列,它会依次访问序列中的每个元素,直到遍历完成。它常用于处理列表、数组或其他集合类型,能够有效简化代码,减少重复劳动。其基本语法如下: for (循环变量 in 序列) {循环体 }在 for-in 表达式中,每次循环都会检查是否遍历了序列中的所有元素。如…...

Vue3中使用axios

Promise介绍 同步代码与异步代码 安装并引入axios npm install axios 此时package.json里面就多了axios依赖 引入axios 获取数据 Axios GET参数构成&#xff1a;axios.get(url,{config{},…{}…}) url: 字符串&#xff1a;目标服务器的地址&#xff0c;如 https://api.examp…...

FalkorDB 的边存储原理:为什么查邻居是 O(degree)?

很多人第一次看到 FalkorDB 的架构时&#xff0c;会有一个疑问&#xff1a;它不用传统 adjacency list&#xff08;邻接链表&#xff09;&#xff0c;而是用 sparse matrix&#xff08;稀疏矩阵&#xff09;维护边&#xff0c;那它到底怎么高效找到某个节点的所有边&#xff1f…...

Seaborn可视化从入门到精通:风格设置、调色板与常用图表详解

Seaborn可视化 Seaborn的介绍 简介 ​  Seaborn 是以 matplotlib为底层&#xff0c;更容易定制化作图的Python库。官网http://seaborn.pydata.org/ ​  Seaborn其实是在matplotlib的基础上进行了更高级的API封装&#xff0c;从而使得作图更加容易。在大多数情况下使用Seabo…...

告别HAL_Delay!用STM32CubeMX定时器PWM模式优雅驱动ULN2003步进电机

基于STM32CubeMX的PWM硬件驱动ULN2003步进电机全方案 在嵌入式开发中&#xff0c;步进电机控制是一个经典课题。传统方法往往依赖软件延时或基础定时器中断&#xff0c;这不仅消耗宝贵的CPU资源&#xff0c;在多任务场景下还会导致系统响应迟滞。本文将展示如何利用STM32定时器…...

P15906 [TOPC 2024] Business Magic 题解

P15906 [TOPC 2024] Business Magic Link: https://www.luogu.com.cn/problem/P15906 题目描述 沿街有 nnn 家商店&#xff0c;按从近到远的顺序编号为 111 到 nnn。上个月&#xff0c;商店 kkk 的净利润为 rkr_krk​。如果 rkr_krk​ 为正&#xff0c;表示盈利 rkr_krk​ 美…...

保姆级教程:在Windows上用Python连接CoppeliaSim远程API(附避坑指南)

从零开始掌握CoppeliaSim与Python的远程控制&#xff1a;Windows环境实战指南 在机器人仿真领域&#xff0c;CoppeliaSim&#xff08;原V-REP&#xff09;因其强大的功能和友好的用户界面而广受欢迎。对于希望将Python的灵活性与CoppeliaSim的仿真能力结合的研究者和工程师来说…...

别再死记硬背了!用‘榨汁机’和‘张三的饭量’搞定高数函数定义域(附3类题型解法)

用生活化思维破解高数函数定义域&#xff1a;从榨汁机到张三的饭量 第一次翻开高等数学教材时&#xff0c;那些密密麻麻的函数符号让我头晕目眩。直到有一天&#xff0c;我在厨房榨果汁时突然顿悟——原来函数就像一台榨汁机&#xff0c;而定义域不过是张三在不同状态下的饭量。…...

Python OAuth终极指南:requests-oauthlib快速入门与实战

Python OAuth终极指南&#xff1a;requests-oauthlib快速入门与实战 【免费下载链接】requests-oauthlib OAuthlib support for Python-Requests! 项目地址: https://gitcode.com/gh_mirrors/re/requests-oauthlib &#x1f510; Python OAuth认证是现代Web开发中不可或…...

cp520靶场学习笔记

正文1、端口扫描2、web登录页面用户密码爆破3、文件上传漏洞利用4、nc 反弹5、Linux用户检索与特权分析6、图片隐写7、解密与格式转换8、cp命令横向获取用户密码9、diff命令进行文件比较正文 kali攻击机地址&#xff1a;192.168.1.4 靶场地址&#xff1a;192.168.1.15 1、端口…...

API 监控告警系统

LogMonitor - API监控告警系统 基于Python的智能API监控系统&#xff0c;集成Splunk日志分析和钉钉告警&#xff0c;支持多种API类型的实时监控和趋势分析。 代码地址 https://github.com/junbingliu007/log_monitor 功能特性 多API类型监控&#xff1a;支持多种API类型智…...

如何使用谷歌全新AI智能体,实现超越普通搜索的信息追踪

在谷歌 I/O 2026 开发者大会主题演讲中&#xff0c;这家科技巨头宣布了搜索功能中全新的智能体能力。用户现在可以创建、自定义并管理多个 AI 智能体&#xff0c;以便持续获取感兴趣话题的最新动态。此次发布是谷歌大力推进智能体 AI 系统战略的重要组成部分&#xff0c;这类系…...