实现步骤:
1. 给时间线的单元格起一个名字,我这里叫“需要点击的时间线”
2. 放一个隐藏EL-输入框,来存放点击的值。在这个输入框的点击事件中,可以写对应的页面跳转事件。同样,要起一个名字,我这里叫“时间线点击值”
3. 在页面加载命令中,写如下代码:
- (() => {
- const timeLineCellName = "需要点击的时间线";
- const valueCellName = "时间线点击值";
- /**
- * 寻找对应单元格的根容器,来确保单元格渲染完毕
- */
- function findRootContainer() {
- try {
- // 根据单元格名称,去找单元格的信息
- var cell = Forguncy.Page.getCell(timeLineCellName);
- // 如果cell为空,证明还未加载完毕
- if (cell == null) {
- return null;
- }
- // 获取cell的容器
- const container = cell._pageCell.cellType.getContainer();
- // 如果cell的容器为空,或者找出来的数量为0,证明还未渲染完成
- if (container == null || container.length === 0) {
- return null;
- }
- // 返回找到的容器
- return container;
- } catch {
- // 如果崩了,返回null,表示没找到
- return null;
- }
- }
- function main() {
- // 获取单元格的容器
- const rootContainer = findRootContainer();
- // 如果为空,则返回
- if (rootContainer === null) {
- return;
- }
- // 获取单元格下的所有时间线的items
- const els = $(".el-timeline-item__content", rootContainer);
- // 如果一个没找到也认为没渲染完成
- if (!els.length) {
- return null;
- }
- //绑定这些元素的点击事件
- els.on("click", (e) => {
- // 找到存放值得单元格,必须是一个EL的输入框!!!
- const cell = Forguncy.Page.getCell(valueCellName);
- // 更改单元格的值
- cell._pageCell.cellType.setValue(e.target.innerText);
- // 提交数据
- cell._pageCell.cellType.commitValue();
- });
- // 给这些可点击的元素设置css样式,表示该元素可点击
- els.css("cursor", "pointer");
- // 清楚定时器
- clearInterval(intervalTimerId);
- clearTimeout(timeoutTimerId);
- }
- // 创建一个每隔50ms运行一次的定时器,因为页面加载可能是异步的,没办法保证第一次就能把事件绑定上。所以每隔50ms去尝试绑定一次
- const intervalTimerId = setInterval(main, 50);
- // 创建一个固定10秒后执行的定时器,因为有可能就是因为没数据导致找元素失败,所以在这里,创建一个10秒的定时器,来清除第一个定时器,避免影响浏览器的性能
- const timeoutTimerId = setTimeout(() => clearInterval(intervalTimerId), 10_000);
- })();
复制代码
|