站内搜索
分类列表
本类阅读排行
本类推荐文章
广告
JavaScript实现的数据表格：冻结列、调整列宽和客户端排序
作者： 来源： 点击： 日期：2007-7-4 0:53:17
根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件
把下面的代码另存为.htm文件后看下效果。
<HTML><HEAD>
<TITLE>数据表格</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT: 12px 细明体; CURSOR: default
}
TD {
FONT: 12px 细明体; CURSOR: default
}
.title {
BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: LightBlue; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: hidden; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
.coolMenu
{
position: absolute;
height: 1px;
width: 1px;
font-size: 9pt;
background-color: menu;
border-top: 2px outset buttonhighlight;
border-left: 2px outset buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
visibility: hidden;
}
.coolMenu .coolMenuItem
{
height: 20px;
margin: 1px;
padding-right: 10px;
cursor: hand;
overflow: hidden;
}
.coolMenu .coolMenuItem IMG
{
vertical-align: middle;
margin-left: 1px;
margin-right: 6px;
}
.coolMenu .coolMenuItem .coolMenuMore
{
font-family: webdings;
}
.coolMenu .coolMenuDivider
{
border: 1px inset;
border-top-color: buttonshadow;
border-bottom-color: buttonhighlight;
height: 2px;
overflow: hidden;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
}
.sinput
{
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT-FAMILY: 宋体,Arial;
FONT-SIZE: 9pt;
WIDTH: 15pt;
height: 12pt;
}
</STYLE>
<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 #数据类型（主要分三种数据类型：文本、数值、日期）)
var DataTitles=new Array(
"歌手 / 团体#90 #left#文本" ,
JavaScript实现的数据表格：冻结列、调整列宽和客户端排序 评论