{field: 'DataItemNum', title: '数据完整度', width: 100, formatter: function (v, r, i) {
var p = (v / 27) * 100;
var value = Math.ceil(p);
var htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
+ '<div class="progressbar-value" style="width: 100%; height: 20px; line-height: 20px;"> '
+ '<div class="progressbar-text" style="width: ' + value+'%'+ '; height: 20px; line-height: 20px;">' + value+ '%</div>'
+ '</div>'
+ '</div>';
return htmlstr; }

进度条长度这里要写成  xx%  格式

渲染效果

easyui datagrid 单元格加进度条(亲测可用)的更多相关文章

  1. EasyUI Datagrid 单元格编辑

    3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...

  2. DevExpress GridControl 单元格添加进度条(ProgressBar)

    首先可以使用DevExpress GridControl 自带的进度条控件. 但是我要用一个方法来设置所以的单元格进度,而不是每个单元格都要设置一遍,同时我想要根据进度值不同,进度条显示不同的颜色. ...

  3. EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  4. easyui datagrid 单元格编辑(cell editing)

    demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...

  5. easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

    效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...

  6. easyui datagrid 单元格编辑 自动聚焦 、全选

    $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...

  7. easyui datagrid 单元格 编辑时 事件 修改另一单元格

    //datagrid 列数据 $('#acc').datagrid({ columns : [ [ { field : 'fee_lend', title : '收费A', width : 100, ...

  8. easyui datagrid单元格实现溢出文本显示省略号的效果。

    Css .datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-sp ...

  9. 使用java实现AES算法的加解密(亲测可用)

    话不多说,直接上代码 import javax.crypto.Cipher;   import javax.crypto.spec.IvParameterSpec; import javax.cryp ...

随机推荐

  1. [BZOJ2815]灾难

    题目描述 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过生物的阿米巴告 ...

  2. TCP中间件_个人方案

    按照功能分类,不管是直接的 insert/delete/update/select语句 还是 调用存储过程,基本的功能 就是 增删改查.又分为两大类: (1).查询(会返回结果集的),(2).非查询( ...

  3. note——《Tableau商业分析一点通》

    为了更好地发掘各领域的数据价值,且能对数据进行精确分析及可视化,掌握资料的脉动,做出正确的决策 人们需要一种工具:能够快速灵活地连接和整合数据,提供简单的方式实现从不同的角度去观察研究数据,计算和展示 ...

  4. 新东方雅思词汇---7.3、dioxide

    新东方雅思词汇---7.3.dioxide 一.总结 一句话总结: di(双)+oxide 英 [daɪ'ɒksaɪd]  美 [daɪ'ɑksaɪd]  n. 二氧化物 词组短语 carbon di ...

  5. WSL安装xfce4

    参考:https://github.com/Microsoft/WSL/issues/637 安装组件 1. win10 上安装 Xming https://sourceforge.net/proje ...

  6. uva-1449-AC自动机

    题目链接https://vjudge.net/problem/UVA-1449 题目大意:给出N(N<150)个长度不超过L(70)的匹配串和一个长度小于1e6的文本串,在文本串中找出出现次数最 ...

  7. 解决tomcat中jdk1.5运行日志相差8小时问题

    tomcat运行日志时间与电脑中的时间相差8小时,原因是因为jdk1.5的原因: 解决办法是在jdk运行的时候加上默认参数: Window->Preferences->Java->I ...

  8. java jprofile

    java -agentpath:/opt/jprofiler8/bin/linux-x64/libjprofilerti.so=port=8849,nowait -Xdebug -Xrunjdwp:t ...

  9. 016——VUE中v-show的使用与v-if的差异对比

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ElasticSearch6.0 Java API 使用 排序,分组 ,创建索引,添加索引数据,打分等(一)

    ElasticSearch6.0  Java API  使用     排序,分组 ,创建索引,添加索引数据,打分等 如果此文章对你有帮助,请关注一下哦 1.1 搭建maven 工程  创建web工程 ...