+ add the feature of altnate color for table.

This commit is contained in:
wangchunsheng
2009-12-30 03:13:51 +00:00
parent a57d0198a9
commit 0057cb3ccf
12 changed files with 428 additions and 11 deletions

View File

@@ -147,3 +147,6 @@ update zt_task set statusCustom = locate(status, 'wait,doing,done,cancel')
-- 增加类型字段。--
ALTER TABLE `zt_task` ADD `type` VARCHAR( 20 ) NOT NULL AFTER `name` ,
ADD INDEX ( TYPE )
-- todo 增加状态--
ALTER TABLE `zt_todo` CHANGE `status` `status` CHAR( 20 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT 'wait'

View File

@@ -24,6 +24,7 @@
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/treeview.html.php';?>
<?php include '../../common/colorize.html.php';?>
<script language='Javascript'>
/* 切换浏览方式。*/
function browseByModule(active)
@@ -81,7 +82,7 @@ function search(active)
<div class="yui-main">
<div class="yui-b">
<?php $vars = "productID=$productID&type=$type&param=$param&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage"; ?>
<table class='table-1 fixed'>
<table class='table-1 fixed colored'>
<thead>
<tr class='colhead'>
<th><?php common::printOrderLink('id', $orderBy, $vars, $lang->bug->id);?></th>

View File

@@ -1,3 +1,31 @@
<link rel="stylesheet" href="<?php echo $clientTheme;?>tablesorter.css" />
<script src="<?php echo $jsRoot;?>jquery/tablesorter/min.js" type="text/javascript"></script>
<script language='javascript'> $(function() { $(".tablesorter").tablesorter(); } );</script>
<link rel='stylesheet' href='<?php echo $clientTheme;?>tablesorter.css' />
<script src='<?php echo $jsRoot;?>jquery/tablesorter/min.js' type='text/javascript'></script>
<script src='<?php echo $jsRoot;?>jquery/colorize/full.js' type='text/javascript'></script>
<script language='javascript'>
$(function() {
$('.tablesorter').tablesorter(
{
widgets: ['zebra'],
widgetZebra: {css: ['odd', 'even'] }
}
);
$('.tablesorter tr').hover(
function(){$(this).addClass('hoover')},
function(){$(this).removeClass('hoover')}
);
$('.tablesorter tr').click(
function()
{
if($(this).attr('class').indexOf('clicked') > 0)
{
$(this).removeClass('clicked');
}
else
{
$(this).addClass('clicked');
}
}
);
});
</script>

View File

@@ -27,7 +27,7 @@
<div class='yui-d0'>
<table class='table-1 tablesorter a-center'>
<thead>
<tr class='rowhead'>
<tr class='colhead'>
<th><?php echo $lang->project->name;?></th>
<th><?php echo $lang->project->code;?></th>
<th><?php echo $lang->project->begin;?></th>

View File

@@ -24,6 +24,7 @@
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/treeview.html.php';?>
<?php include '../../common/colorize.html.php';?>
<script language='Javascript'>
/* 切换浏览方式。*/
function browseByModule()
@@ -62,7 +63,7 @@ function browseByModule()
<div class="yui-main">
<div class="yui-b">
<table class='table-1 fixed'>
<table class='table-1 fixed colored'>
<thead>
<tr class='colhead'>
<?php $vars = "productID=$productID&moduleID=$moduleID&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage";?>

View File

@@ -23,13 +23,14 @@
*/
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/colorize.html.php';?>
<div class='yui-d0'>
<div id='featurebar'>
<div class='f-right'><?php common::printLink('bug', 'create', "productID=0&project=$project->id", $lang->bug->create);?></div>
</div>
</div>
<div class='yui-d0'>
<table class='table-1 fixed'>
<table class='table-1 fixed colored'>
<thead>
<tr class='colhead'>
<th><?php echo $lang->bug->id;?></th>

View File

@@ -24,6 +24,7 @@
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/colorbox.html.php';?>
<?php include '../../common/colorize.html.php';?>
<script language='javascript'>
$(document).ready(function()
{
@@ -41,7 +42,7 @@ $(document).ready(function()
</div>
<div class='yui-d0'>
<table class='table-1 tablesorter fixed'>
<table class='table-1 tablesorter fixed colored'>
<?php $vars = "projectID=$project->id";?>
<thead>
<tr class='colhead'>

View File

@@ -23,6 +23,7 @@
*/
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/colorize.html.php';?>
<div class="yui-d0">
<div id='featurebar'>
<div class='f-left'>
@@ -32,7 +33,7 @@
<?php if(common::hasPriv('task', 'create')) echo html::a($this->createLink('task', 'create', "project=$project->id"), $lang->task->create);?>
</div>
</div>
<table class='table-1 fixed'>
<table class='table-1 fixed colored'>
<?php $vars = "projectID=$project->id&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage"; ?>
<thead>
<tr class='colhead'>

View File

@@ -24,8 +24,9 @@
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/colorbox.html.php';?>
<?php include '../../common/tablesorter.html.php';?>
<div class='yui-d0'>
<table align='center' class='table-4'>
<table align='center' class='table-4 tablesorter'>
<thead>
<tr class='colhead'>
<th><?php echo $lang->team->account;?></th>

View File

@@ -24,6 +24,7 @@
?>
<?php include '../../common/header.html.php';?>
<?php include '../../common/treeview.html.php';?>
<?php include '../../common/colorize.html.php';?>
<script language='Javascript'>
/* 切换浏览方式。*/
function browseByModule(active)
@@ -61,7 +62,7 @@ function browseByModule(active)
</div>
<div class="yui-main">
<div class='yui-b'>
<table class='table-1'>
<table class='table-1 colored'>
<tr class='colhead'>
<?php $vars = "productID=$productID&type=$type&param=$param&orderBy=%s&recTotal=$recTotal&recPerPage=$recPerPage"; ?>
<th><?php common::printOrderLink('id', $orderBy, $vars, $lang->testcase->id);?></th>

374
trunk/www/js/jquery/colorize/full.js vendored Normal file
View File

@@ -0,0 +1,374 @@
/**
* jQuery.colorize
* Copyright (c) 2008-2009 Eric Karimov - ekarim57(at)gmail(dot)com | http://franca.exofire.net/jq/
* Dual licensed under MIT and GPL.
* Date: 9/15/2009
*
* @projectDescription Table colorize using jQuery.
* http://franca.exofire.net/jq/colorize
*
* @author Eric Karimov, contributor Aymeric Augustin
* @version 2.0.0
*/
jQuery.fn.colorize = function(params) {
options = {
altColor: '#ECF6FC',
bgColor: '#fff',
hoverColor: '#BCD4EC',
hoverClass:'',
hiliteColor: 'yellow',
hiliteClass:'',
oneClick: false,
hover:'row',
click:'row',
banColumns: [],
banRows:[],
banDataClick:false,
ignoreHeaders:true,
nested:false
};
jQuery.extend(options, params);
var colorHandler = {
addHoverClass: function(){
this.origColor = this.style.backgroundColor;
this.style.backgroundColor='';
jQuery(this).addClass(options.hoverClass);
},
addBgHover:function (){
this.origColor = this.style.backgroundColor;
this.style.backgroundColor= options.hoverColor;
},
removeHoverClass: function(){
jQuery(this).removeClass(options.hoverClass);
this.style.backgroundColor=this.origColor;
},
removeBgHover: function(){
this.style.backgroundColor=this.origColor;
},
checkHover: function() {
if(checkRowBan(this)) return;
if (!this.onfire) this.hover();
},
checkHoverOut: function() {
if (!this.onfire) this.removeHover();
},
highlight: function() {
if(options.hiliteClass.length>0 || options.hiliteColor != 'none')
{
if(checkRowBan(this)) return;
this.onfire = true;
if(options.hiliteClass.length>0){
this.style.backgroundColor='';
jQuery(this).addClass(options.hiliteClass).removeClass(options.hoverClass);
}
else if (options.hiliteColor != 'none') {
this.style.backgroundColor= options.hiliteColor;
if(options.hoverClass.length>0) jQuery(this).removeClass(options.hoverClass);
}
}
},
stopHighlight: function() {
this.onfire = false;
this.style.backgroundColor = (this.origColor)?this.origColor:'';
jQuery(this).removeClass(options.hiliteClass).removeClass(options.hoverClass);
}
}
function processCells (cells, idx, func) {
var colCells = getColCells(cells, idx);
jQuery.each(colCells, function(index, cell2) {
func.call(cell2);
});
function getColCells (cells, idx) {
var arr = [];
for (var i = 0; i < cells.length; i++) {
if (cells[i].cellIndex == idx)
arr.push(cells[i]);
}
return arr;
}
}
function processAdapter(cells, cell, func) {
processCells(cells, cell.cellIndex, func);
}
var clickHandler = {
toggleColumnClick : function (cells) {
var func = (!this.onfire) ? colorHandler.highlight : colorHandler.stopHighlight;
processAdapter(cells, this, func);
},
toggleRowClick: function(cells) {
row = jQuery(this).parent().get(0);
if (!row.onfire)
colorHandler.highlight.call(row);
else
colorHandler.stopHighlight.call(row);
},
oneClick : function (clicked){
if(clicked != null) {
if (this.isRepeatClick())
{
this.stopHilite();
this.cancel ();
}
else{
this.stopHilite();
this.hilite();
}
}
else{
this.hilite();
}
},
oneColumnClick : function (cells) {
var indx = this.cellIndex;
function repeat (){
return (cells.clicked == indx);
}
Column.handleClick (this, cells, indx, repeat);
},
oneRowClick : function (cells) {
var row = jQuery(this).parent().get(0);
var indx = row.rowIndex;
function repeat (){
return (cells.rowClicked == indx);
}
Row.handleClick (this, cells, row.rowIndex, repeat);
},
oneColumnRowClick : function (cells) {
var indx = this.cellIndex;
var row = jQuery(this).parent().get(0);
function isRepeatColumn(){
return (cells.clicked == indx && cells.rowClicked == row.rowIndex) ;
}
function isRepeatRow(){
return (cells.rowClicked == row.rowIndex && this.cellIndex == cells.clicked) ;
}
Column.handleClick (this, cells,indx, isRepeatColumn);
Row.handleClick (this, cells,row.rowIndex, isRepeatRow);
}
}
var Column ={
init: function(cell, cells, indx){
this.cell = cell;
this.cells = cells;
this.indx = indx;
},
handleClick: function(cell, cells, indx, func){
this.init(cell, cells, indx);
this.isRepeatClick = func;
clickHandler.oneClick.call (this, cells.clicked);
},
stopHilite : function(){
processCells(this.cells, this.cells.clicked, colorHandler.stopHighlight);
},
hilite : function(){
processAdapter(this.cells, this.cell, colorHandler.highlight);
this.cells.clicked = this.indx;
},
cancel: function(){
this.cells.clicked = null;
}
}
var Row ={
init: function(cell, cells, indx){
this.cell = cell;
this.cells = cells;
this.indx = indx;
},
handleClick: function(cell, cells, indx, func){
this.init(cell, cells, indx);
this.isRepeatClick = func;
clickHandler.oneClick.call (this, cells.rowClicked);
},
stopHilite : function(){
colorHandler.stopHighlight.call(clickHandler.tbl.rows[this.cells.rowClicked]); // delete the selected row
},
hilite : function(){
var row = jQuery(this.cell).parent().get(0);
if(options.hover=='column') colorHandler.addBgHover.call (row);
colorHandler.highlight.call(row); // the current row is set to select
this.cells.rowClicked = this.indx; //the current row is recorded
},
cancel: function(){
this.cells.rowClicked = null;
}
}
function isDataCell(){
return (this.nodeName == 'TD');
}
function checkBan() {
return (jQuery.inArray(this.cellIndex, options.banColumns) != -1) ;
}
function checkRowBan(cell){
if(options.banRows.length>0){
var row = jQuery(cell).parent().get(0);
return jQuery.inArray(row.rowIndex, options.banRows) != -1;
}
else
return false;
}
function attachHoverHandler(){
this.hover = optionsHandler.hover;
this.removeHover = optionsHandler.removeHover;
}
function handleColumnHoverEvents(cell, cells){
attachHoverHandler.call (cell);
cell.onmouseover = function() {
if (checkBan.call(this)) return;
processAdapter(cells, this, colorHandler.checkHover);
}
cell.onmouseout = function() {
if (checkBan.call(this)) return;
processAdapter(cells, this, colorHandler.checkHoverOut);
}
}
function handleRowHoverEvents(cell, cells){
row = jQuery(cell).parent().get(0);
attachHoverHandler.call (row);
row.onmouseover = colorHandler.checkHover ;
row.onmouseout = colorHandler.checkHoverOut ;
}
function handleRowColHoverEvents(cell, cells){
handleRowHoverEvents(cell, cells);
handleColumnHoverEvents(cell, cells);
}
var optionsHandler ={
setHover: function(){
if(options.hoverClass.length>0){
this.hover = colorHandler.addHoverClass;
this.removeHover = colorHandler.removeHoverClass;
}
else{
this.hover = colorHandler.addBgHover;
this.removeHover = colorHandler.removeBgHover;
}
},
getRowClick : function (){
if(options.oneClick)
return clickHandler.oneRowClick;
else
return clickHandler.toggleRowClick;
},
getColumnClick : function (){
if(options.oneClick)
return clickHandler.oneColumnClick;
else
return clickHandler.toggleColumnClick;
},
getRowColClick:function(){
return clickHandler.oneColumnRowClick;
}
}
var handler = {
clickFunc : getClickHandler(),
handleHoverEvents :getHoverHandler()
};
function getHoverHandler(){
if(options.hover=='column')
return handleColumnHoverEvents;
else if(options.hover=='cross')
return handleRowColHoverEvents;
else
return handleRowHoverEvents;
}
function getClickHandler(){
if(options.click=='column')
return optionsHandler.getColumnClick();
else if(options.click =='cross')
return optionsHandler.getRowColClick();
else
return optionsHandler.getRowClick();
}
return this.each(function() {
if (options.altColor!='none') {
var odd, even;
odd = even =(options.ignoreHeaders)? 'tr:has(td)': 'tr';
if(options.nested){
odd += ':nth-child(odd)';
even += ':nth-child(even)';
}
else{
odd+= ':odd';
even += ':even';
}
jQuery(this).find(even).css('background', options.bgColor);
jQuery(this).find(odd).css('background', options.altColor);
}
if(options.columns)
alert("The 'columns' option is deprecated.\nPlease use the 'click' and 'hover' options instead.");
if (jQuery(this).find('thead tr:last th').length > 0)
var cells = jQuery(this).find('td, thead tr:last th');
else
var cells = jQuery(this).find('td,th');
cells.clicked = null;
if (jQuery.inArray('last', options.banColumns) != -1){
if(this.rows.length>0){
options.banColumns.push(this.rows[0].cells.length-1);
}
}
optionsHandler.setHover();
clickHandler.tbl = this;
jQuery.each(cells, function(i, cell) {
handler.handleHoverEvents (this, cells);
$(this).bind("click", function(e) {
if(checkBan.call(this)) return;
if(options.banDataClick && isDataCell.call(this)) return;
handler.clickFunc.call(this, cells);
});
});
});
}

View File

@@ -69,6 +69,11 @@ caption {border:1px solid #e4e4e4; background:#efefef; margin:0; padding:5
.nobr {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fixed th, .fixed td {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.odd {background:white}
.even {background:#ECF6FC}
.hoover {background:#BCD4EC}
.clicked {background:yellow}
/*-----------------------LAYOUT SETTING----------------------------*/
.f-left {float:left; padding-left: 5px}
.f-right {float:right; padding-right:5px}