easyui的DataGrid的单元格添加ProgressBar进度条

最新推荐文章于 2018-03-11 17:42:00 发布

原创最新推荐文章于 2018-03-11 17:42:00 发布 · 579 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种在EasyUI框架中利用Datagrid显示进度条的方法。通过自定义formatter函数，将数据行中的状态值转换为进度条显示，并调整其宽度和高度以适应界面需求。

网上的搜到的好多不能用，最后自己想出了一个方法，

官方easy-ui使用进度条

<div id="p" class="easyui-progressbar" style="width:400px;"></div>

通过这个可以观察页面实际代码

<div id="p" class="easyui-progressbar progressbar" style="width: 118px; height: 20px;" value="90" text="90%">
    <div class="progressbar-text" style="width: 118px; height: 20px; line-height: 20px;">90%</div>
    <div class="progressbar-value" style="width: 90%; height: 20px; line-height: 20px;">
        <div class="progressbar-text" style="width: 118px; height: 20px; line-height: 20px;">90%</div>
    </div>
</div>

在datagrid中将自己的数值替换上面的 90即可

我这里传递到页面的是数值，不是百分比

                        {field: 'status', title: '进度', width: getWidth(0.12), align: 'center',
                            formatter: function (value, rec) {
                                //rec.status*100/4
                                var tempval=rec.status*100/4;
                                var htmlstr = '<div class="easyui-progressbar progressbar" style="width: 196px; height: 20px;" value="'+tempval +'" text="'+tempval+'%">'+
                                '<div class="progressbar-text" style="width: 196px; height: 20px; line-height: 20px;">'+tempval+'%</div>'+
                                    '<div class="progressbar-value" style="width: '+tempval+'%; height: 20px; line-height: 20px;">'+
                                        '<div class="progressbar-text" style="width: 196px; height: 20px; line-height: 20px;">'+tempval+'%</div>'+
                                    '</div>'+
                                '</div>';
                                return htmlstr;
                            }
                        }