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

简介: 网上的搜到的好多不能用,官方easy-ui使用进度条  通过这个可以观察页面实际代码 90% 90% 在datagrid中将自己的数值替换上面的 90即可我这里传递到页面的是数值,不是百分比{field: 'status', title: '进度', width: getWidth(0.

网上的搜到的好多不能用,
官方easy-ui使用进度条

<div id="p" class="easyui-progressbar" ></div>  

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

<div id="p" class="easyui-progressbar progressbar"  value="90" text="90%">
    <div class="progressbar-text" >90%</div>
    <div class="progressbar-value" >
        <div class="progressbar-text" >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"  value="'+tempval +'" text="'+tempval+'%">'+
        '<div class="progressbar-text" >'+tempval+'%</div>'+
            '<div class="progressbar-value" >'+
                '<div class="progressbar-text" >'+tempval+'%</div>'+
            '</div>'+
        '</div>';
        return htmlstr;
    }
}

 

                        

 

目录
相关文章
|
8月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
44 2
|
8月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
77 0
|
8月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
8月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
194 0
|
8月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
314 0
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决