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

 

今天遇到个开发中遇到个问题：如何在easyui的DataGrid的单元格添加ProgressBar进度条调用？刚才把问题搞定了，然后把代码分享出来，希望可以帮到遇到同样问题的朋友，写的不好，不当的地方请大家包涵。具体看代码和截图 
注意这里的value是一个百分数如：20%，用到DataGrid的formatter特性 


关键思路实际上是把easyui的API示例代码如下 

Html代码 

 

1. <div  class="easyui-progressbar" style="width:400px;" value="20%"></div>    

解析成它经过easyui.js重新构造后最终通过浏览器处理过的真正的摆在大家眼前的代码,然后在其基础上做相应的修改 

Html代码 

 

1. <div class="progressbar-text" style="width:398px;">20%</div>  
2. <div class="progressbar-value" style="width:20%;"> </div>  

如果我把formatter的方法直接写成如下是解析不成的，到时单元格是空白，没有内容！ 

Js代码 

 

1. function progressFormatter(value,rowData,rowIndex){  
2.     var htmlstr = '<div  class="easyui-progressbar" style="width:400px;" value="'+value+'"></div> ';  
3.     return htmlstr;  
4. }  

所以我写成了对应的如下代码就好了： 

Js代码 

 

1. function progressFormatter(value,rowData,rowIndex){  
2.     var htmlstr = '<div class="progressbar-text" style="width:398px;">'+value+'</div><div class="progressbar-value" style="width:'+value+';"> </div>';  
3.     return htmlstr;  
4. }  

具体主要代码如下： 

Js代码 

 

1. function progressFormatter(value,rowData,rowIndex){  
2.     var htmlstr = '<div class="progressbar-text" style="width:398px;">'+value+'</div><div class="progressbar-value" style="width:'+value+';"> </div>';  
3.     return htmlstr;  
4. }  
5. $(function(){  
6.     $('#safett2').edatagrid({  
7.         nowrap: false,  
8.         striped: true,  
9.         fit: true,  
10.         url:'datagrid_data_safett2.json',  
11.         sortName: 'id',  
12.         sortOrder: 'desc',  
13.         idField:'id',  
14.         singleSelect:true,    
15.         columns:[[  
16.                 {field:'task',title:'任务内容',width:120},  
17.                 {field:'progress',title:'进展状况',width:400,formatter:progressFormatter},  
18.                 {field:'question',title:'遇到问题',width:200}  
19.             ]],  
20.         pagination:true,  
21.         rownumbers:true  
22.     });  
23. });  

 

Html代码 

 

1. <table id="safett2"></table>   

datagrid_data_safett2.json的示例值 

Js代码 

 

1. {                                                        
2.     "total":20,                                                        
3.     "rows":[                                                            
4.         {"id":"001","task":"任务内容11","progress":"20%","question":"遇到问题1"},           
5.         {"id":"002","task":"任务内容13","progress":"30%","question":"遇到问题2"},         
6.         {"id":"003","task":"任务内容87","progress":"35%","question":"遇到问题3"},          
7.         {"id":"004","task":"任务内容63","progress":"25%","question":"遇到问题2"},          
8.         {"id":"005","task":"任务内容45","progress":"10%","question":"遇到问题4"},           
9.         {"id":"006","task":"任务内容16","progress":"20%","question":"遇到问题2"},         
10.         {"id":"007","task":"任务内容27","progress":"70%","question":"遇到问题4"},         
11.         {"id":"008","task":"任务内容81","progress":"40%","question":"遇到问题3"},            
12.         {"id":"009","task":"任务内容69","progress":"20%","question":"遇到问题4"},            
13.         {"id":"010","task":"任务内容78","progress":"90%","question":"遇到问题3"}       
14.     ]                                                            
15. }