仿Excel冻结窗格效果jQuery插件

Excel

半路接手的公司的项目改造有一个表格因为列数太多,超出页面宽度太多,之前的同学搞了一个只兼容IE的冻结N列的脚本。这次改造除了需要冻结前N列,需求中增加了需要冻结首行。类似Excel冻结窗格效果。

首先找到了一个 jquery.chromatable.js jQuery插件,但实际使用中表格宽度会莫名其妙的不正常。而且这个插件本身仅仅只有固定表格首行的效果,和需求也不完全一致。

因为公司恶劣的网络情况(用代理上网,无法翻墙),仅靠百度搜了一圈,找到一篇jQuery插件:冻结表头(类似Excel的冻结窗格功能)的年代久远的帖子,但是连做demo都不需要就看到仅有的3条评论就有人反馈和jquery.chromatable.js一样,列对不齐。

回家后放Google转了一圈,先是找到了jquery.easyui.js这个庞然大物,本来项目中就已经用到了jquery-ui,而我并不想继续用jquery-ui这个臃肿的东西。所以虽然easyui可以达到最终目的,但仅仅做为备选方案即可。

再然后找到一个小巧的flexigrid,小巧而且Demo美观,但是…遗憾的是也同样仅仅固定了首行,和列完全无关。

最后在stackoverflow看到了一个帖子,提到了一个http://fixedheadertable.com/livedemos/,虽然这个demo页面本身已经出错了,但我还是感觉这个会有戏,然后进入主站http://fixedheadertable.com,发现主站的demo是正常了。

跟进github,打包下载,然后demo文件夹中自己带了N多个例子。找到第5个,基本符合要求。当然每次看到一个美观的Demo时候最害怕就是会附带一坨乱七八糟的样式。慢慢删除样式表,最后除了defaultTheme.css文件,其他css删除到仅剩下几行样式,Demo依然正常~

.fancyTable thead tr th

,.fancyTable thead tr td

,.fancyTable tbody tr td {

background-color: #fff;

}

最终效果:

jQuery

已有6条评论 »

  1. are internet payday loans legal in nebraskas a month, if you can get a prescription for those amounts.

  2. Viagra VS cialis cheapest lowest price Effectiveness - Viagra Vs Cialis , Which Is Better For Mens Health?

  3. buy cialis for ED I have used both Viagara and Cialis.

  4. Best price for generic cheap cialis (-kopeek.

  5. 胡言乱语

    求"仿Excel冻结窗格效果jQuery插件"的插件谢谢了

  6. 沙发,支持一下

添加新评论 »