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

 

  网上也有很多锁定行列的方法,一个是使用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外,还要实现交替色、鼠标跟随、单击、双击、选择变色等功能。

 

  

时间: 2024-10-02 08:29:56

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

分页-我想做一个基于jquery的可操作表格数据展示与处理的控件

问题描述 我想做一个基于jquery的可操作表格数据展示与处理的控件 我是新手,我想做一个基于jquery的可操作表格数据展示与数据处理控件,表格需要提供的功能是排序,搜索,设置基本的增删改,分页的功能,求具体思路.谢谢 解决方案 别求,你看看开源代码,比如jqgrid,这个是jquery的grid组件,看它的代码研究一下 解决方案二: 想做就做呗,思路看来源代码 解决方案三: 基本思路就是前台传递参数条件到后台,再返回结果到前台显示 解决方案四: 去看jquery自带的flexigrid吧,相

upload-做一个基于jquery 的上传控件

问题描述 做一个基于jquery 的上传控件 我是新手,我想做一个基于jquery upload的上传控件需要从哪方面考虑?谢谢 解决方案 很多居于jquery的上传插件,如ajaxfileupload,jquery.form.js,uploadify等..自己找下API看 http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.htmlhttp://plugins.jquery.com/form/ 解决方案二: http://ww

分享一个批量导出当前实例下的所有linkedserver脚本

原文:分享一个批量导出当前实例下的所有linkedserver脚本 分享一个批量导出当前实例下的所有linkedserver脚本 很多时候,我们都需要导出实例下面的登录用户,job,linkedserver等等 导出job比较复杂,下午写了一个脚本把所有的linkedserver导出来,但是密码不会显示出来 下面脚本在SQL2008 R2下面测试通过 -- ============================================= -- Author: <桦仔> -- Blog

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

再推荐一个基于JQuery的UI框架:J-UI

官方网址:http://j-ui.com/   先来个界面切图:     是不是很像ExtJ呢?   下面来看看J-UI与ExtJS的优势在哪里:   ·         完全开源,源码没有做任何混淆处理,方便扩展 ·         CSS和js代码彻底分离,修改样式方便 ·         简单实用,扩展方便,轻量级框架,快速开发 ·         仍然保留了html的页面布局方式 ·         支持HTML扩展方式调用UI组件,开发人员不需写js ·         只要懂html

一个基于jquery的文本框记数器_jquery

复制代码 代码如下: /* *长度跟踪器 *v2.1.0 *bind2Id:用于显示长度变化的元素的id *max:最大长度 *msgWrap:提示信息(必须要有一个"-"占位符) *eg:$('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:'您还可以输入-个字符'}); *author:liujg1015@gmail.com */ (function ($) { var zw_validate = function (e

一个基于jQuery的图片翻转效果

据说,这是一个最近很流行的效果,新浪微博,腾讯微博,都用到了这种效果,本博开博时也追随潮流用上了这种效果,使用方法: 在你的大图链接中加入class="miniImg artZoom"例: <a class="miniImg artZoom" href="hey.jpg"><img title="Mr.Think" src="hey.jpg" alt="Zoom" /&

分享一个自己写的table表格排序js插件(高效简洁)_javascript技巧

像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用).原生态js的table排序插件等,最后比较看了下--采用了一个原生态js的table排序插件,并在其基础上做了些修改,虽有些勉强或有些地方使用不太舒服,但最算是比较好的实现了当时需要的功能.而前两天,对原有表格做了点儿修改--增加隔行换色的功能,问题就出现了,--效果错乱:检查分析了下,问题出在其table排序插件代码上--其原代码写的比较难理解,修改还不如重新自己写一个table排序插件. 说写就写,ta

(分享)基于JQuery的WEB套打设计器jatoolsPrinter2.0

问题描述 开发web套打应用时,如快递单打印,一般要经过以下步骤:1.扫描快递单据,保存成一个图片文件2.将底图作成<img>3.在<img>上放置打印项,试着打印到打印机,观察有无偏移4.有偏移,则调整,再试打.5.无偏移,则将样张,改造成相应语言的动态页面,如jsp,asp,php等.上述过程中,如果没有可视化的设计工具,3,4两步是最麻烦的,往往要经过多次调整,特别是单据比较多的应用,工作量挺大.所以,jatoolsPrinter打印控件的套打开发设计器,就是帮助你简化套打对