分享一个基于jQuery的锁定表格行列的js脚本。

自然框架 2011-01-22 06:49:40

  网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用css锁定行列的,当时css比较烂看不懂,也没有保存那个网址(很后悔),现在想要找却又找不到了。

  另一个就是第三方控件,这种控件很强大,锁定行列只是附带的一个小功能。但是有一个比较明显的缺点,必须使用它的控件,我想锁定GridView,那就不行了。除非你能把他的锁定方法给研究出来。
  最近我在学jQuery,我觉得找个需求来学习,进步会比较快,于是就选择了锁定行列的这个需求。

  目的:
  1、针对<table>来锁定,只要是table标签的形式都能锁定。支持GridView等控件。
  2、可以锁定行、锁定列、同时锁定行列、锁定多行多列。
  3、使用简单,无需修改后台代码(后置代码)。只需要在前台稍微做点调整即可。
  4、效率不能太差,最好支持多种浏览器。

  目的确定下来,然后就要想办法实现了。其实以前也做过两个版本,因为以前js很烂,也不知道有jQuery这样的东东,于是就想了一个笨法。先做一个div(divMain),把要锁定的table放进去,再做三个div,然后把要锁定的table拷贝到三个div里面,然后调整div的宽度、高度和位置,分别放在要锁定的行、列和行列交叉的地方放。然后在写一个滚动事件,在divMain的滚动条滚动的事件里,同时滚动上面的div和左面的div。这样就形成了一个锁定的效果。

  这个方法的缺点很多了,但是水平很烂,也只能这样了。现在想要提高一下js水平,那么就要弄个更好一点的。把整个table都拷贝过去是不是太浪费了?能不能只拷贝要锁定的行、列?
  于是呢,就要jQuery动态创建div和需要的table,然后调整他们的宽度、高度和位置,这样在滚动的时候效率就高了很多,不过也有个问题,那就是精确获取、设置td的高度和宽度,要能够支持被撑高的td。这个问题困扰了我好久,昨天在群里得到了各位高手的帮忙,尤其是“紫風鈴”的指点,才得以突破。

  说了这么多,可能大家都烦了,说一下使用方法。

  1、引用jquery-1.4.2.js
  2、引用scroll-1.0.js (下载:http://demo.naturefw.com/aspnet_client/Nature/scroll-1.0.js
  3、在要锁定的table外面加上一个div,并且设置id
  4、调用js函数,myScroll('div_Main',1,1,'tableID')

  第一个参数:要锁定的table外面的div的ID,
  第二个参数:要锁定的行数(从上面数),可以是0,表示不锁定行。
  第三个参数:要锁定的列数(从左面数),可以是0,表示不锁定列。
  第四个参数:要锁定的table的ID。

  好了搞定。有几个注意事项。

  1、如果div里只有一个table,没有其他的,那么可以不传递tableID这个参数。
  2、table的width不能设置百分比的形式,比如100%,这样很可能造成table被挤在div里面,没有横向的滚动。

  对了,还要说一下缺点:

  1、代码比较烂。初学jQuery,js的功底也很差,所以现在的1.0版本的代码只是实现了基本的功能,代码的美观、运行效率那就很差了,以后还需要继续前进。
  2、td的高度和宽度还是差了一些,不过基本上可以忍受。还需要继续调整。
  3、table的行数比较多时(大于100行),初始化时间会很长。初始化就是创建锁定的行、列的部分。

  最后是在线演示的地址:http://demo.naturefw.com/Nonline/other/default.aspx

  下一步除了修改bug外,还要实现交替色、鼠标跟随、单击、双击、选择变色等功能。

...全文
1638 35 打赏 收藏 转发到动态 举报
写回复
用AI写文章
35 条回复
切换为时间正序
请发表友善的回复…
发表回复
niuguixian6 2013-10-09
  • 打赏
  • 举报
回复
亲爱的楼主同志,能不能在发一遍那个JS呢,现在都下载不下来了
scdn8311 2012-05-14
  • 打赏
  • 举报
回复
怎么看不到了啊?
hernmmy 2011-01-25
  • 打赏
  • 举报
回复
锁定的效果是神马呀?
自然框架 2011-01-25
  • 打赏
  • 举报
回复
有在线演示,可以看一下呀。
antony1029 2011-01-24
  • 打赏
  • 举报
回复
呵呵。纯js的也挺方便的。
lqkankan 2011-01-24
  • 打赏
  • 举报
回复
a a a
linsx1987 2011-01-24
  • 打赏
  • 举报
回复
支持楼主,谢谢分享!学习
自然框架 2011-01-24
  • 打赏
  • 举报
回复
纯js的,引用js就可以了,确实很方便的。
自然框架 2011-01-24
  • 打赏
  • 举报
回复
谢谢大家的鼓励和支持!
沧海遗珠 2011-01-23
  • 打赏
  • 举报
回复
啦啦队在哪儿?
沧海遗珠 2011-01-23
  • 打赏
  • 举报
回复
神马情况呢?
ycproc 2011-01-23
  • 打赏
  • 举报
回复
不错   。  第一次访问这个站
自然框架 2011-01-23
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 jxyxhz 的回复:]
引用 8 楼 sp1234 的回复:
引用楼主 jyk 的回复:
针对<table>来锁定,只要是table标签的形式都能锁定。


够狠的!

能不能包装成一个asp.net自定义控件,然后只要用鼠标从工具栏拖入页面中(比如)GridView旁边,再为你的控件实例写上属性TargetTableID,以及要锁定的行和列,你的程序就自动会FindControl找到旁边的GridView……
[/Quote]

至于显示数据的控件,我也写了一个,MyGrid。

这个很简单,就是显示数据,其他的都不做。可以设定td的宽度、对齐方式、格式化,锁定行列(通过这个js来实现)、隔行换色、鼠标跟随、点击选择等功能。

后三个是通过js和css来实现的。

现在已经在应用了。
自然框架 2011-01-23
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 sp1234 的回复:]
引用楼主 jyk 的回复:
针对<table>来锁定,只要是table标签的形式都能锁定。


够狠的!

能不能包装成一个asp.net自定义控件,然后只要用鼠标从工具栏拖入页面中(比如)GridView旁边,再为你的控件实例写上属性TargetTableID,以及要锁定的行和列,你的程序就自动会FindControl找到旁边的GridView(或者其它的)然后RegisterSta……
[/Quote]

就是不想和服务器控件搞上关系。

就是一个纯js脚本,这样不仅asp.net 可以用,asp.net MVC 、php、jsp等都可以用。当然也可以不用。

这样适用范围就更广了。

另外我也要我自己的分页控件——QuickPager,好像没什么用户。


当然现在还有很多不足,现在只考虑到没有合并td的情况如果有合并td的,比如多表头的情况,这个还没有测试呢,估计可能会遇到点问题。


=========

我是很烦asp.net带的那几个验证控件,明明是在页面里做验证,但是非要弄成服务器控件的形式。



小_虎 2011-01-22
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 sp1234 的回复:]
引用楼主 jyk 的回复:
针对<table>来锁定,只要是table标签的形式都能锁定。


够狠的!

能不能包装成一个asp.net自定义控件,然后只要用鼠标从工具栏拖入页面中(比如)GridView旁边,再为你的控件实例写上属性TargetTableID,以及要锁定的行和列,你的程序就自动会FindControl找到旁边的GridView(或者其它的)然后RegisterSta……
[/Quote]

有时间,我来写。
  • 打赏
  • 举报
回复
[Quote=引用楼主 jyk 的回复:]
针对<table>来锁定,只要是table标签的形式都能锁定。
[/Quote]

够狠的!

能不能包装成一个asp.net自定义控件,然后只要用鼠标从工具栏拖入页面中(比如)GridView旁边,再为你的控件实例写上属性TargetTableID,以及要锁定的行和列,你的程序就自动会FindControl找到旁边的GridView(或者其它的)然后RegisterStartupScript调用你的脚本完成锁定。

发布为asp.net自定义控件,它会跟别人写的分页控件一样有用户。
cansum396 2011-01-22
  • 打赏
  • 举报
回复
留个记号先
小_虎 2011-01-22
  • 打赏
  • 举报
回复
see see

62,073

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧