zl程序教程

您现在的位置是:首页 >  前端

当前栏目

[EASYUI] tooltip的扩展使用

EasyUI扩展 tooltip 使用
2023-09-27 14:25:13 时间


在讲easyui中的tooltip功能之前,我首先要将的非常重要是的仅仅有在easyui1.3.3版本号(包含1.3.3)后才有的,所以还在用1.3.3之前的版本号而且正在努力寻找tooltip功能而且实现非常绚丽的提示效果的小伙伴,我仅仅想说三个字——“逗我呢”

  讲完使用范围。本来是要開始解说一些使用方法,只是杰哥我就不再次多啰嗦了,官网上有,地址例如以下:千万表要点我哦

   废话不多说,首先就选要去创建一个加入tooltip的函数:

<span style="white-space:pre">	</span>//加入tooltip 
			function addTooltip(tooltipContentStr,tootipId){
				  //加入对应的tooltip   
				  $('#'+tootipId).tooltip({  
				     position: 'bottom',  
				     content: tooltipContentStr,  
				     onShow: function(){  
				     	$(this).tooltip('tip').css({
				     		backgroundColor: 'white',
				      		borderColor: '#97CBFF'  
						});
				     }     
				  }); 
			}

假设你须要将所有的列都用tooltip,那直接在上上面tootipId那处直接改动成datagrid的ID就可以,更简单的网上方法好多。太没技术含量我就不多讲了。

      我将的是你须要那列出现tooltip。那列就出现。详细思路例如以下:

1)将须要出现tooltip的那列看作是一个操作列,则须要在初始化dataGrid的时候加入

    <th field="DCatRemark" formatter='remarkFormater' width="200" sortable="true" align="center">类型描写叙述</th>

我以标签的形式写出,你也能够用js写,都一样的效果。

2)写完后接下俩就写该操作列相应的函数。

// 设置类型描写叙述的信息
			function remarkFormater(value,row,index){
				 if(value&&value.length>15) {
					var DCatRemark=value.substring(0,15)+"...";
					return '<div id="DCatRemark-'+index+'" style="width:auto;">' + DCatRemark + '</div>';
				}else{
					return value;
				}
				
			}
3)接下来就是最重要的步骤了。一般直接运行这些代码无法显示出预定的tooltip效果。

动态产生datagrid后,对tooltop未又一次渲染,于是用$.parse又一次绚烂,但还是得不到预期的效果。须要在datagrid的onLoadSuccess事件中产生tooltip,例如以下:

onLoadSuccess : function(data1) {
						for ( var i = 0; i < data1.rows.length; i++) {
							if (data1.rows[i].DCatRemark!= undefined) {
								
								var reason = data1.rows[i].DCatRemark;
							    toolReason = "<tr><td>类型描写叙述:" + reason
										+ " </td></tr>";
							} 
							//拼写tooltip的内容 
							tooltipReason = "<table style='height:55px;width:165px;color:black'>"
									+ toolReason + "</table>";
							addTooltip(tooltipReason, 'DCatRemark-' + i);
							}}};

大概就是如此,须要源代码的能够留下邮箱~不会的地方也能够留下问题,争取在线解决!!!