目标简单又明了:使页面中 table 可排序化。
开始实践:
在<head>中加入:
<link type="text/css" rel="stylesheet" rel="stylesheet" href="/css/jquery/sortable.css" />
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
var enable_table_sort = true;
var highlightline = 'lightLine';
if( enable_table_sort ){
$("table[class*=tablesorter]").tablesorter({widgets:['zebra']}); // 斑马纹在这实现
$("table[class*=tablesorter]")
.filter('tbody').children().each(function(idx){
$(this)
.mouseover(function(){$(this).addClass(highlightline)})
.mouseout(function(){$(this).removeClass(highlightline)});
});
}
});
//-->
</script>
如此这般可使页面中所有 class中含有tablesorter样式的table 实现表格排序、斑马纹(各行换色)和行高亮了。
真是方便啊!今后可以做成tag或放在vm中了。
附件中有 jQuery.tablesorter 插件的完整包,含有doc的,用的朋友来下吧。