当前位置: 首页 > article >正文

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

相关文章:

  • PHP 异步编程:从入门到精通
  • 使用 React Router v6 在 React 中实现面包屑
  • docker 部署nacos
  • uniapp路由跳转
  • 如何提高游戏本地化的质量使用QE门户网站Logrus IT
  • 线性代数:探索矩阵与向量的奥秘
  • Excel中查找某个值的位置,用位置取值
  • 迈威通信闪耀工博会,以创新科技赋能工业自动化
  • vue2的指令和过滤器
  • 【C++】set详解
  • 臀部筋膜炎吃什么药最有效
  • 在Python中实现多目标优化问题(4)
  • 手机二要素接口如何用C#实现调用
  • Jenkins本地安装配置与远程访问管理本地服务详细流程
  • 【LeetCode每日一题】——95.不同的二叉搜索树 II
  • python流程控制语句
  • Python编码系列—Python观察者模式:实现事件驱动架构的利器
  • 力扣 中等 275.H指数
  • 凌晨1点开播!Meta Connect 2024开发者大会,聚焦Llama新场景和AR眼镜
  • javacv FFmpegFrameGrabber 阻塞重连解决方法汇总