EasyUI动态加载组件

要实现如下的效果,在表格中显示进度条

主要是需要再次初始化组件,借用ChatGPT的意思是:

在许多 JavaScript UI 框架中,包括 EasyUI,在动态地创建或插入新的 DOM 元素后,通常需要手动初始化相关的组件或特性。这是因为这些组件通常会在页面加载时自动初始化已经存在的 DOM 元素,但对于后来动态添加的元素,框架无法感知它们的存在,因此需要手动初始化。

在你的例子中,你动态地生成了一个包含进度条的 HTML 内容,但这个进度条并不是在页面加载时就存在的,所以 EasyUI 无法自动初始化它。通过调用 .progressbar() 方法来手动初始化进度条,你告诉 EasyUI 去查找带有 easyui-progressbar 类的元素,并将其转换成进度条组件。

这种手动初始化的方法确保了框架能够正确地处理动态生成的元素,并在需要时应用相关的功能和样式。

$(function () {$("#dg").datagrid({title: "任务列表",striped: true,pagination: true,pageNumber: 1,pageList: [2, 5, 10, 20, 30],rownumbers: true,pagePosition: "top",// 当url不满足正常的取值时,需要自定义ajax请求,包括请求头、请求方法、参数loader: function (param, success, error) {var pager = $('#dg').datagrid('getPager'); // 获取分页器对象var pageNum = $(pager).pagination('options').pageNumber; // 获取当前页码var pageSize = $(pager).pagination('options').pageSize;let keyword = $("keyword").val();$.ajax({method: "post",url: "/home/progress/query",headers: {"Content-Type": "application/json"},data: JSON.stringify({"keyword": keyword,"pageNum": pageNum,"pageSize": pageSize}),success: success,error: error})},// 如果接口返回的数据不是标准的total和row的属性,则需要进行映射loadFilter: function (response) {let data = response.data;return {total: data.total, rows: data.records}},columns: [[{field: "name", title: '任务名称', width: "10%"},{field: "user", title: '相关人物', width: "15%",formatter: function (value, rowData, index) {let content = "";if (rowData.user != null && rowData.user.length > 0) {$.each(rowData.user, function (index, val) {content += "<button type='button' class='layui-btn layui-btn-normal layui-btn-xs'>" + val + "</button>"})}return content;}},{field: "type", title: '类型', width: "5%"},{field: "rate", title: '执行情况', width: "10%",formatter: function (value, rowData, index) {let content = '<div class="easyui-progressbar" style="width:80%" data-options="value:' + rowData.rate * 100 + '"></div>';setTimeout(function() {$('.easyui-progressbar').progressbar(); // 手动初始化进度条}, 0);return content;}},{field: "numberTimes", title: '执行次数', width: "10%"},{field: "priorityLevel", title: '优先级', width: "5%"},// {field: "createTime", title: '创建时间', width: "10%"},// {field: "updateTime", title: '更新时间', width: "10%"},{field: "option", title: '操作', width: '15%',formatter: function (value, rowData, index) {let content = '<button class="layui-btn layui-btn-danger  layui-btn-xs" onclick="del(' + rowData.id + ')">删除</button>' +'<button class="layui-btn layui-btn-normal  layui-btn-xs" onclick="edit(' + rowData.id + ')">修改</button>' +'<button class="layui-btn layui-btn-warm layui-btn-xs" onclick="detail(' + rowData.id + ')">详情</button>'return content;}}]],onLoadSuccess: function () {$("a[name='opera']").linkbutton({text: '删除', iconCls: 'icon-remove'});},fixed: true,fitColumns: true});});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/473572.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日OJ题_算法_递归④力扣24. 两两交换链表中的节点

目录 ④力扣24. 两两交换链表中的节点 解析代码 ④力扣24. 两两交换链表中的节点 24. 两两交换链表中的节点 难度 中等 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即…

入门OpenCV:图像阈值处理

基本概念 图像阈值是一种简单、高效的图像分割方法&#xff0c;目的是将图像转换成二值图像。这个过程涉及比较像素值和阈值&#xff0c;根据比较结果来确定每个像素点的状态&#xff08;前景或背景&#xff09;。图像阈值在处理二维码、文本识别、物体跟踪等领域中非常有用。…

Codeforces Round 926 (Div. 2) B. Sasha and the Drawing (Java)

Codeforces Round 926 (Div. 2) B. Sasha and the Drawing (Java) 比赛链接&#xff1a;Codeforces Round 926 (Div. 2) B题传送门&#xff1a;B. Sasha and the Drawing 题目&#xff1a;B. Sasha and the Drawing Example input 3 4 3 3 3 10 3 9 4 7 7 11 2 3output 2 …

人工智能学习与实训笔记(四):神经网络之NLP基础—词向量

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 四、自然语言处理 4.1 词向量 (Word Embedding) 4.1.1 词向量的生成过程 4.1.2 word2vec介绍 4.1.3 word2vec&#xff1a;skip-gram算法的实现 4.2 句向量 - 情感分析 4.2.1 LSTM (Long S…

【Python】测量WAV文件播放时长

问题 windows播放WAV音频文件&#xff0c;一般使用API函数&#xff0c;如PlaySound。实际使用发现&#xff0c;从调用PlaySound到实际开始播放存在200ms以上的延时&#xff0c;在游戏编程中音效实时性是个需要解决的问题。 本文主要讨论&#xff0c;windows播放WAV文件的衍生…

MySQL 基础知识(九)之视图

目录 1 视图的介绍 2 视图算法 3 创建视图 4 查看视图结构 5 修改视图 6 删除视图 7 参考文档 1 视图的介绍 视图是一张并不存储数据的虚拟表&#xff0c;其本质是根据 SQL 语句动态查询数据库中的数据。数据库中只存放了视图的定义&#xff0c;通过 SQL 语句使用视图时…

C语言-生成随机数

目录 1 rand()函数 2 srand()函数 1 rand()函数 int rand (void); rand函数可以生成一个随机整数&#xff0c;范围在 0 ~ RAND_MAX&#xff0c;RAND_MAX的值是0x7fff&#xff0c;换算成十进制是32767。 但是我们发现使用此函数生成随机数&#xff0c;每次生成的随机数都是一…

【C深度解剖】前置++与后置++

简介&#xff1a;本系列博客为C深度解剖系列内容&#xff0c;以某个点为中心进行相关详细拓展 适宜人群&#xff1a;已大体了解C语法同学 作者留言&#xff1a;本博客相关内容如需转载请注明出处&#xff0c;本人学疏才浅&#xff0c;难免存在些许错误&#xff0c;望留言指正 作…

挑战杯 YOLOv7 目标检测网络解读

文章目录 0 前言1 yolov7的整体结构2 关键点 - backbone关键点 - head3 训练4 使用效果5 最后 0 前言 世界变化太快&#xff0c;YOLOv6还没用熟YOLOv7就来了&#xff0c;如果有同学的毕设项目想用上最新的技术&#xff0c;不妨看看学长的这篇文章&#xff0c;学长带大家简单的…

程序员搞什么副业才有性价比?

干一行恨一行&#xff0c;三百六十行&#xff0c;行行干破防&#xff01; 一份稳定的主业固然重要&#xff0c;但是有性价比的副业更令人心动。朝九晚五的工作日复一日&#xff0c;当然也可能是996的生活反复捶打。从整体来讲&#xff0c;程序员算是高收入群体&#xff0c;但往…

从六大晶圆厂财报看半导体行业2024年复苏

2023年&#xff0c;全球半导体行业经历了重大调整&#xff0c;在面临高通胀风险及库存水平调整的过程中&#xff0c;市场短期展望并不明朗。然而&#xff0c;根据TrendForce对全球六大顶尖半导体代工厂&#xff08;TSMC、三星电子、英特尔、GlobalFoundries、UMC和SMIC&#xf…

函数、极限、连续——刷题(4

目录 1.题目&#xff1a;2.解题思路和步骤&#xff1a;3.总结&#xff1a;小结&#xff1a; 1.题目&#xff1a; 2.解题思路和步骤&#xff1a; 记住这个公式即可&#xff1a; 所以就很容易求解了&#xff1a; 3.总结&#xff1a; 记住这个公式即可&#xff1a; 小结&am…