easyUI中datagrid文本内容较多如何换行

最新推荐文章于 2023-06-15 11:16:43 发布

诸琼华

最新推荐文章于 2023-06-15 11:16:43 发布

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：日常笔记文章标签： datagrid换行 easyUI使用 easyUI换行

本文链接：https://blog.youkuaiyun.com/laomadawei/article/details/80235037

日常笔记专栏收录该内容

26 篇文章

订阅专栏

在使用easyUI的datagrid组件展示详细信息时，若文本内容过多导致无法完全显示，可以采用设置formatter属性实现文本换行。常规的nowrap：false方法可能无效，通过添加formatter并结合代码调整，能有效解决这个问题。

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

做项目使用easyUI组建的datagrid组件的时候经常会遇到需要展示详细文本信息的情况，这个时候表格里面有可能一行难以放下所有文本内容，这就必须要换行才可以，网上有很多提到使用属性：nowrap：false，我尝试了几次，然并卵。后来发现，这里只需要添加一个fomatter格式就可以了，具体代码如下（附部分其他代码，方便理解和使用）

$('#pg').datagrid({    
	    url:'${ctx}/product?md=findByPage',    
	    columns:[[    
	        {field:'id',title:'id',width:60, align:"center"}, 
	        {field:'desc',title:'描述',width:100,nowrap:true,
	        	formatter: function (value,row,index) {
	        	    return '<div style="width=100px;word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+value+'</div>';
	        	}
	        },    //这个函数用来解决换行问题，直接使用这个函数就可以了
	        {field:'price',title:'价格',width:30, align:"center"}, 
	        {field:'hot',title:'是否热门',width:10, align:"center",
	        	formatter: function(value,row,index){
					if (value==1){
						return "是";
					}else{
						
						return "否";
					} 
	       	 	}, 
	        },
	        {field:'image',title:'图片',width:60,align:"center",
	        	formatter: function(value,row,index){				
						return "<img src='${ctx}/"+value+"' width='60px'>";				 
				}
	        }
	    ]],
	    fit:true,
	    fitColumns:true,
	    pagination:true
	});