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.mzph.cn/news/686493.shtml

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

相关文章

DPU技术的进步:赋予未来创新力量

随着云计算和虚拟化技术的发展&#xff0c;网卡在功能和硬件结构方面也经历了四个阶段&#xff0c;即网卡、智能网卡、基于FPGA的DPU和DPU SoC网卡。本文将重点介绍这些不同类型的网络适配器和处理器&#xff0c;在硬件、可编程能力、开发和应用方面的特点。 网卡的演进和应用…

第四节笔记:XTuner 大模型单卡低成本微调实战

视频链接&#xff1a;https://www.bilibili.com/video/BV1yK4y1B75J/?spm_id_from333.788&vd_source3bbd0d74033e31cbca9ee35e111ed3d1 课程笔记&#xff1a; 1.Finetune简介 指令微调&#xff1a; 开始的大模型可能不知道问的是问题 这三种角色的划分只有在微调训练阶…

LeetCode、452. 用最少数量的箭引爆气球【中等,贪心,区间问题】

文章目录 前言LeetCode、452. 用最少数量的箭引爆气球【中等&#xff0c;贪心&#xff0c;区间问题】题目链接与分类思路贪心&#xff0c;连续区间数量问题 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客…

Unity 减低GC和优化

文章目录 在Unity中&#xff0c;垃圾收集&#xff08;Garbage Collection, GC&#xff09;是一项重要的内存管理机制&#xff0c;但过度的GC活动可能会导致性能瓶颈。优化Unity项目中的GC涉及减少不必要的对象分配和生命周期管理。以下列举了五个实例来详细说明如何降低GC负担并…

数学建模【线性规划】

一、线性规划简介 线性规划通俗讲就是“有限的资源中获取最大的收益”&#xff08;优化类问题&#xff09;。而且所有的变量关系式都是线性的&#xff0c;不存在x、指数函数、对数函数、反比例函数、三角函数等。此模型要优化的就是在一组线性约束条件下&#xff0c;求线性目标…

java 课程签到管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 课程签到管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0…

飞天使-k8s知识点20-kubernetes实操5-pod更新与暂停-statefulset

文章目录 资源调度 Deployment&#xff1a;扩缩容资源调度 Deployment&#xff1a;更新的暂停与恢复资源调度 StatefulSet&#xff1a;定义一个有状态服务headless service 金丝雀发布 资源调度 Deployment&#xff1a;扩缩容 扩容和缩容&#xff0c;常用的功能 scale[rootkub…

C++11---lambda表达式

lambda表达式 lambda表达式概念lambda表达式语法lambda表达式各部分说明 lambda表达式交换两个数lambda表达式底层原理lambda表达式的底层原理 lambda表达式之间不能相互赋值 lambda表达式概念 lambda表达式是一个匿名函数&#xff0c;恰当使用lambda表达式可以让代码变得简洁…

企业计算机服务器中了faust勒索病毒怎么办?Faust勒索病毒解密数据恢复

网络技术的不断发展与更新&#xff0c;为企业的生产运营提供了极大便利&#xff0c;但也为企业的数据安全埋下隐患。近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器遭到了faust勒索病毒攻击&#xff0c;给企业的生产运营带来了极大困扰&am…

matlab中mosek安装教程

MOSEK数学优化软件包&#xff08;Mosek Optimization Tools&#xff09; 是一款MOSEK优化软件包&#xff0c;是一款用来解决大规模级别数学优化问题的软件。MOSEK提供了特定解决线性编程、混合整数编程以及其它非线性转换优化问题。 mosek安装教程 ①去官网https://www.mosek…

【研究生复试】计算机软件工程人工智能研究生复试——资料整理(速记版)——数据库

1、JAVA 2、计算机网络 3、计算机体系结构 4、数据库 5、计算机租场原理 6、软件工程 7、大数据 8、英文 自我介绍 4. 数据库 1. B树相对于B树的区别及优势 B树中有重复元素&#xff0c;B树没有重复元素B树种每个节点都存储了key和data&#xff0c;B树内节点去掉了其中指向数…

【C++11】:unordered系列关联式容器

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关unordered系列关联式容器的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;…

VNCTF 2024 Web方向 WP

Checkin 题目描述&#xff1a;Welcome to VNCTF 2024~ long time no see. 开题&#xff0c;是前端小游戏 源码里面发现一个16进制编码字符串 解码后是flag CutePath 题目描述&#xff1a;源自一次现实渗透 开题 当前页面没啥好看的&#xff0c;先爆破密码登录试试。爆破无果…

鸿蒙应用开发工程师招聘多吗?工资有多少呢?

随着鸿蒙操作系统的快速普及&#xff0c;越来越多的企业开始重视鸿蒙应用开发人才的培养和引进。那么&#xff0c;目前市场上鸿蒙应用开发工程师招聘多吗&#xff1f;工资有多少呢&#xff1f; 首先&#xff0c;我们来了解一下鸿蒙应用开发工程师的招聘情况。随着鸿蒙操作系统…

第三百五十回

文章目录 1. 概要介绍2. 获取方法2.1 获取语言2.2 获取地址 3.示例代码3. 内容总结 我们在上一章回中介绍了"给geolocator插件提交问题"相关的内容&#xff0c;本章回中将介绍如何获取系统语言.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概要介绍 我们在本…

【plt.imshow显示图像】:从入门到精通,只需一篇文章!【Matplotlib】

【plt.imshow显示图像】&#xff1a;从入门到精通&#xff0c;只需一篇文章&#xff01;【Matplotlib】 &#x1f680; 利用Matplotlib进行数据可视化示例 &#x1f335;文章目录&#x1f335; &#x1f4d8; 1. plt.imshow入门&#xff1a;认识并安装Matplotlib库&#x1f308…

【数据结构】17 二叉树的建立

二叉树的建立 由于树是非线性结构&#xff0c;创建一颗二叉树必须首先确定树中结点的输入顺序&#xff0c;常用方法是先序创建和层序创建。 层序创建所用的节点输入序列是按数的从上至下从左到右的顺序形成的各层的空结点输入数值0。在构造二叉树过程中需要一个队列暂时存储各…

gitlab runner 安装、注册、配置、使用(K8S部署)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

C++中获取成员函数地址的方法

C中获取成员函数地址的方法 文章目录 C中获取成员函数地址的方法[toc]前言方法1&#xff1a;通过联合体的共享储存机制方法2&#xff1a;通过汇编取成员函数偏移得到地址调用方法和测试案例 前言 ​ 这里我一共总结了两种目前可以说是最高效易用的方法来获取成员函数地址&…

深度学习主流开源框架:Caffe、TensorFlow、Pytorch、Theano、Keras、MXNet、Chainer

2.6 深度学习主流开源框架 表2.1 深度学习主流框架参数对比 框架关键词总结 框架关键词基本数据结构&#xff08;都是高维数组&#xff09;Caffe“在工业中应用较为广泛”&#xff0c;“编译安装麻烦一点”BlobTensorFlow“安装简单pip”TensorPytorch“定位&#xff1a;快…