EasyUI-datagrid列显示Icon

最新推荐文章于 2021-04-01 18:02:52 发布

mlxlong

最新推荐文章于 2021-04-01 18:02:52 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI入门文章标签： datagrid显示按钮 datagrid列显示图片

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

EasyUI入门专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了如何在EasyUI的datagrid组件中添加和显示图标，包括按钮和图片，提供了具体的实现步骤和代码示例，帮助开发者增强datagrid列的展示效果。

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

<table id="dg_function" class="easyui-datagrid" data-options="
		  fit:true,
		  rownumbers:true,
		  onLoadSuccess:initIcon">
		    <thead>   
		        <tr>   
		        	<th data-options="field:'ck',checkbox:true"></th>
		        	<th data-options="field:'name',width:100">名称</th>
		        	<th data-options="field:'icons',width:100, formatter:showImg">图标</th>
		        	<th data-options="field:'code',width:100, hidden:true">编码</th>
		        	<th data-options="field:'type',width:100, hidden:true">类型</th> 
		        </tr>   
		    </thead>   
		  </table>

function showImg (value, row, index){
	if(row.code){
		return "<a id='"+row.code+"'></a>";
	}
}
function initIcon(data){
	if(data){
		var rows=data.rows;
		for(var i=0; i<rows.length; i++){
			var code=rows[i].code;
			var bt = $("#" + code);
			bt.linkbutton({
				width:90,
				plain:true,
				iconCls:code
			});
		}
	}
}