今天遇到个开发中遇到个问题:如何在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
分享到:
相关推荐
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展
datagrid添加tooltip及超出宽度添加省略号
在这个场景中,"DataGrid 中加入图标"是一个重要的知识点,它涉及到如何在DataGrid的单元格或者行中添加图标,以增强数据的可视化效果。以下是对这个主题的详细解释。 首先,DataGrid通常用于展示结构化的数据,如...
在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...
在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...
在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...
标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...
在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...
根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...
在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...
4. **自定义加载更多功能**: 如果需要自定义加载更多数据的行为,例如添加一个“加载更多”按钮,可以在按钮的点击事件中调用DataGrid的`reload`方法,传递新的页码和每页大小。 ```html ()">加载更多 function ...
本文介绍了如何在 jQuery Easyui DataGrid 中实现点击某个单元格后,该单元格即可进入编辑状态,当用户编辑完数据并把焦点移开该单元格时,所编辑的数据自动保存的功能。 知识点一:DataGrid 初始化与配置 要使用 ...
easyUI datagrid 自动调整行号大小
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...
在IT行业中,datagrid组件是常用于展示数据列表的控件,尤其在开发桌面应用程序或Web应用时。在标题“datagrid单元格上点击弹出窗口(官网例子)”中提到的功能,是实现用户在datagrid的某一单元格上点击时,能够弹...