谢厅 发表于 2019-11-20 17:49:10

一种百分比的动态显示方式（进度）

        先看效果





    1. 引入资源文件jqc.js到全局或者使用页面
        2. 活字格内部设置
                a. 说明：
                        i. 为了能够实时监听到值的变化，我们使用活字格内置的“文本框“类型单元格来作为展示模板
                       
                        ii. 在页面上拉出一个“文本框”，并且命名为"progress"
                       
                        iii. 为“文本框”progress配置代码
                       
                       
                        代码：
const p = Forguncy.Page

                        const progessValue = parseFloat(p.getCell('progress').getValue())

                        const width = $("").css("width").split("px")

                        const height = $("").css("height").split("px")

                        $(":last").css("text-align", "right")

                        if ($("")) {

                          $(":last").html((progessValue * 100) + "%")

                          //$(":last").css(initial)

                          $(":last").animate({

                                "width": (progessValue * width) + "px",

                                "backgroundColor": getColor(progessValue),

                                "border-radius": (height / 2) + "px",

                                "color": "white",

                                "line-height": height + "px",

                                "padding-right": "4px"

                          }, 800)

                        } else {

                          $("").after($("").clone())

                          $(":last").empty()

                          $(":last").html((progessValue * 100) + "%")

                          $(":last").css("width", "0px")

                          //$(":last").css(initial)

                          $(":last").animate({

                                "width": (progessValue * width) + "px",

                                "backgroundColor": getColor(progessValue),

                                "border-radius": (height / 2) + "px",

                                "color": "white",

                                "line-height": height + "px",

                                "padding-right": "4px"

                          }, 400)

                        }

                        function getColor(value) {

                          let color = null

                          if (value <= 0.25) {

                                color = '#f63a0f'

                          } else {

                                if (value <= 0.5) {

                                    color = "#f2b01e"

                                } else {

                                    if (value <= 0.75) {

                                      color = "#f2d31b"

                                    } else {

                                      color = "#86e01e"

                                    }

                                }

                          }

                          return color

                        }                        iv. 为“文本框”progress赋值（为了动态展示，我们使用绑定字段的方式为其赋值）
                        
               




Simon.hu 发表于 2019-11-20 17:52:13

谢谢老板分享~

夏雪冬阳 发表于 2019-11-20 17:53:14

本帖最后由 夏雪冬阳 于 2019-11-20 17:54 编辑

举个例子，用在什么场景下，类似于那种加载进度条吗

gaoshoucheng 发表于 2019-11-20 17:58:21

蟹老板威武:lol:lol:lol
让我们继续活在你的影子里

settings0 发表于 2019-11-20 18:11:19

老蟹威武:lol

咖啡里 发表于 2019-11-20 18:20:59

:hjyzw:谢总威武

imis.ltd 发表于 2019-11-21 00:09:01

厅长V587:D

Simon.hu 发表于 2019-11-21 19:15:12

必须的~

137294886 发表于 2020-4-28 21:16:36

Simon.hu 发表于 2019-11-21 19:15
必须的~

谢总威武

Simon.hu 发表于 2020-4-29 18:33:30

:hjyzw:
页: [1]
查看完整版本: 一种百分比的动态显示方式（进度）