解决:使用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.xdnf.cn/news/1550992.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

草莓病虫害数据集1000张分5类 草莓植株黑斑病、草莓灰霉菌病、正常草莓、草莓粉霉菌病、草莓橡胶病

草莓病虫害数据集 1000张 分5类 草莓植株黑斑病、草莓灰霉菌病、正常草莓、草莓粉霉菌病、草莓橡胶病 草莓病虫害数据集介绍 名称 草莓病虫害数据集 规模 图像数量&#xff1a;1000张高质量图像类别数量&#xff1a;5类 草莓植株黑斑病 (Black Spot Disease)草莓灰霉菌病 (…

【Python】Curdling:Python 包管理的高效工具

Curdling 是一个轻量级的 Python 包管理工具&#xff0c;旨在加速 Python 包的安装和管理流程。与传统的包管理工具&#xff08;如 pip&#xff09;相比&#xff0c;Curdling 更加注重性能优化和效率&#xff0c;特别是在处理大规模依赖项和项目构建时表现优异。它通过并行化的…

360° 镜头检测铝件内壁划痕与杂质:保障铝件内孔制造质量的精准方案

在铝件内孔制造的过程中&#xff0c;内壁的质量把控是至关重要的环节。制造过程中产生的碎屑残留以及划痕等问题&#xff0c;不仅会影响铝件的外观&#xff0c;更可能对其性能和使用寿命造成严重的损害。为了精准检测这些问题&#xff0c;我们提出了一套基于 360 镜头的检测方案…

3. 将GitHub上的开源项目导入(clone)到本地pycharm上——深度学习·科研实践·从0到1

目录 1. 在github上搜项目 (以OpenOcc为例&#xff09; 2. 转移到码云Gitee上 3. 下载整个项目到本地 4. 在pycharm中打开项目 1. 在github上搜项目 (以OpenOcc为例&#xff09; 把链接复制下来&#xff0c;转移到国内Gitee上&#xff0c;会更稳定 2. 转移到码云Gitee上 &…

深度学习-11

线性层及其它层介绍 归一化层 在深度学习中&#xff0c;归一化层&#xff08;Normalization Layers&#xff09;是神经网络中非常重要的一部分&#xff0c;它们有助于在训练过程中稳定网络&#xff0c;加速收敛&#xff0c;以及提高模型的泛化能力。以下是PyTorch框架中一些常…

6.1 微服务 服务发现 架构模式分类 应用实践

微服务 服务发现 架构模式分类 应用实践 目录概述需求&#xff1a; 设计思路实现思路分析1.类型-客户端发现2.类型-服务端服务发现3.工具-Eureka4.工具-Consul5.工具-zookper服务发现的挑战服务发现的最佳实践 参考资料和推荐阅读 Survive by day and develop by night. talk …

谷歌Gemini 1.5 AI模型升级:成本更低、性能更强、响应更快

AITOP100获悉&#xff0c;9月24日&#xff0c;谷歌谷歌Gemini 1.5 AI模型升级&#xff1a;成本更低、性能更强、响应更快对其旗下Gemini 1.5 AI模型进行了升级&#xff0c;推出了Gemini-1.5-Pro-002和Gemini-1.5-Flash-002两款新模型。这两款模型在成本、性能和响应速度方面均有…

在线PDF怎么转换成JPG图片?分享14种转换操作!

作为一名社畜&#xff0c;俺也经常要将PDF转换为图片格式&#xff01; 如何进行快速转换&#xff0c;包括电脑端、在线端和手机端&#xff0c;今天俺就测评了50款工具&#xff0c;给你得出了下面这些渠道&#xff0c;不少也是免费的&#xff0c;相信对你有帮助哦&#xff01; …

Spring - @Import注解

文章目录 基本用法源码分析ConfigurationClassPostProcessorConfigurationClass SourceClassgetImportsprocessImports处理 ImportSelectorImportSelector 接口DeferredImportSelector 处理 ImportBeanDefinitionRegistrarImportBeanDefinitionRegistrar 接口 处理Configuratio…

2-3树(2-3 Tree):原理、常见算法及其应用

目录 引言 2-3树的基本概念 常见算法 查找节点 插入节点 删除节点 2-3树的应用场景 1. 文件系统目录管理 应用原理 场景描述 2. 字典编码 应用原理 场景描述 总结 优势对比 自平衡特性 灵活的节点结构 高效的操作性能 简单的实现 广泛的应用场景 数据一致…

遥感图像分割

遥感图像分割是一种应用于遥感图像的计算机视觉技术&#xff0c;用于将图像划分为不同的区域&#xff0c;每个区域代表地表的不同特征&#xff0c;如水体、森林、城市区域等。这种分割帮助我们更好地理解和分析地球表面的变化&#xff0c;对于环境监测、城市规划、农业、灾害管…

AR技术在电商行业的应用及优势有哪些?

AR&#xff08;增强现实&#xff09;技术在电商行业的应用广泛且深入&#xff0c;为消费者带来了全新的购物体验&#xff0c;同时也为商家带来了诸多优势。以下是AR技术在电商行业的主要应用场景及其优势&#xff1a; 一、应用场景 1、虚拟商品展示与试用 家具AR摆放&#x…

济南站活动回顾|IvorySQL中的Oracle XML函数使用示例及技术实现原理

近日&#xff0c;由中国开源软件推进联盟PG分会 & 齐鲁软件园联合发起的“PostgreSQL技术峰会济南站”在齐鲁开源社举办。瀚高股份IvorySQL作为合作伙伴受邀参加此次活动。 瀚高股份IvorySQL技术工程师 向逍 带来「IvorySQL中的Oracle XML函数兼容」的议题分享。在演讲中&a…

前端vue-form表单的验证

form表单验证的完整步骤

二叉树的中序遍历(java)

概述 关于二叉树&#xff0c;我们都不陌生&#xff0c;许多基于递归的问题发起点都是一个二叉树的root节点。对于各种二叉树的问题&#xff0c;我们也是通过dfs进行求解。例如求二叉树的深度、最近公共祖先等 算法分析 关于二叉树的中序遍历&#xff0c;我们都知道应该先访…

【C++单调队列】1438. 绝对差不超过限制的最长连续子数组|1672

本文时间知识点 C队列、双向队列 LeetCode1438. 绝对差不超过限制的最长连续子数组 给你一个整数数组 nums &#xff0c;和一个表示限制的整数 limit&#xff0c;请你返回最长连续子数组的长度&#xff0c;该子数组中的任意两个元素之间的绝对差必须小于或者等于 limit 。 如…

Flume实战--Flume中的选择器、自动容灾(故障转移)、负载均衡的详解与操作

本文详细介绍了Apache Flume的关键特性&#xff0c;包括选择器、拦截器、故障转移和负载均衡。选择器负责将数据分发到多个Channel&#xff0c;拦截器用于修改或丢弃Event。故障转移机制能够在Sink故障时自动切换&#xff0c;而负载均衡则在多个Sink间分配负载。文章还提供了自…

CANoe_DBC能够打开但是无法使用“BusType”

解决DBC文件在CAPL中调用问题&#xff1a;从CANdb到CAPL的顺畅过渡 在汽车电子和嵌入式系统开发中&#xff0c;DBC&#xff08;Database CAN&#xff09;文件作为描述CAN&#xff08;Controller Area Network&#xff09;通信协议的重要工具&#xff0c;广泛应用于网络设计、测…

工作日志:ruoyi-vue-plus echarts根据窗口大小变化

1、echarts根据窗口大小变化。 onMounted(() > {// 折线图type EChartsOption echarts.EChartsOption;var chartDom document.getElementById(chartDom)!;var myChart echarts.init(chartDom);var option: EChartsOption;option {grid: {left: 35,top: 10,bottom: 30,r…

jenkins部署Maven和NodeJS项目

在 Java 项目开发中&#xff0c;项目的编译、测试、打包等是比较繁琐的&#xff0c;属于重复劳动的工作&#xff0c;浪费人力和时间成本。以往开发项目时&#xff0c;程序员往往需要花较多的精力在引用 jar 包搭建项目环境上&#xff0c;跨部门甚至跨人员之间的项目结构都有可能…