我的帆软踩坑日记之③删除行并非删除，事件处理的执行并非拥有顺序

在帆软开发中，我通常需要对数据进行CURD(增删改查)。
其中添加通常使用帆软自带的插入行按钮，删除使用删除行按钮。详细的部分就不再此篇文章中探讨，想了解的同学可以前往帆软官方文档查看：https://help.fanruan.com/finereport/doc-view-1386.html

帆软报表的普通报表大体上分为两部分

• 参数面板
• 表格

其中的表格采用HTML标签中的table、tbody、tr、td渲染，虽然并非使用SVG或者canves技术。但是经过测试在填报预览情况下加载数千行也能轻松应对。

删除行并非删除

帆软中点击删除行并非移除掉对应的DOM元素，而是隐藏。
经过与在线技术支持的沟通，确定帆软没有提供删除DOM元素的方式，也没有在提供如_g().getCell(i,j)JS API中提供标识是否为隐藏元素的属性和方法。

所以如果你对表格进行一些帆软原生没有的操作时，你应该使用JQuery或者浏览器原生API操作。

事件处理的执行并非拥有顺序

我在插入行和删除行按钮添加点击事件处理，触发以下JS代码

console.log('extension/IPQC/generateSerial.js')// js目录

let items = new Array()
let flag = false
let serialCol = 0

try {
    // 收集需要操作行
    $('.x-table:first').children().eq(1).children().each((row, rowElement) => {
        if ($(rowElement).children().length > 0) {
            $(rowElement).children().each((col, cellElement) => {
                const text = $(cellElement).text()
                if (text === '检验项目序号') {
                    flag = true
                    serialCol = col
                }
                if (text === '不良项目') flag = false
            })
            if (flag) items.push(rowElement)
        }
    })

    // 过滤隐藏于多余元素
    items = items.filter(it => {
        const styleAttr = $(it).attr('style')
        return styleAttr != 'display:none;height:0px;'
    })
    items.splice(0,2)
    items.splice(items.length - 1,1)

    items.forEach(it => {
        const serialTd = $(it).children().eq(serialCol).text()
        console.log(serialTd,$(it).children().eq(serialCol + 1).text())// 打印序号与检验项目
    })

} catch (error) {
    console.log(`%c${error.message}`, 'color:red;')
}

执行效果

从执行结果发现，通过JQuery获取的元素与页面实际显示有差异。
经过排查发现JQuery获取的元素是点击按钮之前的元素，并非点击之后的。

如果用图表示的话，我想要的是这样的

那么它实际是这样的

帆软并没有提供如VUE中的nextTick()这样的函数。

结论：绑定的自定义JS处理逻辑与帆软原生的处理并非顺序执行，可能是并行的。