`
weichao202
  • 浏览: 96351 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

如何在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"}     
	]                                                          
}   



  • 大小: 12.8 KB
1
1
分享到:
评论
3 楼 getec 2015-09-16  
我把您的代码粘进去,也没出来效果。
请问,代码是完整的么
2 楼 烽邪fen9ye 2014-06-05  
edatagrid函数中列包含formatter的话无法增删改
1 楼 snlilei 2013-05-23  
为什么我的页面上只显示文字百分百,没有显示进度条?

相关推荐

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    easyui datagrid单元格tip实现

    在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了

    easyUI datagrid合并单元格(支持子对象的属性)

    easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    Easyui DataGrid单元格编辑_扩展代码

    详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展

    easyui datagrid tip 超出宽度省略

    datagrid添加tooltip及超出宽度添加省略号

    DataGrid 中加入图标

    在这个场景中,"DataGrid 中加入图标"是一个重要的知识点,它涉及到如何在DataGrid的单元格或者行中添加图标,以增强数据的可视化效果。以下是对这个主题的详细解释。 首先,DataGrid通常用于展示结构化的数据,如...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    easyui datagrid在编辑状态下更新列的值

    在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...

    easyui datagrid 增加鼠标悬停弹窗事件

    在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...

    easyui datagrid 右冻结

    标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

    JS EasyUI DataGrid动态加载数据

    4. **自定义加载更多功能**: 如果需要自定义加载更多数据的行为,例如添加一个“加载更多”按钮,可以在按钮的点击事件中调用DataGrid的`reload`方法,传递新的页码和每页大小。 ```html ()"&gt;加载更多 function ...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    本文介绍了如何在 jQuery Easyui DataGrid 中实现点击某个单元格后,该单元格即可进入编辑状态,当用户编辑完数据并把焦点移开该单元格时,所编辑的数据自动保存的功能。 知识点一:DataGrid 初始化与配置 要使用 ...

    easyUI datagrid rownumber自适应宽度扩展JS

    easyUI datagrid 自动调整行号大小

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    datagrid单元格上点击弹出窗口(官网例子)

    在IT行业中,datagrid组件是常用于展示数据列表的控件,尤其在开发桌面应用程序或Web应用时。在标题“datagrid单元格上点击弹出窗口(官网例子)”中提到的功能,是实现用户在datagrid的某一单元格上点击时,能够弹...

Global site tag (gtag.js) - Google Analytics