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.rhkb.cn/news/259196.html

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

相关文章

HarmonyOS—状态管理概述

在前文的描述中&#xff0c;我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面&#xff0c;就需要引入“状态”的概念。 图1 效果图 上面的示例中&#xff0c;用户与应用程序的交互触发了文本状态变更&#xff0c;状态变更引起了UI渲染&#xff0c;UI从“He…

华为23年9月笔试原题,巨详细题解,附有LeetCode测试链接

文章目录 前言思路主要思路关于f函数的剖析Code就到这&#xff0c;铁子们下期见&#xff01;&#xff01;&#xff01;&#xff01; 前言 铁子们好啊&#xff01;今天阿辉又给大家来更新新一道好题&#xff0c;下面链接是23年9月27的华为笔试原题&#xff0c;LeetCode上面的ha…

论文阅读-Pegasus:通过网络内一致性目录容忍分布式存储中的偏斜工作负载

论文名称&#xff1a;Pegasus: Tolerating Skewed Workloads in Distributed Storage with In-Network Coherence Directories 摘要 高性能分布式存储系统面临着由于偏斜和动态工作负载引起的负载不平衡的挑战。本文介绍了Pegasus&#xff0c;这是一个利用新一代可编程交换机…

cool Node后端 中实现中间件的书写

1.需求 在node后端中&#xff0c;想实现一个专门鉴权的文件配置&#xff0c;可以这样来解释 就是 有些接口需要token调用接口&#xff0c;有些接口不需要使用token 调用 这期来详细说明一下 什么是中间件中间件顾名思义是指在请求和响应中间,进行请求数据的拦截处理&#xf…

解锁Spring Boot中的设计模式—04.桥接模式:探索【桥接模式】的奥秘与应用实践!

桥接模式 桥接模式也称为桥梁模式、接口模式或者柄体&#xff08;Handle and Body&#xff09;模式&#xff0c;是将抽象部分与他的具体实现部分分离&#xff0c;使它们都可以独立地变化&#xff0c;通过组合的方式建立两个类之间的联系&#xff0c;而不是继承。 桥接模式是一种…

《区块链公链数据分析简易速速上手小册》第10章:未来趋势和挑战(2024 最新版)

文章目录 10.1 区块链技术的发展方向10.1.1 基础知识10.1.2 重点案例:构建一个简单的智能合约步骤1: 创建智能合约步骤2: 部署智能合约步骤3: 使用Python与智能合约交互结语10.1.3 拓展案例 1:探索 DeFi 应用准备工作实现步骤步骤1: 获取Compound市场数据步骤2: 分析借贷市场…

给定n个结点m条边的简单无向图,判断该图是否存在鱼形状的子图:有一个环,其中有一个结点有另外两条边,连向不在环内的两个结点。若有,输出子图的连边

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e18 * 3, maxm 4e4 …

如何基于YAML设计接口自动化测试框架?看完秒会!

在设计自动化测试框架的时候&#xff0c;我们会经常将测试数据保存在外部的文件&#xff08;如Excel、YAML、CSV&#xff09;或者数据库中&#xff0c;实现脚本与数据解耦&#xff0c;方便后期维护。目前非常多的自动化测试框架采用通过Excel或者YAML文件直接编写测试用例&…

【Leetcode刷题笔记】27. 移除元素

原题链接 Leetcode 27. 移除元素 题目 给你一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并原地修改输入数组。元素的顺序可以改变。…

【MySQL】学习多表查询和笛卡尔积

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-N8PeTKG6uLu4bJuM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

解锁Spring Boot中的设计模式—02.解释器模式:探索【解释器模式】的奥秘与应用实践!

解释器模式 1.简介 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;它用于定义语言的文法&#xff0c;并且解释语言中的表达式。在Java中&#xff0c;解释器模式可以用于构建解释器以解析特定的语言或表达式&#xff0c;如数学表达式、…

Unity中,C#的事件与委托区别和经典实例

文章目录 实例1&#xff1a;委托&#xff08;Delegate&#xff09;的基本用法实例2&#xff1a;事件&#xff08;Event&#xff09;的声明与订阅实例3&#xff1a;Unity引擎中的委托实例 - UI Button.onClick实例4&#xff1a;事件&#xff08;Event&#xff09;的安全性实例5&…

C#安装CommunityToolkit.Mvvm依赖

这里需要有一定C#基础&#xff0c; 首先找到右边的解决方案&#xff0c;右键依赖项 然后选择nuget管理 这里给大家扩展一下nuget的国内源&#xff08;https://nuget.cdn.azure.cn/v3/index.json&#xff09; 然后搜自己想要的依赖性&#xff0c;比如CommunityToolkit.Mvvm 再点…

面试经典150题【1-10】

文章目录 面试经典150题【1-10】88. 合并两个有序数组27.移除元素26.删除有序数组中的重复项80.删除有序数组中的重复项II169.多数元素189.轮转数组121.买卖股票的最佳时机1122. 买卖股票的最佳时机 II55.跳跃游戏![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff…

【智能家居入门4】(FreeRTOS、MQTT服务器、MQTT协议、微信小程序)

前面已经发了智能家居入门的1、2、3了&#xff0c;在实际开发中一般都会使用到实时操作系统&#xff0c;这里就以FreeRTOS为例子&#xff0c;使用标准库。记录由裸机转到实时操作系统所遇到的问题以及总体流程。相较于裸机&#xff0c;系统实时性强了很多&#xff0c;小程序下发…

Midjourney风格一致功能解读及使用方法

Midjourneys再次迎来更新&#xff0c;本次新增“风格一致”功能&#xff01;用户期待已久的风格模仿功能终于实现了&#xff01; --sref 虽然目前只是测试功能&#xff0c;但已经相当强大了&#xff0c;这篇文章我将带大家先睹为快&#xff01; 别忘了&#xff0c;这个功能目前…

带你了解软件系统架构的演变

随着信息技术的飞速发展&#xff0c;软件系统架构作为支撑软件系统的核心框架&#xff0c;也在不断地演变和进步。本文旨在带你了解软件系统架构的发展历程&#xff0c;从而更好地理解现代软件系统的构建和设计。 一、单体应用架构 单体应用架构是最早的软件系统架构形式&…

这才是大学生该做的副业,别再痴迷于游戏了!

感谢大家一直以来的支持和关注&#xff0c;尤其是在我的上一个公众号被关闭后&#xff0c;仍然选择跟随我的老粉丝们&#xff0c;你们的支持是我继续前行的动力。为了回馈大家长期以来的陪伴&#xff0c;我决定分享一些实用的干货&#xff0c;这些都是我亲身实践并且取得成功的…

上位机图像处理和嵌入式模块部署(上位机主要功能)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 目前关于机器视觉方面&#xff0c;相关的软件很多。比如说商业化的halcon、vision pro、vision master&#xff0c;当然也可以用opencv、pytorch自…

安装配置NMon

NMon&#xff08;Nigel’s Monitor&#xff09;是一款由IBM公司提供的免费性能监控工具&#xff0c;专门用于监控AIX系统和Linux系统的资源使用情况 下载软件 wget http://sourceforge.net/projects/nmon/files/nmon16p_binaries.tar.gz 如果报错的话&#xff0c;安装提示添加…