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

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

 

  网上也有很多锁定行列的方法,一个是使用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 (下载

  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外,还要实现交替色、鼠标跟随、单击、双击、选择变色等功能。

 

  

相关文章
|
5月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
46 1
|
2月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
69 14
|
2月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
2月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
43 5
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
72 3
|
2月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
39 0
|
3月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
38 0
|
3月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
24 0
|
3月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
3月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法