解决:使用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.mfbz.cn/a/886927.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业级数据备份一般都是怎么做的?来唠唠嗑

小白最近去了很多企业看了一下他们的存储方案&#xff0c;基本上都是单硬盘数据存储&#xff0c;一个硬盘10TB&#xff08;实际可用8TB左右&#xff09;。 这些大概是大部分微小企业存储数据的办法&#xff0c;也是他们能想到的最好办法了吧。 截至2024年的今天&#xff0c;咱…

Web安全 - 安全防御工具和体系构建

文章目录 安全标准和框架1. 国内安全标准&#xff1a;等级保护制度&#xff08;等保&#xff09;2. 国际安全标准&#xff1a;ISO27000系列3. NIST安全框架&#xff1a;IDPRR方法4. COBIT与ITIL框架 防火墙防火墙的基本作用防火墙的三种主要类型防火墙的防护能力防火墙的盲区 W…

【蚂蚁HR-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

CSS | 面试题:你知道几种移动端适配方案?

目录 一、自适应和响应式 二、为什么要做移动端适配&#xff1f; 三、当前流行的几种适配方案 (1) 方案一&#xff1a;百分比设置&#xff08;不推荐&#xff09; (2) 方案二&#xff1a;rem 动态设置 font-size px 与 rem 的单位换算 手动换算 less/scss函数 webpac…

C0004.Qt中QComboBox设置下拉列表样式后,下拉列表样式无效的解决办法

问题描述 我们平时在使用Qt Creator对控件QComboBox的样式进行设置后&#xff0c;在运行程序启动界面时&#xff0c;发现设置的样式无效&#xff0c;效果如下&#xff1a; /* 设置下拉菜单框的样式 */ QComboBox QAbstractItemView {border: 1px solid rgb(161,161,161); /* …

TransFormer 视频笔记

TransFormer BasicsAttention单头注意力 single head attentionQ&#xff1a; query 查寻矩阵 128*12288K key matrix 128*12288SoftMax 归一 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/19e3cf1ea28442eca60d5fc1303921f4.png)Value matrix 12288*12288 MLP Bas…

【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

鸿蒙开发(NEXT/API 12)【状态查询与订阅】手机侧应用开发

注意 该接口的调用需要在开发者联盟申请设备基础信息权限与穿戴用户状态权限&#xff0c;穿戴用户状态权限还需获得用户授权。 实时查询穿戴设备可用空间、电量状态。订阅穿戴设备连接状态、低电量告警、用户心率告警。查询和订阅穿戴设备充电状态、佩戴状态、设备模式。 使…

基于大数据技术的颈椎病预防交流与数据分析及可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

【计算机网络】详解UDP协议格式特点缓冲区

一、UDP 协议端格式 16 位 UDP 长度, 表示整个数据报(UDP 首部UDP 数据)的最大长度&#xff1b;如果16位UDP检验和出错&#xff0c;报文会被直接丢弃。 1.1、检验和出错的几种常见情况 数据传输过程中的比特翻转&#xff1a;在数据传输过程中&#xff0c;由于物理介质或网络设…

python-FILIP/字符串p形编码/数字三角形

一&#xff1a;FILIP 题目描述 给你两个十进制正整数 a,b​&#xff0c;输出将这两个数翻转后的较大数。 「翻转」在本题中的定义详见「说明 / 提示」部分。输入 第一行&#xff0c;两个十进制正整数 a,b。输出 第一行&#xff0c;a 和 b 翻转后的较大数。样例输入1 734 893 样…

鸿蒙harmonyos next flutter通信之BasicMessageChannel获取app版本号

本文将通过BasicMessageChannel获取app版本号&#xff0c;以此来演练BasicMessageChannel用法。 建立channel flutter代码&#xff1a; //建立通道 BasicMessageChannel basicMessageChannel BasicMessageChannel("com.xmg.basicMessageChannel",StringCodec());…

Koa2+Vue2的简书后台管理系统

文章目录 项目实战:前(vue)后(koa)端分离1、创建简书项目2、创建数据库2.1 创建数据库2.2 连接数据库3、模型对象3.1 设计用户模块的Schema3.2 实现用户增删改查3.2.1 增加用户3.2.2 修改用户3.2.3 删除用户3.2.4 查询用户4、封装业务逻辑层5、封装CRUD6、创建Vue项目7、配…

(14)MATLAB莱斯(Rician)衰落信道仿真4

文章目录 前言一、改写莱斯分布概率密度函数的理论值二、仿真代码三、仿真结果总结 前言 本文通过将接收信号总功率设置为1&#xff0c;重写了莱斯衰落信道上接收信号幅度的理论PDF式。然后用MATLAB代码生成了在具有不同莱斯因子K的Ricean平坦衰落信道下接收到的信号样本&…

leetcode练习 路径总和II

给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSum 22 输出&a…

day04笔试练习

1.Fibonacci数列 题目链接&#xff1a;Fibonacci数列_牛客题霸_牛客网 题目思路&#xff1a; 定义 a b c 三个变量 使 c 一直加到比 n 大的最近的斐波那契数 此时比较 c 和 b 哪个数离得最近就好 public static void main(String[] args) {Scanner sc new Scanner(System.in…

基于facefusion的换脸

FaceFusion是一个引人注目的开源项目&#xff0c;它专注于利用深度学习技术实现视频或图片中的面部替换。作为下一代换脸器和增强器&#xff0c;FaceFusion在人脸识别和合成技术方面取得了革命性的突破&#xff0c;为用户提供了前所未有的视觉体验。 安装 安装基础软件 安装…

深入探究:在双链表的前面进行插入操作的顺序

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;惟有主动付出&#xff0c;才有丰富的果…

构建高效服装销售平台:Spring Boot与“衣依”案例

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…

hystrix微服务部署

目录 一.启动nacos和redis 1.查看是否有nacos和redis 二.开始项目 1.hystrix1工程&#xff08;修改一下工程的注册名字&#xff09; 2.运行登录nacos网站查看运行效果&#xff08;默认密码nacos,nacos&#xff09; 3.开启第二个项目 hystrix2工程 4.关闭第二个项目 hyst…