分享

easyUI中 datagrid 一列字比较多时,出现省略符号

 WindySky 2017-05-15


当数据比较多为,出现省略符号, 需修改easyui样式 (样式必须在easyui自带的后面,重写)


 <style type="text/css">
            .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber
            {
                text-overflow: ellipsis;
            }
        </style>




为了出现鼠标放入的提示框, 需要修改js文件,文件夹中的js


js修改后的文件

第一种方法 


datagrid 中的使用   <th data-options="field:'Remark2',width:100,nytitle:true">备注2</th>




第二种方法 


自己写js : (1)写一个div  
   <div id="titie" style="position: absolute; top: 500px; width: auto; background-color: #E7F3FF; display: none; z-index: 100000; border: 1px solid #e1e3e4; padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;">
    </div>


(2) 给数据列中加一个span标签,标签里添加 鼠标进入和移除事件
  <th data-options="field:'Remark3',width:100,formatter:rowformaterdir">备注3</th>




 function rowformaterdir(val, row) {
            if (val == null || val == 0)
                return '';
            else (val != 0 || val == 0)
            return "<span       onmouseover=\"CreateDiv(' " + val + "')\" onmouseout=\"RemoveDiv('" + val + "')\">" + val + "</span>";
        }


        function CreateDiv(val) {
            var e = window.event
            // //这里可得到鼠标X坐标
            var pointX = e.pageX;
            //这里可以得到鼠标Y坐标
            var pointY = e.pageY;
           
            $("#titie").css("top", pointY + 20);
            $("#titie").css("margin-left", pointX);
            $("#titie").html("<span>" + val + "</span>");
            $("#titie").show();
        }


        function RemoveDiv(val) {


            $("#titie").hide();

        }


     




    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约