EasyUI动态加载组件

news2025/1/22 12:19:08

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

主要是需要再次初始化组件,借用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.coloradmin.cn/o/1454806.html

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

相关文章

阿里云香港轻量应用服务器是什么线路?

阿里云香港轻量应用服务器是什么线路&#xff1f;不是cn2。 阿里云香港轻量服务器是cn2吗&#xff1f;香港轻量服务器不是cn2。阿腾云atengyun.com正好有一台阿里云轻量应用服务器&#xff0c;通过mtr traceroute测试了一下&#xff0c;最后一跳是202.97开头的ip&#xff0c;1…

【Qt学习】QIcon类 + 利用qrc机制设置图片路径(QtCreator)

文章目录 1. QIcon / windowIcon2. setIcon() 与 setwindowIcon()2.1 setIcon() 介绍与使用2.2 setWindowIcon 介绍与使用 3. 路径问题 & qrc机制的引入3.1 绝对路径 / 相对路径 的问题3.2 qrc机制3.3 在QtCreator下利用qrc机制引入图片 1. QIcon / windowIcon QIcon QIco…

dubbo源码中设计模式——负载均衡中模版模式的应用

模版模式介绍 在模板模式&#xff08;Template Pattern&#xff09;中&#xff0c;一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的方式进行。这种类型的设计模式属于行为型模式。 使用场景&#xff1a;定…

《隐私计算简易速速上手小册》第3章:隐私计算的法律与伦理(2024 最新版)

文章目录 3.1 数据保护法规概览3.1.1 基础知识3.1.2 重点案例&#xff1a;企业适应 GDPR3.1.3 拓展案例 1&#xff1a;国际公司处理多地法规3.1.4 拓展案例 2&#xff1a;小型创业公司的数据保护实践 3.2 隐私计算与伦理考量3.2.1 基础知识3.2.2 重点案例&#xff1a;数据隐私与…

【Java EE初阶十三】网络初识

1. 网络发展史 网络发展的几个主要时期&#xff1a; 单机时代->局域网时代->广域网时代->移动互联网时代 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即以多个计算机协同工作来完成 业务&#xff0c;就有了网络互…

VMware Tools安装教程(适用windows虚拟机)

一、资源 VMware-tools安装包已绑定在资源中 二、步骤 1、点击已经开启的虚拟机中的此图标&#xff0c;点击设置 2、将镜像文件选中&#xff0c;点击确定 3、之后会自动进入安装过程&#xff0c;点击下一步 4、选择典型安装&#xff0c;下一步直到完成&#xff0c;完成后重启…

洛谷 P6354 [COCI2007-2008#3] TAJNA

题目传送门https://www.luogu.com.cn/problem/P6354?contestId158451 参考代码 代码解读 for(int isqrt(len);i>0;i--) if(len%i0) { ri,slen/i; break; } -->计算矩阵大小 for(int i0;i<s;i) for(int j0;j<r;j)--&…

二叉树(4)——链式二叉树

1 二叉树的概念 二叉树是&#xff1a; 空树非空&#xff1a;根节点&#xff0c;根节点的左子树、根节点的右子树组成的。 二叉树定义是递归式的&#xff0c;因此后序基本操作中基本都是按照该概念实现的。 2 二叉树的遍历 2.1 前序、中序以及后序遍历 学习二叉树结构&#xf…

【教程】Linux使用aria2c多线程满速下载

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 安装aria2c&#xff1a; sudo apt-get install aria2多线程下载&#xff1a; aria2c -x 16 -s 16 <url> 比如&#xff1a; aria2c -x 16 -s 16 http://images.cocodataset.org/zips/test2017.zip

Vue22 Vue监测数据改变的原理_数组

实例 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>Vue监测数据改变的原理_数组</title><!-- 引入Vue --><script type"text/javascript" src"../js/vue.js"></script>&…

node命令yarn --version指向了java

问题描述 本地安装了java、hadoop和nodejs&#xff0c;并配置了环境变量&#xff0c;但是hadoop的bin目录下存在yarn命令&#xff0c;所以使用nodejs的yarn命令启动项目会出现找不到类&#xff0c;此时键入yarn -version也会显示java的版本。 原因分析 由于配置了hadoop环境…

2024年重磅消息:来自OpenAI发布的视频生成模型Sora

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

算法之力扣数青蛙

题目连接 文章目录 题目解析算法原理第一步第二步第三步第三步第四步指向o 代码讲解代码实现 题目解析 先给大家来讲解一下这个题目的意思吧&#xff0c;这个题目是说呢给你一个蛙叫的字符串让你去设计一个算法求出发出这种蛙叫最少需要几只青蛙。比如说第一个样例发出这种叫声…

反射的作用

获取一个类里面所有的信息&#xff0c;获取到了之后&#xff0c;再执行其他的业务逻辑结合配置文件&#xff0c;动态的创建对象并调用方法 练习1&#xff1a; public class MyTest {public static void main(String[] args) throws IllegalAccessException, IOException {Stude…

xstream.mapper和mybatisplus.core.mapper冲突

报错信息 [com.baomidou.mybatisplus.core.mapper.Mapper] conflicts with existing, non-compatible bean definition of same name and class [com.thoughtworks.xstream.mapper.Mapper] 问题描述&#xff1a; 由于一些原因&#xff0c;需要将该SpringBoot的程序&#xff0c…

Android稳定性相关知识

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、相关方法论3.1 crash3.2 性能3.3 高…

el-form validator的校验提示遮盖下边的内容

问题&#xff1a;表单的validator校验&#xff0c;无法自动撑起tip提示的高度&#xff0c;导致遮盖了下边内容 解决方式&#xff1a;将tip提示的样式的定位设置为遵循正常的文档流对象&#xff0c;实现自适应高度。 .el-form-item .el-form-item__content .el-form-item__err…

Linux+Win双系统远程重启到Win

背景 电脑安装了双系统&#xff08;ubuntu 22.04 win11&#xff09;&#xff0c;默认进入ubuntu系统。给电脑设置了WoL(Wake-on-LAN)&#xff0c;方便远程开机远程控制。 但是ubuntu的引导程序grub无法远程控制&#xff0c;远程开机会默认进入ubuntu。 虽然说可以进入ubuntu后…

C#安装CommunityToolkit.Mvvm依赖

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

Unity数据持久化之PlayerPrefs

PlayerPrefs概述 什么是数据持久化 数据持久化就是将内存中的数据模型转换为存储模型&#xff0c;以及将存储模型转换为内存中的数据模型的统称。即将游戏数据存储到硬盘&#xff0c;硬盘中数据读取到游戏中&#xff0c;也就是传统意义上的存盘。 基本方法 PlayerPrefs是什么…