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

kendoUI组件扩展3--冻结列（待完善）

2013-11-25 00:00 218 查看
冻结列实现的效果就像是Excle的冻结空格，网上主要有两种实现：拆分和样式；我用的是后者。

参考资料：

遇到的问题：

1、IE与FF兼容问题（td不兼容FF，换Div层）

        1）、express()在IE8.0及以上版本中不适用

2、封装

3、样式问题：

1）、冻结列奇偶行颜色、单元格交叉部分样式

2）、KendoUI列表中DIv层过多、表头和

3）jQuery选中需要冻结的列

一 、CSS样式

<style type="text/css">
.FixedTableDiv/*滚动条所属div层样式*/
{
overflow: hidden;
position: relative;
}
.FixedTdIE /*固定列的样式*/
{
position: relative;
/*节点所属层次： <tr>-<tbody>-<table>-<k-grid-header-wrap>*/
left: expression(this.parentNode.parentNode.parentNode.parentNode.scrollLeft);
z-index: 1800;
/* 	border-right:1px solid #000; */
/* 	border-left:1px solid #000; */
}
.FixedTd02 {
border-right:none;
}
.FixedDataColumnHead/*火狐*/
{
position: relative;
display:block;
z-index: 1800;
background: url('http://localhost:8080/hrm/common/css/../images/lystyle/k-header3.png');
/* 	border-right:1px solid #000; */
/* 	border-left:1px solid #000; */
}
.FixedDataColumn/*火狐*/
{
position: relative;
display:block;
z-index: 1700;
/*   	background: url('http://localhost:8080/hrm/common/css/../images/lystyle/k-header3.png');     */
background: #FFFFFF;
height: 24px;
/* 	border-right:1px solid #000; */
/* 	border-left:1px solid #000; */
}
.FixedEvenDataColumn/*火狐偶行*/
{
position: relative;
display:block;
z-index: 1700;
/*  	background: #EAF4F9;   */
height: 24px;
}
.LockCross /*行列交叉处样式*/
{
z-index:3;
}
.tbLock /*设置单元格间隙的样式*/
{
border-collapse:collapse;
}
#data_import_social_security_unemploy_medical_div .k-grid-content td {
border-right: 0 solid #F2F2F2; /* 减小到0 */
padding: 0; /*减小到0 */
text-align: left;
}
#data_import_social_security_unemploy_medical_div .k-grid-header td {
border-right: 0 solid #F2F2F2; /* 减小到0 */
padding: 0; /*减小到0 */
text-align: left;
}
</style>


二、封装js函数

(function($){
$.LYUtils = function(){};
$.LYUtils.TableFixed = TableFixed;
var browserIs;	//浏览器
var explorer = window.navigator.userAgent ;
if(explorer.indexOf("MSIE") >= 0){	// 如果是IE
browserIs = "IE";
}
if(explorer.indexOf("Firefox") >= 0){// 如果是FiroFox火狐
browserIs = "Firefox";
}
function TableFixed(divId,headOrContent,tableId,startColumn,endColumn){

if(tableId){

if(browserIs=='IE'){
if(endColumn>0){		// 列冻结
var rowNum=$('#'+tableId+' tr').length;	// 行数
var tr;
$('#'+tableId +' tr').each(function(index,elem){	//添加列锁定
if(headOrContent=='head'){
for(var i=0; i<endColumn; i++){
$(this).find("td").eq(i).addClass("FixedHeadTd");
}
}else{
for(var i=0; i<endColumn; i++){
$(this).find("td").eq(i).addClass("FixedContentTd");
}
}

});
/* for(var r=(lockRow);r<rowNum;++r){
tr=$('#'+tableId).find('tr:eq('+r+')');
for(var c=0;c<endColumn;++c){
tr.find('td:eq('+c+')').addClass(('FixedTd');
//tr.find('td:eq('+c+')').className('FixedTd');
}
} */
}
}else{
$('#'+tableId).addClass('tbLock');
//alert(divId);
if(endColumn>0){		// 列冻结
$('#'+tableId +' tr').each(function(index,elem){

for(var i=0; i<endColumn; i++){
$(this).find("td").eq(i).wrapInner(function() {
return '<div class="FixedDataColumn FixedTd02" />';
});// 动态用<div>结构包裹<td>下的内容
$(this).find("tr").eq(i).wrapInner(function() {
return '<div class="FixedDataColumn FixedTd02" />';
});// 动态用<div>结构包裹<tr>下的内容
//$(this).find("td").eq(i).addClass("FixedDataColumn");
//$(this).find("td").eq(i).children().wrap("<div class='FixedTd'></div>");
//$(this).find("div").eq(i).addClass("FixedTd LockCross");
}
});
$(''+divId).scroll(function(){		//
$('.FixedDataColumn').css('left',$(this).attr('scrollLeft'));
/*for(var i=0; i<endColumn; i++){
$(this).find("td").eq(i).addClass("LockCross");
}*/
});
}
}

//box.live('scroll',func);
}else{
alert('没有找到对应的table元素，请确保table属性正确性！');
}
}
})(jQuery);


三、html/jsp页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>完美兼容冻结表格列演示 </title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<link rel="stylesheet" href="fixedTable_IE.css"  />
<script type="text/javascript"  src="fixedTable.js" ></script>
<script type="text/javascript" >
$(function() {
$.LYUtils.TableFixed('.FixedTableDiv','Content','data_import_social_security_unemploy_medical_grid',0,3);// 参数：（滚动条所属Div、冻结表格Id、冻结起始行、结束行）
$.LYUtils.TableFixed('.FixedTableDiv','head','data_import_social_security_unemploy_medical_head',0,3);
});
</script>

</head>
<body>
<div class="leftTest">

</div>
<div  id="unemploy_medical_grid_outer" class="FixedTableDiv" style="width: 1000px; height: 200px">
<div class="k-grid k-widget k-secondary ">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table id="data_import_social_security_unemploy_medical_head" border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr >
<td   >
1年度
</td>
<td  >
2月份
</td>
<td  >
3职工号
</td>
<td  >
4姓名
</td>
<td >
5部门
</td>
<td >
6人员类别
</td>
<td >
7校内职务
</td>
<td >
8职务分数
</td>
<td >
9聘任岗位
</td>
<td >
10岗位分数
</td>
</tr>
</table>
</div>
</div>

<div class="k-grid-content">
<table id='data_import_social_security_unemploy_medical_grid' border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td >
col1
</td>
<td >
col2
</td>
<td >
col3
</td>
<td >
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>




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