chromatable.js实现了一个表格表头固定,表格体滚动的效果.
今天找到的纯html解决方案:建立两个表格,一个表格放表头的信息,一个表格使用div包装起来,div中加上滚动样式;这样就实现了上面的效果.
这个插件实现跟上述解决方案差不多,给jquery对象加一个chromatable函数;代码如下:
$.fn.chromatable = function(options){}
chromatable的函数体:
var options = $.extend({}, $.chromatable.defaults, options);//继承了默认配置
var $this = $(this); //获取当前表格
var $uniqueID = $(this).attr("ID") + ("wrapper"); //根据获得表格的id获取一个新ID
$(this).css('width', options.width).addClass("_scrolling");//当前表格增加样式
$(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>'); //使用两个div包装表格
$(".scrolling_outer").css({'position':'relative'}); //设置最外面的div样式
$("#"+$uniqueID).css( //设置第二层div样式
{'border':'1px solid #CCCCCC',
'overflow-x':'hidden',
'overflow-y':'auto',
'padding-right':'17px'
});
$("#"+$uniqueID).css('height', options.height);
$("#"+$uniqueID).css('width', options.width);
$(this).before($(this).clone().attr("id", "").addClass("_thead").css(
//复制一个新表格,赋予新id,thead增加样式
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':'1px'
}));
$('._thead').children('tbody').remove(); //删除复制表格的表格体tbody
从上面的代码看,可以看出这也是使用两个表格来实现表哥固定和表体滚动的效果,只不过是使用
js实现而已.
这个就是jquery简单插件的构建方法,弄一个option,可以让你设置一些功能,再在jquery全局对象上
加一个函数,实现具体功能.这样可以被所有jquery对象使用了.
这让我想起了,highchart中的构建略有不同,他不是基于jquery的,而是基于面向对象的js,创建js
对象,在创建对象的过程中就将想要完成的功能给完成了.听说js中还有一种构建方式是基于js的mvc的,不过,没看过太多的源码,我感觉应该跟Ext中的使用差不多,使用store存储器存储数据(m),使用各种布局对象显示数据
(V),提供了一些工具类,用于将store中的数据交给布局对象显示,这些工具类就相当于那个(C)吧
纯属个人意见,欢迎大家来喷~~