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

最新推荐文章于 2021-01-19 09:34:45 发布

硬骨头_children

最新推荐文章于 2021-01-19 09:34:45 发布

阅读量3.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhangze2/article/details/16930907

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

冻结列实现的效果就像是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>