easyui datagrid中某列显示 Progressbar 进度条

最新推荐文章于 2023-08-01 14:51:53 发布

handsomepig123_

最新推荐文章于 2023-08-01 14:51:53 发布

阅读量608

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/handsomepig123_/article/details/112860641

版权

本文介绍如何在EasyUI的datagrid中为某一列显示Progressbar进度条。前端部分参考了CSDN博主SinceJune的文章，详细阐述了实现步骤。后端则需要提供一个接口，返回列表数据的同时包含进度字段，具体实现可以参考CSDN上的u013040472和超级超的博客文章。

摘要由CSDN通过智能技术生成

效果：

前端-参考https://blog.csdn.net/SinceJune/article/details/38657067

{
    title: '修改人',
    field: 'modifier',
    width: 120,
    align: "center",
    editor: {
        type: 'textbox',
        options: {
            required: true
        }
    }
},{
    title: '进度',
    field: 'progress',
    formatter: progressBar
}]],
toolbar: '#dtlToolBar',

//显示进度-注意点（background-color:#2bccc882 要选择有透明度的颜色，最开始选择的是无透明度的颜色，进度条颜色会遮住进度条百分比）
function progressBar(value, rowData, rowIndex) {
    var demostr = "<div class='easyui-progressbar progressbar easyui-fluid' style='width:200px'><div class