EasyUI-datagrid属性formatter

mlxlong

于 2016-11-25 09:44:46 发布

阅读量6k

点赞数

分类专栏： EasyUI入门

本文链接：https://blog.youkuaiyun.com/u014488113/article/details/53330923

版权

EasyUI入门专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用 EasyUI 框架对数据表格进行高级定制的方法，包括单元格的数据格式化、鼠标提示以及样式的设置。通过具体代码示例展示了如何实现这些功能，帮助开发者更好地理解和应用。

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

一、单元格数据格式化

代码示例

$('#dg').datagrid({

	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

二、单元格鼠标提示

代码示例

function markFormatter(value,row,index){
	if(value!=undefined){
		var text=value;
		if(value.length>=15){
			text=value.substring(0,14)+'...';
		}
		return "<span style='display:block;width:100%;cursor:pointer;' title='" + value + "'>" + text + "<span>";
	}
}

三、单元格样式

代码示例

$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});