列表报表显示数据为百分比进度条 

准备工作


  1. SQL返回用于进度条百分比的数值,比如:80 ,表示80%
  2. SQL返回一个div,定义class 例如:processbar
<script
  src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"
  integrity="sha256-UezNdLBLZaG/YoRcr48I68gr8pb5gyTBM+di5P8p6t8="
  crossorigin="anonymous"></script>
<script>  
 $(function() {
    // 数据格式为  按照指定分隔符分开的数据 , 百分比数据会自动转换成进度条 , 其他数据会换行处理 ,数据没有顺序限制, 百分比为英文的百分比
    // 例:   '数量:80,库存:100,80%'  或者: '60%'  或者:  '数量:60,60%,库存:100'
    var listId  = "list_progressTest";      //列表id
    var columnId = 'first';                 //进度条(包括数据源)列id
    var seprator = ",";                     //数据的分隔符
    var progressBarClass = "test";			//进度条的class,避免与页面其他元素冲突
    var defaultColor = "grey";				//进度条默认颜色
    var colorRules = "30:rgb(66, 224, 57);60:lightblue;90:rgb(251,0,0)";//进度条的颜色规则 , 数值:颜色;数值:颜色  进度小于该数值的颜色,用';'分隔 , 颜色可以使用rgb或者颜色单词
    var progressBarTdWidth = "300px"; // 进度条父级td的宽度 进度条默认宽度100% , 在进度条没有值时会导致表格宽度发生变化 ,如果需要以其他形式定义宽度时,将这一行代码注释

    $("#"+listId+" "+"td.column_"+columnId).each(function(){//选中每一个td
        var result = '<div>';
        $(this).css("width",progressBarTdWidth);// 如果需要以其他形式定义宽度时,将这行代码注释
        var content = $(this).text();//获取td中的内容
        var arr  = content.split(seprator);//按照指定分隔符分隔
        for (let j = 0; j <arr.length ; j++) {
            var s = arr[j];
            var num = s.substring(0,s.length-1);
            num = Number(num);
            if(s.endsWith("%") && typeof num == "number" && num>=0 && num<=100){//字符串以'%'结尾,'%'之前是数字,大于0小于100
                var progress = "<div class = '"+progressBarClass+"' name='"+num+"'></div>";
                result += progress;
            }else{//其余的字符串用div包裹,前台呈现换行效果,如果对这些字符串有额外操作, 将代码写在这里
                var div = "<div>"+s+"</div>";
                /*客户化代码*/
                result += div;
            }
        }
        result+="</div>";
        $(this).html(result)
    });

    function getColor(num){
        var colorRuleArr = colorRules.split(";");
        var result = defaultColor;
        for (let i = 0; i <colorRuleArr.length ; i++) {
            var maxNum = colorRuleArr[i].split(":")[0];
            maxNum = Number(maxNum);
            var color =  colorRuleArr[i].split(":")[1];
            if(num<maxNum){
                return  color;
            }
        }
        return result;
    }


 
       $("#"+listId+" ."+progressBarClass).each(function(){
            var num = Number($(this).attr("name"));
            $(this).progressbar({
                value: num
            });
            var barvalue = $(this).find( ".ui-progressbar-value" );
            //进度条显示百分比
            barvalue.html("<span class='center_progress' style='display: flex;'>"+$(this).progressbar("value") + "%</span>");
            barvalue.css({"background": getColor(num)});
       });
 
});
</script>

相关的文章