一个实用的表格（锁定表头，可调整单元格大小，可排序） -ag凯发k8国际
ag凯发k8国际
收集整理的这篇文章主要介绍了
一个实用的表格（锁定表头，可调整单元格大小，可排序）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
昨天在网上找到一个不错的表格显示，该表格可以锁定表头，可调整单元格的大小，同时还可以对数据进行排序，显示效果如下：
原代码：
doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head><title>表格title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>body {}{
background: #d4d0c8; scrollbar-arrow-color: #002d96; scrollbar-base-color: #c2cbcf; scrollbar-3d-light-color: #ffffff
}
table {}{
table-layout: fixed; font-size: 9pt; cursor: default
}
tr {}{
height: 15px; ; background-color: expression((this.sectionrowindex%2)?"#ffffff":"#efefef")
}
td {}{
padding-left: 2px
}
#tlist {}{
border-right: #666 1px solid; margin: 40px 10px 10px 70px; overflow: hidden; border-left: #666 1px solid; width: 600px; border-bottom: #666 1px solid; height: 350px
}
#thead {}{
margin-top: 0px; background: #efefef; margin-left: -1px; overflow: hidden; ; width: expression(this.parentnode.offsetwidth); height: 22px
}
#tbody {}{
margin-top: 0px; background: #ffffff; margin-left: -1px; overflow: scroll; ; width: expression(this.parentnode.offsetwidth); ; height: expression(this.parentnode.offsetheight-23)
}
#ttitle {}{
border-right: buttonshadow 1px solid; border-top: buttonhighlight 1px solid; background: #d6d3ce; border-left: buttonhighlight 1px solid; ; width: expression(this.parentnode.offsetwidth); border-bottom: buttonshadow 1px solid; height: 21px
}
style>
<script language=javascript>
function table() //创建容器
{
var mytable = document.createelement("div");
document.getelementsbytagname("body")[0].appendchild(mytable);
mytable.setattribute("id" , "tlist");
var myhead = document.createelement("div");
mytable.appendchild(myhead);
myhead.setattribute("id" , "thead");
var mybody = document.createelement("div");
mytable.appendchild(mybody);
mybody.setattribute("id" , "tbody");
mybody.onscroll = headscroll;
myhead.innerhtml ="
mybody.innerhtml ="
addcell();
}
function addcell() //增加列
{
var arg = 1;
if (arguments.length < 1) //增加空列
arg = 0;
for (var i = 0; i < arguments.length; i) //参数不足
if (arguments[i].length < 1 && arg == 1)
return;
var h = document.getelementbyid("myheadtab");
if (h.rows.length < 1)
{
var row = h.insertrow();
row.setattribute("id" , "ttitle");
row.onmousedown = changwidth;
row.onmousemove = changcursor;
}
h = h.rows(0);
var b = document.getelementbyid("mybodytab");
var tcell;
var cellindex = h.cells.length - 1;
if (arguments[3] != undefined)
if (arguments[3] == -1)
{
if (h.cells[0].innertext != "序号")
return;
for (var i = 0; i < b.rows.length; i)
b.rows[i].cells(0).innertext = i 1;
return;
}
else
cellindex = arguments[3];
if (cellindex == -1)
tcell = h.insertcell();
else
tcell = h.insertcell(cellindex);
if (arg == 0)
{
tcell.innertext = " ";
tcell.style.width = 1500;
}
else
{
tcell.innertext = arguments[0];
tcell.style.width = arguments[2];
}
tcell.otype = arguments[1];
for (var i = 0; i < b.rows.length; i)
{
var bcell = b.rows(i).insertcell(cellindex);
bcell.style.width = arguments[2];
if (cellindex == 0)
bcell.innerhtml = i 1;
}
}
function addrow(text) //增加行
{
if (text == undefined)
return;
var b = document.getelementbyid("mybodytab");
var len = document.getelementbyid("myheadtab").rows(0).cells;
var row = b.insertrow();
var str = text.split(",");
if (len[0].innertext == "序号")
str.unshift(row.sectionrowindex 1);
for (var i = 0; i < len.length; i)
{
var cell = row.insertcell();
if (i 1 != len.length)
{
cell.innerhtml = str[i] == undefined ? "" : str[i];
cell.style.width = document.getelementbyid("myheadtab").rows(0).cells[i].style.width;
}
}
row.onmouseover = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = "#3a6ea5";
this.style.color = "#ffffff";
}
row.onmouseout = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = (this.sectionrowindex % 2) ? "#ffffff" : "#efefef";
this.style.color = "#000000";
}
row.onclick = function() {
for (var i = 0; i < document.getelementbyid("mybodytab").rows.length; i) //可以用折半查找以提高效率
{
/**//* //此行用于清除列选中
for (var j = 0; j < document.getelementbyid("mybodytab").rows(i).cells.length; j )
if (document.getelementbyid("mybodytab").rows(i).cells[j].bgcolor == "#2a63de")
document.getelementbyid("mybodytab").rows(i).cells[j].bgcolor = "";
*/
with(document.getelementbyid("mybodytab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
this.style.background = "#2a63de";
this.style.color = "#ffffff";
}
}
function headscroll()
{
document.getelementbyid("thead").scrollleft = document.getelementbyid("tbody").scrollleft;
}
function changwidth()
{
var e = event.srcelement;
if (e == undefined)
return;
if (e.tagname != "td")
return;
var h = document.getelementbyid("myheadtab");
var b = document.getelementbyid("mybodytab");
var cellindex;
for (var i = 0; i < h.rows(0).cells.length; i)
if (h.rows(0).cells[i] == e)
{
cellindex = i;
break;
}
var l = e.offsetleft 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setcapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x document.getelementbyid("thead").scrollleft - l;
if (w >= 5)
{
e.style.width = w;
if (b.rows.length < 1)
return;
b.rows(0).cells[cellindex].style.width = w;
if(typeof(y) != "undefined")
cleartimeout(y);
if (b.rows.length < 50) //防止排序有bug
y = settimeout("changwidthx(" cellindex ")" , 100);
else
y = settimeout("changwidthx(" cellindex ")" , 800);
}
headscroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releasecapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
tdsort(cellindex);
//selectcell(cellindex);
}
}
function changwidthx(cellindex)
{
var b = document.getelementbyid("mybodytab");
var w = document.getelementbyid("myheadtab").rows(0).cells[cellindex].style.width;
for (var i = 0; i < b.rows.length; i)
b.rows(i).cells[cellindex].style.width = w;
b.rows(0).cells[b.rows(0).cells.length-1].style.width = 0;
if (b.offsetwidth < b.parentnode.parentnode.offsetwidth)
b.rows(0).cells[b.rows(0).cells.length-1].style.width = b.parentnode.parentnode.offsetwidth - b.offsetwidth 20;
headscroll();
}
function changcursor()
{
var e = event.srcelement;
if (e.tagname != "td")
return;
var x = event.x document.getelementbyid("thead").scrollleft; //此值在固定表头时要更改
var l = e.offsetleft 70;
if (x >= l e.offsetwidth 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function tdsort(cellindex)
{
var text = "↑";
var s = 1; //向上排
var h = document.getelementbyid("myheadtab");
var this = h.rows(0).cells[cellindex];
if (this.innertext == "序号" || this.innertext == " ")
return; //没有数据或序号列，不排序
if (this.innertext.indexof("↑") != -1)
{
text = "↓";
s = 0;
}
for (var i = 0; i < h.rows(0).cells.length; i)
{
var ttitle = h.rows(0).cells[i];
if (ttitle.innertext.indexof("↑") != -1 || ttitle.innertext.indexof("↓") != -1)
{
ttitle.innertext = ttitle.innertext.substring(0 , ttitle.innertext.length - 2);
break;
}
}
this.innertext = " " text;
tsort(cellindex , this.otype , s); //开始排序
}
function tsort(cellindex , otype , type)
{
var temp = document.getelementbyid("mybodytab").tbodies[0].rows;
var a = new array();
for (var i = 0; i < temp.length; i)
a[i] = temp[i];
a.sort(sortsub(cellindex , otype , type));
for (var i = 0; i < a.length; i)
document.getelementbyid("mybodytab").tbodies[0].appendchild(a[i]);
settimeout("addcell(\"序号\" , \"num\" , 40 , -1)" , 1000);
}
function parsestr(s)
{
return string(s).touppercase();
}
function parsedate(s)
{
return date.parse(s.replace(/\-/g, '/'));
}
function sortsub(cellindex , otype , type)
{
var thistype = string;
if (otype == "num")
thistype = number;
else if (otype == "date")
thistype = parsedate;
else if (otype == "str")
thistype = parsestr;
return function (x,y)
{
if (thistype(x.cells[cellindex].innertext) > thistype(y.cells[cellindex].innertext))
return type ? 1 : -1;
if (thistype(x.cells[cellindex].innertext) < thistype(y.cells[cellindex].innertext))
return type ? -1 : 1;
return 0;
};
}
function window.onload()
{
table();
addcell("姓名" , "text" , 70);
addcell("年龄" , "num" , 55);
addcell("性别" , "str" , 55);
addcell("地址" , "text" , 120);
addcell("联系电话" , "text" , 120);
addcell("e-mail" , "text" , 120);
addcell("序号" , "num" , 40 , 0);
addcell("身份证号码" , "text" , 120);
for (var i = 0; i < 30; i)
addrow("小刚," (24i) ",男,传化物流基地,82878566,lzg1215@hotmail.com,41302619821215");
}
<meta content="mshtml 6.00.2900.2963" name=generator>head>
<body>body>html>
可惜所有代码都是用javascript写的，数据添加也是用javascript动态添加的。
我想把它应用在asp.net的程序中，通过一个repeater控件将数据库中的数据动态取出来，显示出如上效果。
经过我一个下午的调试修改，终于实现了我的想法。下面是源代码：
default.css:
body {}{
/**//*background: #d4d0c8;
scrollbar-arrow-color: #002d96;
scrollbar-base-color: #c2cbcf;
scrollbar-3d-light-color: #ffffff*/
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #006699;
scrollbar-base-color : #ffffff;
scrollbar-highlight-color: #006699;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #f8f8f8;
scrollbar-arrow-color: #006699;
}
/**//*table {
table-layout: fixed;
font-size: 9pt;
cursor: default
}*/
.tr {}{
height: 20px;
background-color: expression((this.sectionrowindex%2)?"#ffffff":"#efefef")
}
.td {}{
padding-left: 2px
}
#myheadtab
{}{
table-layout: fixed; font-size: 9pt; cursor: default
}
#mybodytab
{}{
table-layout: fixed; font-size: 9pt; cursor: default
}
#tlist {}{
border-right: #666 1px solid;
border-left: #666 1px solid;
border-bottom: #666 1px solid;
overflow: hidden;
margin: 40px 10px 10px 70px;
/**//*
width: 600px;
height: 350px;*/
}
#thead {}{
margin-top: 0px;
background: #efefef;
margin-left: -1px;
overflow: hidden;
width: expression(this.parentnode.offsetwidth);
height: 25px;
}
#tbody {}{
margin-top: 0px;
background: #ffffff;
margin-left: -1px;
overflow: scroll;
width: expression(this.parentnode.offsetwidth);
height: expression(this.parentnode.offsetheight-25)
}
#ttitle {}{
border-right: buttonshadow 1px solid;
border-top: buttonhighlight 1px solid;
background: #d6d3ce;
border-left: buttonhighlight 1px solid;
width: expression(this.parentnode.offsetwidth);
border-bottom: buttonshadow 1px solid;
height: 24px
}
table.aspx
<%@ page language="c#" codebehind="table.aspx.cs" autoeventwireup="false" inherits="javascriptdemo.table" %>
doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
<head>
<title>tabletitle>
<meta name="generator" content="microsoft visual studio .net 7.1">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta content="mshtml 6.00.2900.2963" name="generator">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
<link type="text/css" href="css/default.css" rel="stylesheet">
head>
<body>
<form id="form1" method="post" runat="server">
<div id="tlist" style="width: 700px; height: 450px">
<div id="thead">
<table onselectstart="return false" id="myheadtab" border="1" cellpadding="0" cellspacing="0"
bordercolordark="#ffffff" bordercolorlight="#6c6969">
<tr id="ttitle" onmousedown="changwidth();" onmousemove="changcursor();">
<td width="35" align="center">序号td>
<td width="100" align="center">客户编号td>
<td width="200" align="center">公司名称td>
<td width="100" align="center">客户名称td>
<td width="100" align="center">地址td>
<td width="60" align="center">城市td>
<td width="100" align="center">电话td>
<td width="100" align="center">传真td>
<td width="23">td>
tr>
table>
div>
<div id="tbody" onscroll="headscroll();">
<asp:repeater id="rpttb" runat="server" enableviewstate="false">
<itemtemplate>
<tr class="tr" id='<%# string.format("tr{0}",container.itemindex 1)%>' οnmοuseοver='rowover(<%# string.format("tr{0}",container.itemindex1)%>);' οnmοuseοut='rowout(<%# string.format("tr{0}",container.itemindex1)%>);' οnclick='rowclick(<%# string.format("tr{0}",container.itemindex1)%>);'>
<td width="35" align="center" class="td"><%# container.itemindex1%>td>
<td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"customerid")%>td>
<td width="200" class="td"><%# databinder.eval(container.dataitem,"companyname")%>td>
<td width="100" class="td"><%# databinder.eval(container.dataitem,"contactname")%>td>
<td width="100" class="td"><%# databinder.eval(container.dataitem,"address")%>td>
<td width="60" align="center" class="td"><%# databinder.eval(container.dataitem,"city")%>td>
<td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"phone")%>td>
<td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"fax")%>td>
<td>td>
tr>
itemtemplate>
<headertemplate>
<table id="mybodytab" border="1" bordercolor="#cccccc" style="border-collapse:collapse;"
frame="void">
headertemplate>
<footertemplate>
table>
footertemplate>
asp:repeater>div>
div>
form>
<script language="javascript">
function resetcolor()
{
var obj=document.getelementbyid("mybodytab");
for(var i = 0; i <obj.rows.length; i)
{
obj.rows(i).style.background = (i%2)? "#ffffff" : "#efefef";
}
}
function rowover(obj) {
if (obj.style.background == "#2a63de")
return;
obj.style.background = "#3a6ea5";
obj.style.color = "#ffffff";
}
function rowout(obj) {
if (obj.style.background == "#2a63de")
return;
obj.style.background = (obj.sectionrowindex % 2) ? "#ffffff" : "#efefef";
obj.style.color = "#000000";
}
function rowclick(obj) {
for (var i = 0; i < document.getelementbyid("mybodytab").rows.length; i) //可以用折半查找以提高效率
{
with(document.getelementbyid("mybodytab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
obj.style.background = "#2a63de";
obj.style.color = "#ffffff";
}
function headscroll()
{
document.getelementbyid("thead").scrollleft = document.getelementbyid("tbody").scrollleft;
}
function changwidth()
{
var e = event.srcelement;
if (e == undefined)
return;
if (e.tagname != "td")
return;
var h = document.getelementbyid("myheadtab");
var b = document.getelementbyid("mybodytab");
var cellindex;
for (var i = 0; i <h.rows(0).cells.length; i)
if (h.rows(0).cells[i] == e)
{
cellindex = i;
break;
}
var l = e.offsetleft 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setcapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x document.getelementbyid("thead").scrollleft - l;
if (w >= 5)
{
e.style.width = w;
if (b.rows.length < 1)
return;
b.rows(0).cells[cellindex].style.width = w;
if(typeof(y) != "undefined")
cleartimeout(y);
if (b.rows.length < 50) //防止排序有bug
y = settimeout("changwidthx(" cellindex ")" , 100);
else
y = settimeout("changwidthx(" cellindex ")" , 800);
}
headscroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releasecapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
tdsort(cellindex);
}
}
function changwidthx(cellindex)
{
var b = document.getelementbyid("mybodytab");
var h = document.getelementbyid("myheadtab");
var w = document.getelementbyid("myheadtab").rows(0).cells[cellindex].style.width;
for (var i = 0; i < b.rows.length; i)
b.rows(i).cells[cellindex].style.width = w;
b.rows(0).cells[b.rows(0).cells.length-1].style.width = 0;
if (b.offsetwidth < b.parentnode.parentnode.offsetwidth)
{
b.rows(0).cells[b.rows(0).cells.length-1].style.width = b.parentnode.parentnode.offsetwidth - b.offsetwidth 20;
}
headscroll();
}
function changcursor()
{
var e = event.srcelement;
if (e.tagname != "td")
return;
var x = event.x document.getelementbyid("thead").scrollleft; //此值在固定表头时要更改
var l = e.offsetleft 70;
if (x >= l e.offsetwidth 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function tdsort(cellindex)
{
var text = "↑";
var s = 1; //向上排
var h = document.getelementbyid("myheadtab");
var this = h.rows(0).cells[cellindex];
if (cellindex==0 || this.innertext =="")
return; //没有数据或序号列，不排序
if (this.innertext.indexof("↑") != -1)
{
text = "↓";
s = 0;//向下排
}
for (var i = 0; i < h.rows(0).cells.length; i)
{
var ttitle = h.rows(0).cells[i];
if (ttitle.innertext.indexof("↑") != -1 || ttitle.innertext.indexof("↓") != -1)
{
ttitle.innertext = ttitle.innertext.substring(0 , ttitle.innertext.length - 2);
break;
}
}
this.innertext = " " text;
tsort(cellindex , this.otype , s); //开始排序
}
function tsort(cellindex , otype , type)
{
var temp = document.getelementbyid("mybodytab").tbodies[0].rows;
var a = new array();
for (var i = 0; i < temp.length; i)
a[i] = temp[i];
a.sort(sortsub(cellindex , otype , type));
for (var i = 0; i < a.length; i)
document.getelementbyid("mybodytab").tbodies[0].appendchild(a[i]);
}
function parsestr(s)
{
return string(s).touppercase();
}
function parsedate(s)
{
return date.parse(s.replace(/\-/g, '/'));
}
function sortsub(cellindex , otype , type)
{
var thistype = string;
if (otype == "num")
thistype = number;
else if (otype == "date")
thistype = parsedate;
else if (otype == "str")
thistype = parsestr;
return function (x,y)
{
if (thistype(x.cells[cellindex].innertext) > thistype(y.cells[cellindex].innertext))
return type ? 1 : -1;
if (thistype(x.cells[cellindex].innertext) < thistype(y.cells[cellindex].innertext))
return type ? -1 : 1;
return 0;
};
}
script>
body>
html>
table.aspx.cs
using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using microsoft.practices.enterpriselibrary.configuration;
using microsoft.practices.enterpriselibrary.common;
using microsoft.practices.enterpriselibrary.data;
namespace javascriptdemo
{
/**////
/// table 的摘要说明。
///
public class table : system.web.ui.page
{
protected system.web.ui.webcontrols.repeater rpttb;
private void page_load(object sender, system.eventargs e)
{
// 在此处放置用户代码以初始化页面
if(!page.ispostback) {
database db = databasefactory.createdatabase();
string strsel="select * from customers";
dataset ds = db.executedataset(commandtype.text,strsel);
this.rpttb.datasource =ds;
this.rpttb.databind();
}
}
web 窗体设计器生成的代码#region web 窗体设计器生成的代码
override protected void oninit(eventargs e)
{
//
// codegen: 该调用是 asp.net web 窗体设计器所必需的。
//
initializecomponent();
base.oninit(e);
}
/**////
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
///
private void initializecomponent()
{
this.load = new system.eventhandler(this.page_load);
}
#endregion
}
}
原本想把javascript脚本提出来单独写在一个文件中，可是提出来后一直出错，找不到错误在哪里，只好先这样放着了。
转载于:https://www.cnblogs.com/yknb/archive/2006/09/21/510779.html
总结
以上是ag凯发k8国际为你收集整理的一个实用的表格（锁定表头，可调整单元格大小，可排序）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇： sqlserver存储过程/函数加/解密