[EASYUI] tooltip的扩展使用

创建一个添加tooltip的函数：<span > </span>//添加tooltip

function addTooltip(tooltipContentStr,tootipId){

//添加相应的tooltip

$('#'+tootipId).tooltip({

position: 'bottom',

content: tooltipContentStr,

onShow: function(){

$(this).tooltip('tip').css({

backgroundColor: 'white',

borderColor: '#97CBFF'

});

扫描二维码关注公众号，回复： 11207422 查看本文章

}

});

}

如果你需要将全部的列都用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+'" >' + 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);

}}};

------------------------------------------------------------------------------------------------------

 $('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){
          var index = parseInt($(this).attr('data-p1'));
          $(this).tooltip({
              content: $('<div></div>'),
              onUpdate: function(cc){
                  var row = $('#dg').datagrid('getRows')[index];
                  var content = '<div>content</div><ul>';
                  content += '<li>name: '+row.A+'</li>';
                 content += '<li>B: '+row.B+'</li>';
                 content += '<li>C: '+row.C+'</li>';
                 content += '<li>D: '+row.D+'</li>';
                 content += '</ul>';
                cc.panel({
                     width:200,
                     content:content
                 });
             },
            position:'right'
         });
     });

[EASYUI] tooltip的扩展使用

猜你喜欢