在帆软开发中,我通常需要对数据进行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处理逻辑与帆软原生的处理并非顺序执行,可能是并行的。