zoukankan      html  css  js  c++  java
  • 分享一个基于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外,还要实现交替色、鼠标跟随、单击、双击、选择变色等功能。

      

  • 相关阅读:
    Android 3.0 r1 API中文文档(108) —— ExpandableListAdapter
    Android 3.0 r1 API中文文档(113) ——SlidingDrawer
    Android 3.0 r1 API中文文档(105) —— ViewParent
    Android 中文 API (102)—— CursorAdapter
    Android开发者指南(4) —— Application Fundamentals
    Android开发者指南(1) —— Android Debug Bridge(adb)
    Android中文API(115)——AudioFormat
    Android中文API(116)——TableLayout
    Android开发者指南(3) —— Other Tools
    Android中文API (110) —— CursorTreeAdapter
  • 原文地址:https://www.cnblogs.com/jyk/p/1941831.html
Copyright © 2011-2022 走看看