网上的搜到的好多不能用,最后自己想出了一个方法,
官方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; } }
相关推荐
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);
详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展
datagrid添加tooltip及超出宽度添加省略号
NULL 博文链接:https://hjy2099.iteye.com/blog/260165
JS EasyUI DataGrid动态加载数据
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
easyUI datagrid 自动调整行号大小
EasyUI DataGrid过滤用法实例
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui datagrid 单元格合并及合并单元格的背景设置
easyUI datagrid 行上移,下移,置顶,置底的方法
解决EasyUIdataGrid列比较多,无数据,列展现不全
NULL 博文链接:https://songwensheng.iteye.com/blog/628997
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。