前端easyui设置列表鼠标悬浮显示全部内容

项目场景:

前端easyui设置列表鼠标悬浮显示全部内容


问题描述

{field:'',formatter:formatCellTooltip},

function formatCellTooltip(value){
	var newValue =value.replaceAll("<br />","");
	return "<div title='" + newValue + "' class='textEllipsis datagrid-cell datagrid-cell-c1-luggageRemark'>"+newValue+"</div>";

}

/* 文本超长自动显示省略号 */
		.textEllipsis{
			overflow: hidden;/*不允许滚动条*/
			white-space: nowrap;/*不允许文本换行*/
			text-overflow: ellipsis;/*文本超长显示省略号*/
		}
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用前端EasyUI框架,你可以通过点击文件夹,在同一个页面中显示文件夹的内容。下面是一个示例: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/themes/icon.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.5/jquery.easyui.min.js"></script> </head> <body> <ul id="tree"></ul> <div id="content"></div> <script> $(function() { // 定义文件夹结构的数据 var folderStructure = [ { id: 1, text: 'Root', children: [ { id: 2, text: 'Folder 1', children: [ { id: 3, text: 'File 1' }, { id: 4, text: 'File 2' } ] }, { id: 5, text: 'Folder 2', children: [ { id: 6, text: 'File 3' }, { id: 7, text: 'File 4' } ] } ] } ]; // 初始化树形结构 $('#tree').tree({ data: folderStructure, onClick: function(node) { // 点击事件处理函数 if (node.children) { // 如果是文件夹,则展开或折叠 $('#tree').tree(node.state === 'closed' ? 'expand' : 'collapse', node.target); } else { // 如果是文件,则显示文件内容 $('#content').text('Content of ' + node.text); } } }); }); </script> </body> </html> ``` 在上面的示例中,我们使用EasyUI的`tree`组件来展示文件夹结构。当用户点击文件夹节点时,会触发`onClick`事件处理函数。如果点击的节点有子节点(即是文件夹),则展开或折叠该节点;如果点击的节点没有子节点(即是文件),则在`#content`元素中显示文件内容。 你可以根据自己的需求修改文件夹结构的数据和展示逻辑。希望对你有所帮助!如有任何疑问,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值