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
        });

    });

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视觉设计师的项目评审复盘攻略:如何提升设计质量与效率

视觉设计师的角色是至关重要的&#xff0c;以确保设计项目满足预期的质量和结果。作为一名视觉设计师&#xff0c;有必要进行定期的项目审查&#xff0c;以确保项目在正轨上进行&#xff0c;并尽早解决任何问题。在本文中我们将讨论可视化设计人员如何做好项目评审&#xff0c;…

【Anaconda】conda创建、删除、查看虚拟环境,安装pytorch

1.删除环境 首先退出现有的环境 conda deactivate然后查看要删除的环境名称与路径 conda env list接下来就可以删除环境了 有两种方法 方法1&#xff1a; conda env remove -p 要删除的虚拟环境路径对我来说就是&#xff1a; conda env remove -p D:\Anaconda3\envs\MVDet…

家庭动态网络怎么在公网访问主机数据?--DDNS配置(动态域名解析配置)

前言 Dynamic DNS是一个DNS服务。当您的设备IP地址被互联网服务提供商动态变更时,它提供选项来自动变更一个或多个DNS记录的IP地址。 此服务在技术术语上也被称作DDNS或是Dyn DNS 如果您没有一个静态IP,那么每次您重新连接到互联网是IP都会改变。为了避免每次IP变化时手动更…

BulingBuling - 《研究巴菲特》 [ Buffettology ]

研究巴菲特 使沃伦-巴菲特成为世界上最著名的投资者的那些以前未曾解释过的技术 作者&#xff1a;玛丽-巴菲特 Buffettology The Previously Unexplained Techniques That Have Made Warren Buffett The Worlds Most Famous Investor By Mary Buffett 内容提要 《Buffetto…

mysql数据库 mvcc

在看MVCC之前我们先补充些基础内容&#xff0c;首先来看下事务的ACID和数据的总体运行流程 数据库整体的使用流程: ACID流程图 mysql核心日志: 在MySQL数据库中有三个非常重要的日志binlog,undolog,redolog. mvcc概念介绍&#xff1a; MVCC&#xff08;Multi-Version Concurr…

高效宣讲管理:Java+SpringBoot实战

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

Ubuntu Desktop - Details (设备详情)

Ubuntu Desktop - Details [设备详情] 1. OverviewReferences 1. Overview System Settings -> Details -> Overview ​ References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

Code Composer Studio (CCS) - 文件比较

Code Composer Studio [CCS] - 文件比较 References 鼠标单击选中一个文件&#xff0c;再同时按住 Ctrl 鼠标左键来选中第二个文件&#xff0c;在其中一个文件上鼠标右击选择 Compare With -> Each Other. References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.n…

[VulnHub靶机渗透] Fowsniff

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

使用cockpit安装kvm虚拟机

下载管理虚拟机的插件 如果安装完成之后&#xff0c;出现报错&#xff0c;则刷新。如下图所示 添加虚拟网桥 进入添加网桥之后&#xff0c;名称自己修改&#xff0c;端口设置为自己的网卡名称。 之后返回xshell之后再次查看ip地址就会出现 添加镜像到物理机的根目录下 将系统…

智胜未来,新时代IT技术人风口攻略-第四版(弃稿)

文章目录 前言鸿蒙生态科普调研人员画像高校助力鸿蒙高校鸿蒙课程开设占比教研力量并非唯一原因 企业布局规划全盘接纳仍需一段时间企业对鸿蒙的一些诉求 机构入场红利机构鸿蒙课程开设占比机构对鸿蒙的一些诉求 鸿蒙实际体验高校用户群体高度认同与影响体验企业用户群体未来可…

深入解析Mybatis-Plus框架:简化Java持久层开发(二)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节开始从实际的应用场景&#xff0c;来讲解Mybatis-Plus常用的一些操作&#xff0c;根据业务场景来进行增删改查的功能&#xff0c;首先先搭建一个项目…

2024年上班族最适合做的副业:抖音小店,门槛真低!

大家好&#xff0c;我是电商糖果 搞钱难&#xff0c;做副业搞钱更难&#xff01; 作为普通上班族&#xff0c;一个人的薪资很难养活一个家庭&#xff0c;于是越来越多人开始琢磨副业。 而2024年最适合上班族的副业&#xff0c;真的是非抖音小店莫属了。 这两年抖音购物已经…

java.lang.NoClassDefFoundError: org/springframework/core/GenericTypeResolver

前言 小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识&#xff0c;有兴趣的小伙伴可以关注一下&#xff01; 也许一个人独行&#xff0c;可以走的很快&#xff0c;但是一群人结伴而行&#xff0c;才能走的更远&#xff01;让我们在成长的道路上互相学习&…

Java实现新能源电池回收系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块 三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计 四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…

485. Max Consecutive Ones(最大连续 1 的个数)

问题描述 给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 问题分析 因为nums中只有1与0两种字符&#xff0c;我们可以设计一个统计变量来统计某一段中1出现的次数&#xff0c;因为当1后面跟着一个0时意味着这一段1结束&#xff0c;由此可以实现统计1的数…

Pandas.Series.cummin() 累积最小值 详解 含代码 含测试数据集 随Pandas版本持续更新

关于Pandas版本&#xff1a; 本文基于 pandas2.2.0 编写。 关于本文内容更新&#xff1a; 随着pandas的stable版本更迭&#xff0c;本文持续更新&#xff0c;不断完善补充。 传送门&#xff1a; Pandas API参考目录 传送门&#xff1a; Pandas 版本更新及新特性 传送门&…

【打工日常】使用docker部署tool工具箱

一、tools介绍 Tools是一款开源的便捷解决我们日常遇到的小问题的工具集合&#xff0c;支持Docker私有化部署&#xff0c;具备大量的好用的小功能&#xff0c;如各种加密解密、token解析、url解析等等。 二、本次实践介绍 1. 本次实践简介 本次实践部署环境为个人测试环境 2.…

Oracle数据字典学习1

之前查看了几个用户的默认表空间&#xff0c;是从user_users来查看的&#xff1b; 根据资料&#xff1b; ORACLE中数据字典视图分为3大类,用前缀区别&#xff0c;分别为&#xff1a;USER&#xff0c;ALL 和 DBA&#xff1b; 许多数据字典视图包含相似的信息&#xff1b; USER_…

Dynamo之视图过滤器介绍

你好&#xff0c;这里是BIM的乐趣&#xff0c;我是九哥~ 今天简单整理一篇&#xff0c;源于最近很多人给我留言&#xff0c;问如何添加过滤器&#xff0c;那么我就简单把视图过滤器这块的节点及其用法整理下&#xff0c;基本上自带的节点就够用了。 获取项目中的所有视图过滤器…