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

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

评论

3 楼 getec 2015-09-16  

我把您的代码粘进去，也没出来效果。
请问，代码是完整的么

2 楼 烽邪fen9ye 2014-06-05  

edatagrid函数中列包含formatter的话无法增删改

1 楼 snlilei 2013-05-23  

为什么我的页面上只显示文字百分百，没有显示进度条？