EL-时间线如何绑定鼠标点击事件

登录

本帖最后由 cyz 于 2023-8-17 15:51 编辑

我在页面中使用了EL-时间线这个控件，现在想实现点击EL-时间线打开另一个表单页面。比如在展示页面里我点击EL-时间线上的施工项目进行中，可以打开对应的已发起的施工项目表单页面，点击无人机任务未开始，可以打开对应的新增的无人机任务表单页面。

Edric.Li · Edric.Li

Shawn.Liu · Shawn.Liu

大佬，这边查找了下EL-时间线控件的使用指南并测试了下，该单元格类型的属性设置并没有一些编辑命令之类的，如类似于EL-导航菜单的"编辑点击命令"，可以在点击菜单后触发某些命令；HZG-ElementPlusPluginSourceCode: 活字格UI组件-ElementPlus插件源代码 - Gitee.com

绑定鼠标点击事件，这边在页面加载命令中使用JavaScript命令测试了EL-时间线和普通按钮的点击事件，发现EL-时间线是无法绑定点击事件的，所以该控件的可用操作目前只支持绑定数据源，在使用中将其作为展示使用，如需要弹出页面可考虑使用其他方式

Forguncy.Page.getCell("button1").bind("click", function() {
alert("click");
});
Forguncy.Page.getCell("test").bind("click", function() {
alert("test");
});

复制代码

Edric.Li · Edric.Li

使用JS来完成，效果

Edric.Li · Edric.Li

实现步骤：
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);
})();

复制代码

cyz · cyz

Edric.Li 发表于 2023-8-17 19:33

亲测有效，感谢大佬！

Shawn.Liu · Shawn.Liu

玉轩 · 玉轩

对大神膜拜一下

Shawn.Liu · Shawn.Liu

		自动登录	找回密码
密码			立即注册

[已处理] EL-时间线如何绑定鼠标点击事件

最佳答案

8 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

活字格高级认证

悬赏达人