解决:使用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.  效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/439632.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI2.0时代,普通小白如何通过AI月入30万

最近这2年AI真的太火了&#xff0c;很多人都在讨论怎么用AI赚钱、提高效率。其实&#xff0c;我觉得AI并没有那么复杂&#xff0c;尤其是如果你不做AI底层研究&#xff0c;只是利用它来帮你省事、提效、赚钱&#xff0c;那就像当初学用电脑、用手机一样简单。你不需要懂AI的技术…

论文阅读:PET/CT Cross-modal medical image fusion of lung tumors based on DCIF-GAN

摘要 背景&#xff1a; 基于GAN的融合方法存在训练不稳定&#xff0c;提取图像的局部和全局上下文语义信息能力不足&#xff0c;交互融合程度不够等问题 贡献&#xff1a; 提出双耦合交互式融合GAN&#xff08;Dual-Coupled Interactive Fusion GAN&#xff0c;DCIF-GAN&…

Oracle 数据库安装和配置详解

Oracle 数据库安装和配置详解 Oracle 数据库是一款功能强大、广泛使用的企业级关系数据库管理系统 (RDBMS)&#xff0c;适用于处理大型数据库和复杂事务。本文将介绍如何在 Linux 和 Windows 环境下安装 Oracle 数据库&#xff0c;并对其进行基本配置&#xff0c;帮助开发者快…

国外电商系统开发-运维系统拓扑布局

点击列表中设备字段&#xff0c;然后定位到【拓扑布局】中&#xff0c;可以看到拓扑发生了变化 再回头&#xff0c;您再次添加一个服务器到系统中&#xff0c;并且选择该服务器的连接节点为您刚才创建的“SDN路由器”&#xff0c;保存后&#xff0c;您可以看到这个服务器连接着…

红帽操作系统Linux基本命令2( Linux 网络操作系统 06)

本文接着上篇Linux常用命令-1继续往后学习其他常用命令。 2.3 目录操作类命令 1&#xff0e;mkdir命令 mkdir命令用于创建一个目录。该命令的语法为&#xff1a; 上述目录名可以为相对路径&#xff0c;也可以为绝对路径。 mkdir命令的常用参数选项如下。 -p&#xff1a;在创…

通过dem2terrain生成MapboxGL地形服务

概述 MapboxGL在2的版本之后通过地形服务开始支持三维的展示了&#xff0c;之前也有文章“mapboxGL2中Terrain的离线化应用”对该服务进行过说明与分析。前些天在翻公众号的时候翻到了dem2terrain可以生成地形服务&#xff0c;同时做了一些优化&#xff0c;今天就给大家分享一…

畅享免费服务:PDF 转图片在线转换软件的魅力

为了方便在社交媒体上分享文档内容&#xff0c;还为了更好地适应特定的编辑需求&#xff0c;将 PDF 文件转换为图片格式都具有重要的意义。而如今&#xff0c;幸运的是&#xff0c;有许多pdf转图片在线转换免费工具为我们提供了便捷、高效的 PDF 转图片服务。接下来&#xff0c…

MongoDB 数据库服务搭建(单机)

下载地址 下载测试数据 作者&#xff1a;程序那点事儿 日期&#xff1a;2023/02/15 02:16 进入下载页&#xff0c;选择版本后&#xff0c;右键Download复制连接地址 下载安装包 ​ wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-5.0.14.tgz​ …

Redis: Sentinel哨兵监控架构及环境搭建

概述 在主从模式下&#xff0c;我们通过从节点只读模式提高了系统的并发能力并发不断增加&#xff0c;只需要扩展从节点即可&#xff0c;只要主从服务器之间&#xff0c;网络连接正常主服务器就会将写入自己的数据同步更新给从服务器&#xff0c;从而保证主从服务器的数据相同…

SQL自用小结

推荐一下这个知识点总结 《数据库系统概论》第五版 学习笔记总目录 1. SQL概述 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于定义、查询、更新和控制关系数据库的标准化语言。 它包含了数据定义语言&#xff08;DDL&#xff0…

51单片机系列-按键检测原理

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 独立按键是检测低电平的。 下面我们来看一张对应的电路原理图&#xff1a; 在这张图当中&#xff0c;P1&#xff0c;P2&#xff0c;P3内部都上拉了电阻&#xff0c;但是P0没有&am…

码随想录算法训练营第62天|卡码网:97. 小明逛公园、127. 骑士的攻击

1. 卡码网 97. 小明逛公园 题目链接&#xff1a;https://kamacoder.com/problempage.php?pid1155 文章链接&#xff1a;https://www.programmercarl.com/kamacoder/0097.小明逛公园.html 思路&#xff1a; 使用Floyd 算法&#xff0c;目的是解决多源最短路问题&#xff0c;即 …

Java项目实战II基于Java+Spring Boot+MySQL的房产销售系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者 一、前言 随着房地产市场的蓬勃发展&#xff0c;房产销售业务日益复杂&#xff0c;传统的手工管理方式已难以满…

机器学习/数据分析--用通俗语言讲解时间序列自回归(AR)模型,并用其预测天气,拟合度98%+

时间序列在回归预测的领域的重要性&#xff0c;不言而喻&#xff0c;在数学建模中使用及其频繁&#xff0c;但是你真的了解ARIMA、AR、MA么&#xff1f;ACF图你会看么&#xff1f;&#xff1f; 时间序列数据如何构造&#xff1f;&#xff1f;&#xff1f;&#xff0c;我打过不少…

EEPROM读写实验——FPGA学习笔记18

一、EEPROM简介 Electrically Erasable Progammable Read Only Memory:是指带电可擦可编程只读存储器&#xff0c;是一种常用的非易失性存储器&#xff08;掉电数据不丢失&#xff09; EEPROM发展历史 我们这次实验所用的AT24C64存储容量为64Kbit&#xff0c;内部分成256页&am…

Java--IO高级流

缓冲流 缓冲流,也叫高效流&#xff0c;是对4个基本的FileXxx 流的增强&#xff0c;所以也是4个流&#xff0c;按照数据类型分类&#xff1a; 字节缓冲流&#xff1a;BufferedInputStream&#xff0c;BufferedOutputStream 字符缓冲流&#xff1a;BufferedReader&#xff0c;Buf…

【2024】uniapp 接入声网音频RTC【H5+Android】Unibest模板下Vue3+Typescript

需求 最近开发一个项目&#xff0c;需要实现声网的接入。由于采用uniapp模式&#xff0c;按照最佳实践采用优先开发H5再适配的模式。因此实现了H5和Android两种模式的接入&#xff0c;Android里采用离线打包自定义基座来进行调试。怕自己忘记了&#xff0c;在这里详细的记录完…

Hadoop之WordCount测试

1、Hadoop简介&#xff1a; Hadoop是Apache旗下的一个用Java语言实现的开源软件框架&#xff0c;是一个开发和运行处理大规模数据的软件平台。 Hadoop的核心组件包括Hadoop分布式文件系统&#xff08;HDFS&#xff09;和MapReduce编程模型。HDFS是一个高度容错的系统&#xf…

OpenGL笔记十九之相机系统

OpenGL笔记十九之相机系统 —— 2024-10-02 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记十九之相机系统1.运行1.1.游戏相机1.2.轨迹球相机 2.游戏相机与轨迹球相机切换3.博主笔记本要运行需要更改的文件更改1:28_OpenGL_CameraSystem/applicat…

基于SpringBoot的学习资源共享平台

运行环境: jdk8tomcat9mysqlIntelliJ IDEAmavennodejs 设计选用前后端分离的单体架构方式 后端&#xff1a;SpringBootMybatis-PluslogbackElasticsearchRedisMySQLJwtsmtp阿里云OSS 前端&#xff1a;WebPackVueJsAnt Designaxios 主要模块&#xff1a;反馈管理、资源管理、…