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

在使用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
	}); 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值