easyui datagrid 与 progressbar相结合

SinceJune

于 2014-08-18 11:10:49 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：心得积累文章标签： easyui datagrid

本文链接：https://blog.youkuaiyun.com/SinceJune/article/details/38657067

这篇博客展示了如何在EasyUI的Datagrid中集成ProgressBar，实现数据加载时的进度条展示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        function demobar(value, rowData, rowIndex) {
	var demostr = "<div class='easyui-progressbar progressbar easyui-fluid' style='width:398px'><div class='progressbar-text' style='width:398px;'>"+ value + "</div><div class='progressbar-value'  style='width:"+ value + ";background-color:#CCC'> </div></div>";
	return demostr;
	
}
$(function() {
	$('#demo').datagrid( {
		url : 'datagrid_progressbar.json',
		columns : [ [ {
			field : 'task',
			title : '任务',
		}, {
			field : 'progress',
			title : '进度',
			formatter : demobar
		} ] ]
	});
});
</script>

json文件内容：