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

news2024/9/29 18:08:05

 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.coloradmin.cn/o/2177494.html

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

相关文章

基于Spring3.0实现AOP的小案例

前言 AOP&#xff08;Aspect Oriented Programming&#xff09;即面向切面编程&#xff0c;是一种通过预编译方式和运行期间动态代理实现程序功能统一维护的技术。针对功能增强的描述&#xff0c;可以理解为&#xff1a;“AOP允许在不修改源代码的情况下&#xff0c;通过定义切…

Java异步编程:从入门到精通

在现代编程实践中&#xff0c;异步编程已成为提升程序性能和用户体验的关键技术。Java&#xff0c;作为一种成熟且广泛使用的编程语言&#xff0c;提供了多种实现异步编程的方法。本文将带你从异步编程的基础知识入手&#xff0c;逐步深入到Java中的异步编程实践。 异步编程简介…

SQL常用数据过滤 - EXISTS运算符

SQL查询中的EXISTS运算符用于检查查询子句是否存在满足特定条件的记录&#xff0c;如果有一条或者多条记录存在&#xff0c;则返回True&#xff0c;否则返回False。 语法结构 SELECT column_name(s)FROM table_nameWHERE EXISTS(SELECT column_name FROM table_name WHERE co…

基于两分支卷积和 Transformer 的轻量级多尺度特征融合超分辨率网络 !

当前的单图像超分辨率&#xff08;SISR&#xff09;算法有两种主要的深度学习模型&#xff0c;一种是基于卷积神经网络&#xff08;CNN&#xff09;的模型&#xff0c;另一种是基于Transformer的模型。前者利用不同卷积核大小的卷积层堆叠来设计模型&#xff0c;使得模型能够更…

SOLID原则:现代软件架构的永恒基石

关注TechLead&#xff0c;复旦博士&#xff0c;分享云服务领域全维度开发技术。拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;复旦机器人智能实验室成员&#xff0c;国家级大学生赛事评审专家&#xff0c;发表多篇SCI核心期刊学术论文&#xff0c;阿里云认…

面积开运算bwareaopen

一个非常有用的二值图像形态学后处理算法&#xff0c;建立在连通分量分析的基础之上。 bwareaopen 从二值图像中删除小对象 语法 BW2 bwareaopen(BW,P) BW2 bwareaopen(BW,P,conn) 说明 BW2 bwareaopen(BW,P) 从二值图像 BW 中删除少于 P 个像素的所有连通分量&#x…

docker简介、安装、基础知识

基础知识 Docker简介&#xff1a; 1.Docker是一种用于构建、发布及运行应用程序的开源项目&#xff0c;他通过容器化技术简化了应用程序的部署和管理 2.Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发&#xff0c;为应用打包、部署平台&#xff0c;而非单纯的虚…

计算机毕业设计 办公用品管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

C++(Qt)软件调试---内存调试器Dr.Memory(21)

C(Qt)软件调试—内存调试器Dr. Memory&#xff08;21&#xff09; 文章目录 C(Qt)软件调试---内存调试器Dr. Memory&#xff08;21&#xff09;[toc]1、概述&#x1f41c;2、安装Dr.Memory&#x1fab2;3、命令行使用Dr.Memory&#x1f997;4、Qt Creator集成使用Dr.Memory&…

预计OpenAI在新一轮融资后估值可达1500亿美元!Hugging Face平台托管模型数量破100万|AI日报

文章推荐 HuggingChat macOS版正式发布&#xff01;文章内附体验地址&#xff01;我国打造糖尿病专用AI模型&#xff5c;AI日报 今日热点 OpenAI在新一轮融资后估值可能达到1500亿美元 知情人士表示&#xff0c;Thrive Capital将在OpenAI目前的65亿美元融资轮中投资超过10亿…

如何高效管理知识产权全链条?

为了有效保护企业的创新成果&#xff0c;确保技术创意的顺利转化&#xff0c;以及高效管理知识产权案件&#xff0c;建立一套完善的知识产权管理体系至关重要。对于企业而言&#xff0c;如何有效地管理知识产权的各个环节&#xff0c;从研发项目到技术创意&#xff0c;再到提案…

排序(交换排序:快排)

快速排序&#xff1a; 写快排的注意事项 1.单趟排序hoare 2.不写优化只说优化就行 理想的情况下&#xff1a;每次排序都是二分&#xff0c;直到二分到最后&#xff0c;那就相当于递归高度次(logN)&#xff0c;每一层单趟排都是O(N)&#xff0c;时间复杂度O(NlogN) 空间复杂度就…

PHP程离禁用一段IP的写法示例

PHP程离禁用一段IP的写法示例 。 在PHP中&#xff0c;如果你想禁用一段IP地址的访问&#xff0c;你可以使用$_SERVER[REMOTE_ADDR]来获取访问者的IP地址&#xff0c;然后通过判断IP地址是否在你想要禁用的范围内来决定是否拒绝服务。 以下是一个简单的例子&#xff0c;展示了…

net Core aspx视图引擎 razor视图引擎

视图引擎 》》定义&#xff0c;什么是视图引擎 视图引擎就是&#xff0c;将服务器端模板转换为HTML标记&#xff0c;并在控制器的操作方法触发时在web浏览器中呈现 现在都推荐 Razor视图引擎了&#xff08;也是默认视图引擎&#xff09;&#xff0c;aspx引擎不推荐了。 ASPX …

AI新掌舵:智享AI直播系统:直播界的新浪潮还是真人主播的终结者?

AI新掌舵&#xff1a;智享AI直播系统&#xff1a;直播界的新浪潮还是真人主播的终结者&#xff1f; 在数字化浪潮的汹涌澎湃中&#xff0c;人工智能&#xff08;AI&#xff09;以其前所未有的速度渗透至各行各业&#xff0c;其中&#xff0c;直播领域正经历着一场前所未有的变革…

javascript:冻结对象

1 作用 冻结一个对象&#xff0c;使对象不可扩展。 2 特性 对象的属性不可再被新增、删除对象的属性的值不可再被修改对象的属性的描述符中任意配置项都不可被重新定义 3 代码示例 3.1 冻结对象 Object.freeze() 代码如下&#xff1a; use strict let initialData {a: 1…

C#案例 | 基于C#语言在Excel中进行二次开发(一):简单系统搭建:打印输出“Hello Excel C#”

基于C#语言在Excel中进行二次开发&#xff08;一&#xff09;&#xff1a;简单系统搭建&#xff1a;打印输出”Hello Excel & C#” 实现效果第一步&#xff1a;前期准备第二步&#xff1a;打开VS 2022&#xff0c;创建项目第三步&#xff1a;程序界面设计 实现效果 在Exce…

【大模型】通俗解读变分自编码器VAE

目录 写在前面 一、VAE结构 二、损失函数 三、代码实现 1.训练代码 2.推理生成图片 3.插值编辑图片 四、总结 写在前面 论文地址&#xff1a;https://arxiv.org/abs/1312.6114 大模型已经有了突破性的进展&#xff0c;图文的生成质量都越来越高&#xff0c;可控性也越来…

cesium渲染的3Dtiles的模型下载!glb模型文件下载!

前端开发测试或者学习cesium的时候最难最麻烦就是找到一个合适的模型&#xff0c;现在就直接给各位放几个可以满足我们测试使用的模型文件。 模型文件下载—香港3DTiles模型文件 某盘 通过百度网盘分享的文件&#xff1a;hk-效果图.png&#xff0c;hk.zip等2个文件 链接&…

react中的ref三种形式

1&#xff0c;字符串形式 <!-- 创建盒子 --><div id"test"></div> <script type"text/babel">class Demo extends React.Component{render(){return(<div><input type"text" refinput1 /><button onCl…