解决ligerUI在设置的checkbox后因某些列内容过大导致的样式错位问题
2012-12-17 17:31
531 查看
解决方式一:
设置内容过长的列的宽度,直到能显示完整而不换行。
例如:原来width:80导致内容换行,我们增大列宽度设置width:150
解决方式二:
该例子在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;");
});
}
}
设置内容过长的列的宽度,直到能显示完整而不换行。
例如:原来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;");
});
}
}
相关文章推荐
- Android 解决某些机型CheckBox自定义按钮图片时发生的错位问题
- 网页内容设置有用的meta设置解决网页内容不能适应某些浏览器宽度的问题
- Thinkphp 3.2 显示html内容的时候 多了斜杠 导致样式和图片不能正常显示问题解决
- ecmall2.3.0 前后台样式等无效,导致前台页面显示不正常问题解决
- div错位/解决IE6、IE7、IE8样式不兼容问题
- DEDE内容页图片过大导致布局混乱的解决方法
- 关于表格高度在移动端某些应用内高度设置为百分比后不能被压缩问题的解决
- android listview 异步加载图片并防止错位及解决ListView滚动后内容重复的问题
- fiddler代理设置问题导致出现“The system proxy was changed,click to reenable fiddler capture”解决办法
- SQLServer 2005&08镜像导致日志文件LDF过大的问题解决
- 解决Tomcat catalina.out 不断成长导致档案过大的问题
- 关于网上解决Android4.x系统设置字体大小导致应用布局混乱引起的问题
- PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式
- 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法
- Android编程中TextView宽度过大导致Drawable无法居中问题解决方法
- 改进动态设置query cache导致额外锁开销的问题分析及解决方法-mysql 5.5 以上版本
- 设置webconfig 解决asp.net上传文件过大问题
- 巧妙解决js内容调用导致页面加载慢的问题
- DB2问题诊断与解决: 一个由于历史文件过大,导致LOAD慢的问题
- 关于微信浏览器 设置遮罩层后 onverflow:hidden属性不起作用,仍然导致下层内容可滚动的解决办法