今天遇到个开发中遇到个问题:如何在easyui的DataGrid的单元格添加ProgressBar进度条调用?刚才把问题搞定了,然后把代码分享出来,希望可以帮到遇到同样问题的朋友,写的不好,不当的地方请大家包涵。具体看代码和截图
[b]注意这里的value是一个百分数如:20%,用到DataGrid的formatter特性[/b]
[img]http://dl.iteye.com/upload/attachment/0076/8972/3357b203-8e4c-354d-9f8e-da4e2ef6d39b.png[/img]
关键思路实际上是把easyui的API示例代码如下
解析成它经过easyui.js重新构造后最终通过浏览器处理过的真正的摆在大家眼前的代码,然后在其基础上做相应的修改
20%
如果我把formatter的方法直接写成如下是解析不成的,到时单元格是空白,没有内容!
function progressFormatter(value,rowData,rowIndex){
var htmlstr = ' ';
return htmlstr;
}
所以我写成了对应的如下代码就好了:
function progressFormatter(value,rowData,rowIndex){
var htmlstr = ''+value+'
';
return htmlstr;
}
具体主要代码如下:
function progressFormatter(value,rowData,rowIndex){
var htmlstr = ''+value+'
';
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
});
});
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"}
]
}