您的位置：首页 > 其它

一个实用的表格（锁定表头，可调整单元格大小，可排序）

2006-09-21 14:41 405 查看

昨天在网上找到一个不错的表格显示，该表格可以锁定表头，可调整单元格的大小，同时还可以对数据进行排序，显示效果如下：
<!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>

</SCRIPT>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY></BODY></HTML>

可惜所有代码都是用javascript写的，数据添加也是用javascript动态添加的。
我想把它应用在ASP.NET的程序中，通过一个repeater控件将数据库中的数据动态取出来，显示出如上效果。
经过我一个下午的调试修改，终于实现了我的想法。下面是源代码：
default.css:

#MyHeadTab

#MyBodyTab

Table.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Table</title>
<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>
<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>
</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

原本想把javascript脚本提出来单独写在一个文件中，可是提出来后一直出错，找不到错误在哪里，只好先这样放着了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航