87,955
社区成员
发帖
与我相关
我的任务
分享一个快速添加表格的滚动条问题
我在网上找了一个快速添加表格的js代码，但是这个滚动条不知道怎么搞。
一是不能用鼠标滚轮滚动；
二是滚动条能不能紧挨表格右边，而不是浏览器的最右边；
如果有更好的代码，还请提供，谢谢。
代码：
一是不能用鼠标滚轮滚动；
二是滚动条能不能紧挨表格右边，而不是浏览器的最右边；
如果有更好的代码，还请提供，谢谢。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
表格控件
</title>
<script language="javascript" type="text/javascript">
function Scrollbar() {
this.options = {
total: 0, //数据总数
pos: 0, //当前滚动位置
itemSize: 20, //单项尺寸
size: 200 //控件尺寸
};
}
Scrollbar.prototype = (function() {
function setOptions(options) {
for (var attr in options) {
this.options[attr] = options[attr];
}
Refresh(this);
}
function Refresh(_this) {
if (!_this.created) return;
//设置控件高度
_this.bar.style.height = _this.options.size + "px";
//设置内容高度
var ch = _this.options.total * _this.options.itemSize;
_this.content.style.height = ch + "px";
}
//获取滚动位置
function getPos() {
var top = this.bar.scrollTop;
var pos = parseInt(top / this.options.itemSize);
return pos;
}
//每页可展示的数据数量
function getPageItems() {
return this.options.size / this.options.itemSize;
}
//滚动事件响应
function OnScroll(_this) {
var pos = _this.getPos();
if (pos == _this.options.pos) return;
_this.options.pos = pos;
_this.onScroll(pos);
}
//滚动条创建
function CreateAt(dom) {
var _this = this;
var bar = document.createElement("div");
var content = document.createElement("div");
bar.appendChild(content);
bar.style.width = "19px";
bar.style.overflowY = "scroll";
bar.style.overflowX = "hidden";
if (bar.attachEvent) {
bar.attachEvent("onscroll", function() { OnScroll(_this); });
}
else {//firefox兼容
bar.addEventListener("scroll", function() { OnScroll(_this); }, false);
}
content.style.backgroundColor = "white";
content.style.width = "1px";
this.bar = bar;
this.content = content;
if (typeof (dom) == "string") {
dom = document.getElementById(dom);
}
dom.innerHTML = "";
dom.appendChild(this.bar);
this.created = true;
Refresh(this);
}
return {
setOptions: setOptions,
CreateAt: CreateAt,
getPos: getPos,
getPageItems: getPageItems,
onScroll: null //模拟滚动条事件
};
})();
var data = [];
//创建一万条示例数据
for (var i = 0; i < 10000; i++) {
var row = {
id: i,
text: "text" + i
};
data.push(row);
}
//创建滚动条
var scrbar = new Scrollbar();
window.onload = function() {
scrbar.CreateAt("divScroll");
scrbar.setOptions({
total: 10000,
size: 300
});
scrbar.onScroll = function(pos) {
ShowData(pos);
}
//获取模板
var items = scrbar.getPageItems();
var tpl = document.getElementById("trTpl");
tpl.parentNode.removeChild(tpl);
//仅创建所看到的几十行表格，所以自然快得多
var list = document.getElementById("tblList");
for (var i = 0; i < data.length && i < items; i++) {
var nr = tpl.cloneNode(true);
//从模板行复制新行
list.appendChild(nr);
}
ShowData(scrbar.getPos());
}
//根据滚动条，展示数据
function ShowData(pos) {
var n = scrbar.getPageItems();
var rows = document.getElementById("tblList").rows;
for (var i = 0; i < n; i++) {
var row = rows[i];
var item = data[i + pos];
row.cells["tdID"].innerHTML = item["id"];
row.cells["tdText"].innerHTML = item["text"];
}
}
</script>
</head>
<body>
<div id="divScroll" style="float:right">
</div>
<table border="1">
<!--行标题-->
<thead>
<tr>
<th>
ID
</th>
<th>
Text
</th>
</tr>
</thead>
<!--数据展示区-->
<tbody id="tblList">
<tr id="trTpl">
<td id="tdID">
</td>
<td id="tdText">
</td>
</tr>
</tbody>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
zzhao1979 2015-08-30
- 打赏
- 举报
还没有解决,求解决
孟子E章 2015-08-30
- 打赏
- 举报
这个还不错
http://www.sharejs.com/code/table/jquery.chromatable-1.3.0-sharejs.com/index.html#
zzhao1979 2015-08-30
- 打赏
- 举报
这个在表格上还是不能滚动
孟子E章 2015-08-30
- 打赏
- 举报
你可以这样改改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
表格控件
</title>
<script language="javascript" type="text/javascript">
function Scrollbar() {
this.options = {
total: 0, //数据总数
pos: 0, //当前滚动位置
itemSize: 28, //单项尺寸
size: 200 //控件尺寸
};
}
Scrollbar.prototype = (function() {
function setOptions(options) {
for (var attr in options) {
this.options[attr] = options[attr];
}
Refresh(this);
}
function Refresh(_this) {
if (!_this.created) return;
//设置控件高度
_this.bar.style.height = _this.options.size + "px";
//设置内容高度
var ch = _this.options.total * _this.options.itemSize;
_this.content.style.height = ch + "px";
}
//获取滚动位置
function getPos() {
var top = this.bar.scrollTop;
var pos = parseInt(top / this.options.itemSize);
return pos;
}
//每页可展示的数据数量
function getPageItems() {
return this.options.size / this.options.itemSize;
}
//滚动事件响应
function OnScroll(_this) {
var pos = _this.getPos();
if (pos == _this.options.pos) return;
_this.options.pos = pos;
_this.onScroll(pos);
}
//滚动条创建
function CreateAt(dom) {
var _this = this;
var bar = document.createElement("div");
var content = document.createElement("div");
bar.appendChild(content);
bar.style.width = "19px";
bar.style.overflowY = "scroll";
bar.style.overflowX = "hidden";
if (bar.attachEvent) {
bar.attachEvent("onscroll", function() { OnScroll(_this); });
}
else {//firefox兼容
bar.addEventListener("scroll", function() { OnScroll(_this); }, false);
}
content.style.backgroundColor = "white";
content.style.width = "1px";
this.bar = bar;
this.content = content;
if (typeof (dom) == "string") {
dom = document.getElementById(dom);
}
dom.innerHTML = "";
dom.appendChild(this.bar);
this.created = true;
Refresh(this);
}
return {
setOptions: setOptions,
CreateAt: CreateAt,
getPos: getPos,
getPageItems: getPageItems,
onScroll: null //模拟滚动条事件
};
})();
var data = [];
//创建一万条示例数据
for (var i = 0; i < 10000; i++) {
var row = {
id: i,
text: "text" + i
};
data.push(row);
}
//创建滚动条
var scrbar = new Scrollbar();
window.onload = function() {
scrbar.CreateAt("divScroll");
scrbar.setOptions({
total: 10000,
size: 300
});
scrbar.onScroll = function(pos) {
ShowData(pos);
}
//获取模板
var items = scrbar.getPageItems();
var tpl = document.getElementById("trTpl");
tpl.parentNode.removeChild(tpl);
//仅创建所看到的几十行表格，所以自然快得多
var list = document.getElementById("tblList");
for (var i = 0; i < data.length && i < items; i++) {
var nr = tpl.cloneNode(true);
//从模板行复制新行
list.appendChild(nr);
}
ShowData(scrbar.getPos());
}
//根据滚动条，展示数据
function ShowData(pos) {
var n = scrbar.getPageItems();
var rows = document.getElementById("tblList").rows;
for (var i = 0; i < n; i++) {
var row = rows[i];
var item = data[i + pos];
row.cells["tdID"].innerHTML = item["id"];
row.cells["tdText"].innerHTML = item["text"];
}
}
</script>
</head>
<body>
<table id="tableData" border="1" style="float:left;">
<!--行标题-->
<thead>
<tr>
<th>
ID
</th>
<th>
Text
</th>
</tr>
</thead>
<!--数据展示区-->
<tbody id="tblList">
<tr id="trTpl">
<td id="tdID">
</td>
<td id="tdText">
</td>
</tr>
</tbody>
</table>
<div id="divScroll">
</div>
</body>
</html> 
