如何在easyui的DataGrid的单元格添加ProgressBar进度条

今天遇到个开发中遇到个问题:如何在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"}
]
}

你可能感兴趣的:(javascirpt,easyui,jQuery,html,css)