今天遇到个开发中遇到个问题:如何在easyui的DataGrid的单元格添加ProgressBar进度条调用?刚才把问题搞定了,然后把代码分享出来,希望可以帮到遇到同样问题的朋友,写的不好,不当的地方请大家包涵。具体看代码和截图
注意这里的value是一个百分数如:20%,用到DataGrid的formatter特性
关键思路实际上是把easyui的API示例代码如下
<div class="easyui-progressbar" style="width:400px;" value="20%"></div>
解析成它经过easyui.js重新构造后最终通过浏览器处理过的真正的摆在大家眼前的代码,然后在其基础上做相应的修改
<div class="progressbar-text" style="width:398px;">20%</div>
<div class="progressbar-value" style="width:20%;"> </div>
如果我把formatter的方法直接写成如下是解析不成的,到时单元格是空白,没有内容!
function progressFormatter(value,rowData,rowIndex){
var htmlstr = '<div class="easyui-progressbar" style="width:400px;" value="'+value+'"></div> ';
return htmlstr;
}
所以我写成了对应的如下代码就好了:
function progressFormatter(value,rowData,rowIndex){
var htmlstr = '<div class="progressbar-text" style="width:398px;">'+value+'</div><div class="progressbar-value" style="width:'+value+';"> </div>';
return htmlstr;
}
具体主要代码如下:
function progressFormatter(value,rowData,rowIndex){
var htmlstr = '<div class="progressbar-text" style="width:398px;">'+value+'</div><div class="progressbar-value" style="width:'+value+';"> </div>';
return htmlstr;
}
$(function(){
$('#safett2').edatagrid({
nowrap: false,
striped: true,
fit: true,
url:'datagrid_data_safett2.json',
sortName: 'id',
sortOrder: 'desc',
idField:'id',
singleSelect:true,
columns:[[
{field:'task',title:'任务内容',width:120},
{field:'progress',title:'进展状况',width:400,formatter:progressFormatter},
{field:'question',title:'遇到问题',width:200}
]],
pagination:true,
rownumbers:true
});
});
<table id="safett2"></table>
datagrid_data_safett2.json的示例值
{
"total":20,
"rows":[
{"id":"001","task":"任务内容11","progress":"20%","question":"遇到问题1"},
{"id":"002","task":"任务内容13","progress":"30%","question":"遇到问题2"},
{"id":"003","task":"任务内容87","progress":"35%","question":"遇到问题3"},
{"id":"004","task":"任务内容63","progress":"25%","question":"遇到问题2"},
{"id":"005","task":"任务内容45","progress":"10%","question":"遇到问题4"},
{"id":"006","task":"任务内容16","progress":"20%","question":"遇到问题2"},
{"id":"007","task":"任务内容27","progress":"70%","question":"遇到问题4"},
{"id":"008","task":"任务内容81","progress":"40%","question":"遇到问题3"},
{"id":"009","task":"任务内容69","progress":"20%","question":"遇到问题4"},
{"id":"010","task":"任务内容78","progress":"90%","question":"遇到问题3"}
]
}
- 大小: 12.8 KB
分享到:
相关推荐
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 类似淘宝筛选 但允许复选
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui datagrid 单元格合并及合并单元格的背景设置
NULL 博文链接:https://songwensheng.iteye.com/blog/628997
解决EasyUIdataGrid列比较多,无数据,列展现不全
easyUI datagrid 行上移,下移,置顶,置底的方法