EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

EasyUI Datagrid 鼠标悬停显示单元格内容

第一种方式：
1.js 定义函数
  <script type="text/javascript">   
        //格式化单元格提示信息  
        function formatCellTooltip(value){  
            return "<span title='" + value + "'>" + value + "</span>";  
        }  
  </script>  
2、调用函数

 <table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
    　　<tr>
　　　　　　<th data-options="field:'itemid',width:80,halign:'center',formatter:formatCellTooltip">Item ID</th>
    　　</tr>
    </thead>
 </table>

源码：jquery-easyui-1.3.6.zip    例子是：jquery-easyui-1.3.6\demo\datagrid\formatter.html

 第二种方式：
1.html
<table id="dg">
</table>

2.js
$('#dg').datagrid({
            fitColumns: true,
            nowrap: true,
            striped: true,
            rownumbers: true,
            pagination: true,
            singleSelect: true,
            columns: [[
            { field: "itemid", title: 'Item ID', width:80,halign:'center', formatter: function (value) {
                return "<span title='" + value + "'>" + value + "</span>";
            }
            }]]
       });

源码：jquery-easyui-1.3.6.zip 例子是：jquery-easyui-1.3.6\demo\datagrid\formatter2.html

其他方式：

 

1.例如，扩展 jQuery EasyUI tips

 

js 文件 Jquery.easyui.tooltip.js：

(function ($) {
    function init(target) {
        var opt = $.data(target, "tips").options;
        var tips = $(".easyui-tips-hover");
        if (tips.length == 0) {
            tips = $("<div/>").css({
                "position": "absolute",
                "border-radius": "5px",
                "-webkit-border-radius": "5px",
                "-moz-border-radius": "5px",
                "padding": "5px",
                "background": "#fff",
                "display": "none",
                "border": "1px solid gray"
            }).hide().addClass("easyui-tips-hover").addClass(opt.cls);
        }
opt.content = (opt.content || $(target).attr("tooltip"));

tips.appendTo("body");
$(target).css("color", opt.wrapColor);
$(target).hover(function () {

tips.html(opt.content);

var offset = $(target).offset();

//var outerWidth = tips.outerWidth();

//            if (outerWidth > 200) {

//                tips.width(200);

//            }

var scrollTop = $(document).scrollTop();

var tipsHeight = tips.outerHeight();

var outerWidth = tips.outerWidth();
var targetHeight = $(target).outerHeight();

var top = offset.top - tipsHeight;

var left = offset.left;
if ((offset.top - scrollTop) < top || top < 100) {

top = offset.top + targetHeight;

}

var bodyClienWidth = $("body")[0].clientWidth;

if ((bodyClienWidth - left) < outerWidth) {

left = bodyClienWidth - outerWidth;

}

tips.css({ top: top, left: left }).show();

}, function () {

tips.hide().width("auto");

});

}
$.fn.tips = function (options, params) {

if (typeof options === 'string') {

return $(this).tips.methods[options].call(this, params);

}
options = options || {};

return this.each(function () {

var opt = $.data(this, "tips");

if (opt) {

$.extend(opt.options, options);

} else {

$.data(this, "tips", {

options: $.extend({}, $.fn.tips.defaults, options)

});

init(this);

}

});

};
$.fn.tips.defaults = {

cls: "",

content: null,

wrapColor: "blue"

};
if ($.parser) {

$.parser.plugins.push('tips')

}

})(jQuery);

 

使用:

在jquery 的datagrid的onLoadSuccess方法中

html:

<table id="dg"></table>

 

js :

$(function () {
            var _grid = $('#dg').datagrid({
                url: 'products.json',
                columns: [[
            { field: 'productid', title: 'productid', width: 100 },
            { field: 'productname', title: 'productname', width: 100 },
            { field: 'price', title: 'Price', width: 100, align: 'right' }
            ]],
                onLoadSuccess: function () {
var tableTd = $('div.datagrid-body td[field="productname"]'); //productname是列名

                    tableTd.each(function () {

var $this = $(this);

var index = $this.parent('tr').attr('datagrid-row-index');

var rows = _grid.datagrid('getRows');

var currentRow = rows[index];

var content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.productname + '</div>'; //productname是列名

$this.tips({ content: content, wrapColor: 'black' });

});

}

});

});

源码：jquery-easyui-1.3.6.zip    例子是：jquery-easyui-1.3.6\demo\datagrid\tips.html

2.当然还有各种jQuery tips插件

 

分类: easyUI

好文要顶 关注我 收藏该文

直钩钓鱼
关注 - 4
粉丝 - 7

+加关注

1

0

« 上一篇：LINQ to Entities 中的查询
» 下一篇：去掉字符串中的非数字字符

posted @ 2015-11-19 09:45 直钩钓鱼 阅读(5703) 评论(0) 编辑 收藏