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