解决ligerUI在设置的checkbox后因某些列内容过大导致的样式错位问题

解决方式一:

设置内容过长的列的宽度,直到能显示完整而不换行。

例如:原来width:80导致内容换行,我们增大列宽度设置width:150


解决方式二:

在grid的onAfterShowData中添加函数

var grid=null;

grid = $("#maingrid").ligerGrid({

   ...,

   onAfterShowData: function (grid){
          if(null != $(".l-grid1 .l-grid-header-inner .l-grid-header-table .l-grid-hd-row .l-grid-hd-cell-checkbox").html()){
              if(navigator.userAgent.indexOf("MSIE")>0){
                //ie浏览器
                  $("tr[id^=maingrid|2|]").each(function(i,v){
                      //获取l-grid2数据展示行的绝对高度
                      var idstr=$(this).attr("id");
                      var height=document.getElementById(idstr).offsetHeight;
                       //为什么不减一高度还是错位?
                      if(i>0)height=height-1;
                      var idstr=$(this).attr("id");
                      //生成chekbox对应行的id
                      var chkidstr=idstr.replace("|2|","\\|1\\|");
                      //设置tr高度
                      $("#"+chkidstr).attr("style","height:"+height+"px;");
                      //设置div高度
                      //$("#"+chkidstr+">td>div").attr("style","height:"+height+"px;");
                      var marginTop = (height-15)/2;
                      $("#"+chkidstr+">td>div>span").attr("style","margin-top: "+marginTop+"px;");
                  });
              }else{
                  $("tr[id^=maingrid\\|2\\|]").each(function(i,v){
                      var idstr=$(this).attr("id");
                      var height=document.getElementById(idstr).offsetHeight;
                      var chkidstr=idstr.replace("|2|","\\|1\\|");
                      $("#"+chkidstr).attr("style","height:"+height+"px;");
                      //计算marginTop的高度
                      var marginTop = (height-15)/2;
                      $("#"+chkidstr+">td>div>span").attr("style","margin-top: "+marginTop+"px;");
                  });
              }
          }
      }

});


该例子在ie8中显示正常,在ie7中存在误差,修正方式
onAfterShowData: function (grid){
                if(null != $(".l-grid1 .l-grid-header-inner .l-grid-header-table .l-grid-hd-row .l-grid-hd-cell-checkbox").html()){
                    $("tr[id^=grid\\|2\\|]").each(function(i,v){
                        //获取grid中数据显示部分的每一行的ID
                        var idstr=$(this).attr("id");
                        //每行实际行高,使用jquery方式获取不到
                        var height=document.getElementById(idstr).offsetHeight;
                        //替换求出checkbox所在hang的id
                        var chkidstr=idstr.replace("|2|","\\|1\\|");
                        //设置grid中checkbox行高
                        $("#"+chkidstr).attr("style","height:"+height+"px;");
                        $("#"+chkidstr+">td>div").attr("style","align: center;");
                        //设置后的值
                        var chkheight=$("#"+chkidstr).height();
                        //计算误差
                        var posfix=chkheight-height;
                        //修正后的高度
                        if(posfix>0) $("#"+chkidstr).attr("style","height:"+(height-posfix)+"px;");
                    });
                }
            }


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值