Kendo Grid部分列水平滚动_表格的列一部分横向滚动另外一部分固定
2014-09-12 09:19:21  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 18368
• 2

简介

很多时候、我们希望有很多列在 Kendo Grid 上面横向滚动、在这种情况下

有时需要固定一些列（没有受到水平滚动）为便于观看的数据

列固定功能包含在剑道UI的最新版本、如果我们使用的是 Kendo UI的旧版本

那么有没有内置的功能来固定水平滚动的列呢、这里有一个方法、使我们可以使用CSS和jQuery实现相同的效果

首先、我们必须划分 Grid 结构为2格、一个用于固定的列及其他的可滚动列

添加一些CSS的可冻结列 Grid、以便它们不能滚动

我们需要有一些JS的逻辑、这样的垂直滚动的非冷冻列、自动固定列也将滚动

这里是相同的代码

HTML 代码

<div id="divFreezableEmployeeDetails"></div>
<div id="divScollableEmployeeDetails"></div>

Jquery 代码

var freezedGridId = $("#divFreezableEmployeeDetails");
var ScollableGridId = $("#divScollableEmployeeDetails");

//Initialize and populate the grids
GetDatasource( function (dataSource) {
	if (dataSource != null) {
		InitializeFreezableEmployeeDetails(freezedGridId, 
			dataSource );
		InitializeScollableEmployeeDetails(ScollableGridId , 
			dataSource );            
	}
});

//initialize the FreezedEmployeeDetails
function InitializeFreezableEmployeeDetails(gridId, source) {
	gridId.kendoGrid({
		dataSource: {
			data: source,
			schema: {
				model: {
					fields:
					{
						EmployeeId: { type: "int" },
						Name: { type: "string" }
					}
				}
			}
		},
		height: 700,
		sortable: true,
		resizable: true,
		scrollable: true,
		width: 1700,
		columns: [
			{
				title:"EmployeeId"
				field: "EmployeeId"
				width: 90
			},
			{
				title:"Name"
				field: "Name"
				width: 90
			}
		]
	}
});

//initialize the ScollableEmployeeDetails
function InitializeScollableEmployeeDetails(gridId, source) {
	gridId.kendoGrid({
		dataSource: {
			data: source,
			schema: {
				model: {
					fields:
					{
						Age: { type: "int" },
						Address: { type: "string" },

						Exp:{type:"string"},

						Dob:{type:"string"},

						Skill:{type:"string"}
					}
				}
			}
		},
		height: 700,
		sortable: true,
		resizable: true,
		scrollable: true,
		width: 1700,
		columns: [
			{
				title:"Age"
				field: "Age"
				width: 90
			},
			{
				title:"Address"
				field: "Address"
				width: 90
			},
		    {
				title:"Exp"
				field: "Exp"
				width: 90
			},
			{
				title:"Dob"
				field: "Dob"
				width: 90
			},
			{
				title:"Skill"
				field: "Skill"
				width: 90
			},
		]
	}
});

//Make the Freezable grid vertically scrollable on 
//vertical scrolling of Scrollable grid
$("#divScollableEmployeeDetails .k-grid-content")
		.on("scroll", function(e) {
	$("#divFreezableEmployeeDetails .k-grid-content")
		.scrollTop($(e.currentTarget).scrollTop());
});

CSS 代码

#divFreezableEmployeeDetails{
  width: 100px;
  border-right: none;
  float:left
}
#divScollableEmployeeDetails {
  width: 200px;
  float:left
}
#divFreezableEmployeeDetails .k-grid-header {
  padding-right: 0 !important;
}
#divFreezableEmployeeDetails .k-grid-content{
  overflow-x: scroll;
  overflow-y: hidden;
}

好了、这样就可以是实现一部分列滚动、一部分列固定了

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛