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 編碼）