[EASYUI] 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); }}};
大概就是如此,须要源代码的能够留下邮箱~不会的地方也能够留下问题,争取在线解决!!!