easyui的DataGrid的单元格添加ProgressBar进度条
网上的搜到的好多不能用,
官方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;
}
}
easyui的DataGrid的单元格添加ProgressBar进度条的更多相关文章
- easyui的datagrid改变单元格颜色
另一种方法:https://www.cnblogs.com/raitorei/p/10395233.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...
- 基于EasyUi的datagrid合并单元格JS写法
$('#dg').datagrid({ width: 'auto', height: 'auto', scrollbarSize: , queryParams: {}, url: 'kkkk', co ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- Easyui datagrid 扩展单元格textarea editor
datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...
- easyui前台改变datagrid某单元格的值
有时候前台完成某个操作后要修改datagrid的值, 也许这个datagrid是没有保存的, 所以要修改后才能传递到后台; 也许要其他操作过后才需请求后台; 这些情况都需要前台对datagrid的单元 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...
- 在Excel里用vba给合并的单元格添加注释
Excel里使用VBA对已经合并的单元格添加注释,直接使用AddComment会报: 运行时错误 '1004':应用程序定义或者对象定义错误 找了很多文章都没找到怎么解决,最后发现在AddCommen ...
随机推荐
- 【转】JavaScript => TypeScript 入门
几个月前把 ES6 的特性都过了一遍,收获颇丰.现在继续来看看 TypesScript(下文简称为 “TS”).限于经验,本文一些总结如有不当,欢迎指正. 官网有这样一段描述: TypeScript ...
- 通过BeanPostProcessor理解Spring中Bean的生命周期
通过BeanPostProcessor理解Spring中Bean的生命周期及AOP原理 Spring源码解析(十一)Spring扩展接口InstantiationAwareBeanPostProces ...
- nginx反向代理配置相对路径
需求: 在公司内部搭建了一个php的网站,想用花生壳映射到外网. 一.反向代理解决直接映射不成功问题 直接用把花生壳的"域名+端口"指向此php网站并竟然不生效.但是不加网站名可以 ...
- 逆袭之旅DAY16.东软实训.Oracle.修改用户
2018-07-12 15:49:51
- laravel在控制器中动态创建数据表
Schema::connection('usertable')->create('test', function ($table) { $table->increments('id'); ...
- nginx:支持https
1.查看nginx模块 nginx -V 注意是大写的V,小写的v是查看版本号的命令. 如果看到with-ssl那就是有的 2.注册ssl证书并下载 免费的ssl证书有: Let's Encrypt ...
- python logging模块,升级print调试到logging。
简介: 我们在写python程序的时候,很多时候都有bug,都是自己写的,自己造的孽,又的时候报错又是一堆,不知道是那部分出错了. 我这初学者水平,就是打print,看哪部分执行了,哪部分没执行,由此 ...
- 图的关键路径,AOE,完整实现,C++描述
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- HUSTOJ配置文件
转载:http://blog.csdn.net/zhblue/article/details/7366194 经常有用户询问如何开发一些功能,实际上这些功能都已经有,或者部分实现了,只需要修改配置文件 ...
- [Leetcode 881]船救人 Boats to Save People 贪心
[题目] The i-th person has weight people[i], and each boat can carry a maximum weight of limit. Each b ...