您的位置:首页 > 产品设计 > UI/UE

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

2012-12-17 17:31 531 查看
解决方式一:

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

例如:原来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;");

});

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐