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

原文地址：https://blog.csdn.net/m0_71959044/article/details/142635949

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！