ASP.NET冻结列
最终要的效果
前面几个列固定 后面滚动条显示隐藏值
经过练习48个小时的摧残，尼玛终于搞定了，苦逼啊.............
最近要在ASP.NET项目中使用冻结列那些鬼东西，然后网上各种查找，然后找到个不错的能够手动设置冻结哪几列的
地址http://download.csdn.net/detail/qq873113580/6461653
可是这个引用的东西太多了 ，手动写了N多JS N多CSS，好吧 ，为了工作拼，耐心修改成自己想要的样式
然后....活动列和冻结列 内容高度一样的时候 还蛮好看的，但是内容动态获取出来之后有些高度不一样 冻结列和未冻结列就无法正常显示了，坑
好吧，我承认 不怎么想去看里面代码怎么实现了.............
继续找.........听说第三方控件DevExpress也不错，然后找到了地址
http://download.csdn.net/detail/xiongjianx/4921864 第一部分
http://download.csdn.net/detail/xiongjianx/4922052 第二部分
下载好了，收费的.........直接略过....，对于自己用还是不错的
继续找，
http://feipigwang.iteye.com/blog/1204137
貌似代码比较简单了，但是，全部复制没效果啊，不知道这个大神怎么显示出来的，加了QQ木反应，
然后想是不是expression(this.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft);这里的问题
，修改成JS试试，就是把left的值动态获取，哇塞出来了，主要思路是滚动条每滚动一次获取LEFT TOP的值 用Position控制，可是效果很渣渣
每次拖动滚动条，被冻结的列都会闪烁，主要是动态改变left top的值造成的，就在绝望滴时候，脑中闪过一片灵光，顿时王八之气一抖，汗一个，好老套的剧情。。。。
-_-!!!!!!!!!!!!!!!
突然想到了table套table
列头在第一个 table thead 里面 滚动条在tfoot里面 夸要 活动的列，然当滚动条滚动的时候同时上面所有隐藏的列滚动条也滚动，就OK了，
PS:由于是table套table 组合而成的，所以2个table的css要一样 这个最重要的
丢源码上来，思路例子效果，不过这个是只设置了一列，多列也可参考这种思维，毕竟 这样布局比较清楚，然后修改样式也容易修改，对于我等新手来说 还算不错了，(*^__^*) 嘻嘻……
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index1.aspx.cs" Inherits="冻结列.Index1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script type="text/javascript"> $(function () { //最下面滚动的时候，把上面的所有隐藏的一起滚动 $(".activeCol").scroll(function () { if ($(this).attr("id") == "scrollBar") { var left = $(this).scrollLeft(); $(".activeCol").each(function (i) { if ($(this).attr("id") != "scrollBar") { $(this).scrollLeft(left); } }); } }); }); </script> <style type="text/css"> table, td, tr { margin: 0px; padding: 0px; } table { border-collapse: collapse; } td { border: solid 1px black; } </style></head><body> <form id="form1" runat="server"> <div> <table> <!--手动设置头部Start--> <thead> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </thead> <!--手动设置头End--> <tbody> <tr> <td colspan="4"> <!--这里设置中间显示的内容区域--> <div style="width: 550px; height: 400px; overflow-x: hidden; overflow-y: auto;"> <!--主要循环处 只循环tr--> <table> <%for (int i = 0; i < 10; i++) { %> <tr> <!--这里写是固定区--> <td>2</td> <td>2</td> <td>2</td> <td> <!--这里设置隐藏区--> <div class="activeCol" style="width: 500px; overflow: hidden;"> <div style="width: 800px; height: 100px;"> 1234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999123456789999999999912345678999999912345678999999999991234567899999991234567899999999999123456789999999 </div> </div> </td> </tr> <%} %> </table> <!--主要循环处--> </div> </td> </tr> </tbody> <!--滚动条Start--> <tfoot> <tr> <td></td> <td></td> <td></td> <td> <div class="activeCol" id="scrollBar" style="width: 500px; overflow-x: auto; overflow-y: hidden;"> <div style="width: 800px; height: 1px;"> </div> </div> </td> </tr> </tfoot> <!--滚动条End--> </table> </div> </form></body></html>
上面的存在边框重复，2个table列距离差异 下面是 完善版本
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %><%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %><%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %><%@ Import Namespace="Microsoft.SharePoint" %><%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MyDemo.Layouts.MyDemo.Index2" DynamicMasterPageFile="~masterurl/default.master" %><asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> <script type="text/javascript" src="../jquery/jquery-1.5.2.min.js"></script> <script type="text/javascript"> function BindWidth() { $(".td11").css("width", $(".td1").attr("offsetWidth") + "px"); $(".td22").css("width", $(".td2").attr("offsetWidth") + "px"); $(".td33").css("width", $(".td3").attr("offsetWidth") + "px"); } $(function () { $(".activeCol").scroll(function () { if ($(this).attr("id") == "scrollBar") { var left = $(this).scrollLeft(); $(".activeCol").each(function (i) { if ($(this).attr("id") != "scrollBar") { $(this).scrollLeft(left); } }); } }); BindWidth(); }); </script> <style type="text/css"> table, td, tr { margin:0px;padding:0px; } table { border-collapse: collapse; } </style></asp:Content><asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server"> <div> <label id="lblcatagray">类型：</label><asp:DropDownList ID="drtcatagray" runat="server" OnSelectedIndexChanged="drtcatagray_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList> <label id="lblline">产品线：</label><asp:DropDownList ID="drtline" runat="server" OnSelectedIndexChanged="drtcatagray_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList> <label id="lblstatus">状态：</label><asp:DropDownList ID="drtstatus" runat="server" OnSelectedIndexChanged="drtcatagray_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList> </div> <div style="border:solid 2px black;"> <table style="width: 100%;"> <!--手动设置头部Start--> <thead> <tr><!--头高度以及背景--> <td class="td11" style="width: 70px; text-align: center; border-bottom:solid 1px black; border-right:solid 1px black;">#</td> <td class="td11" style="width: 70px; text-align: center; border-bottom:solid 1px black; border-right:solid 1px black;">进度灯</td> <td class="td22" style="width: 200px; text-align: center; border-bottom:solid 1px black; border-right:solid 1px black;">项目名称</td> <td class="td33" style="width: 150px; text-align: center; border-bottom:solid 1px black; border-right:solid 1px black;">负责人</td> <td class="td11" style="width: 70px; text-align: center; border-bottom:solid 1px black; border-right:solid 1px black; ">进度</td> <td style=" border-bottom:solid 1px black; ">生命周期</td> </tr> </thead> <!--手动设置头End--> <tbody> <tr> <td colspan="6"> <div style="width: 100%; height: 320px; overflow-x: hidden; overflow-y: auto;"> <!--主要循环处 只循环tr--> <table style="width: 100%;"> <asp:Repeater ID="rpproject" runat="server" OnItemDataBound="rpproject_ItemDataBound"> <ItemTemplate> <!--默认显示高度--> <tr> <td class="td1" style="width: 70px; text-align: center;border-bottom:solid 1px black; border-right:solid 1px black;"><%# Eval("ID") %></td> <td class="td1" style="width: 70px; text-align: center;border-bottom:solid 1px black; border-right:solid 1px black;"> <img alt="" src='<%# Eval("Light") %>' /></td> <td class="td2" style="width: 200px; text-align: center;border-bottom:solid 1px black; border-right:solid 1px black;"><a href="#" id="a1"><%# Eval("ProjectName") %></a></td> <td class="td3" style="width: 150px; text-align: center;border-bottom:solid 1px black; border-right:solid 1px black;"><%# Eval("Manager") %></td> <td class="td1" style="width: 70px; text-align: center;border-bottom:solid 1px black; border-right:solid 1px black;"><%# Eval("Schedule") %></td> <td style="text-wrap:none;border-bottom:solid 1px black;"> <div class="activeCol" style="width:500px; overflow: hidden;"> <div style="width: 1500px;"> <asp:Repeater ID="rpTasks" runat="server"> <ItemTemplate> <div style="float: left; width: 150px; height: 100px; padding: 5px 0 5px 0; line-height: 20px;"> <div style="font-size: 12px; font-weight: bold; color: #336699; text-align: center;"><%# Eval("Title") %> </div> <div><%# Eval("Status")%></div> <div>计划时间：<%# string.Format("{0:yyyy-MM-dd}",Eval("StartDate")) %> </div> <div>实际时间：<%# string.Format("{0:yyyy-MM-dd}",Eval("ActuaDueDate")) %> </div> </div> </ItemTemplate> </asp:Repeater> </div> </div> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <!--主要循环处--> </div> </td> </tr> </tbody> <!--滚动条Start--> <tfoot> <tr> <td class="td11"></td> <td class="td11"></td> <td class="td22"></td> <td class="td33"></td> <td class="td11"></td> <td> <div class="activeCol" id="scrollBar" style="width: 500px; overflow-x: auto; overflow-y: hidden;"> <div style="width: 1500px; height: 1px;"> </div> </div> </td> </tr> </tfoot> <!--滚动条End--> </table> </div></asp:Content><asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"> 应用程序页</asp:Content><asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"> 我的应用程序页</asp:Content>