easyui datagrid 添加 tooltip

标签：

步骤：

1. 引入 tooltip 扩展文件，基于easyui1.3.3，参考这里；

2. 设置 easyui 的 data-options 属性，增加事件 onLoadSuccess；

3. 增加 onLoadSuccess 的处理方法，在 datagrid 数据加载完成后初始化 tooltip。

参考代码：

... 略 ...

<script type="text/javascript" src="__MJS__/jquery.easyui.min.js"></script>
<script type="text/javascript" src="__MJS__/jquery.datagrid.extend.js"></script>

... 略 ...

<table id="dg" idField="id" class="easyui-datagrid" url="__URL__/{$Api_Infor.url_prefix}_list_data{$Api_Infor.url_parms}" toolbar="#toolbar"  pagination="true" pageSize="10"   rownumbers="true"   remoteSort="true" ctrlSelect="true" data-options="onLoadSuccess: onLoadSuccess">

</table><!-- end 表格数据部分 -->
 
 ... 略 ...
 
 <script>
     // grid数据加载成功后
    function onLoadSuccess(data) {

        // 初始化 tooltip
        $(‘#dg‘).datagrid(‘doCellTip‘, {
            onlyShowInterrupt: true,
            position: ‘bottom‘,
            maxWidth: ‘450px‘,
            // specialShowFields: [{field:‘status‘,showField:‘statusDesc‘}],
            tipStyler:{
                backgroundColor:‘#FFFFCC‘,
                color: ‘#333‘,
                // borderColor:‘#ff0000‘,
                boxShadow:‘1px 1px 3px #eee‘,
                wordBreak: ‘break-all‘
            }
        });
    }
  </script>

效果如下：

扩展下载：

http://www.easyui.info/easyui/extends/jquery.datagrid.extend.js （如果浏览器打开可能乱码，可以先转换成 utf8 编码）

easyui datagrid 添加 tooltip

标签：

原文地址：http://my.oschina.net/u/2276973/blog/507806