めも
.TableView
{
border : 1px solid black;
}
.TableView table{
table-layout : fixed;
border-collapse : collapse;
}
.TableView .TableViewPositioner
{
}
.TableViewHeader
{
border: 1px solid #000000;
}
.TableViewHeader{
background-color: #D0D0DD;
color : #414141;
}
.TableView .TableViewHeader th{
color : #414141;
font-weight : bold;
text-align : center;
border-color: #000000;
border-width : 1px;
border-style : solid;
}
.TableView td{
border: 1px solid #A1A1A1;
padding : 2px;
}
.TableViewRow {
background-color : #FAFAFF ;
color : #313131;
}
.TableViewSelected{
background-color : #A0A0CC;
color : white;
}
.TableViewHover{
background-color : #F4F4FF;
color : #313131;
}
js
/**
* TableView.js
* よりシンプルなテーブルスタイルのView
* 用途 : セル幅をパーセント指定にしたい
* YAHOO.ext.widget.grid よりシンプルでよい
* 単純な並べ替えに対応したい
*
* usage :
* 1)以下のようにマークアップする。
<div id="tableView1">
<div>
<table >
<thead>
<tr>
<th rowspan="2">th1</th>
<th colspan="2">names</th>
<th rowspan="2">th4</th>
</tr>
<tr>
<th >th2</th>
<th >th3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
* 2)スタイルシートとjsファイルの取り込み
<link rel="stylesheet" type="text/css" href="../javascript/cjs/css/TableView.css" />
<script type="text/javascript" src="../javascript/common.js"></script>
<script type="text/javascript" src="../javascript/cjs/util.js"></script>
<script type="text/javascript" src="../javascript/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../javascript/cjs/TableView.js"></script>
*ここにあげた全てのファイルが必要
3)TableView構築
//列定義
var columns = [
{ DataField : "CLIENT_CODE",CssClass : "Col0" },
{ DataField : "NAME",CssClass : "Col1" },
{ DataField : "OFFICIAL_NAME",CssClass :"Col2" },
{ DataField : "UPDATE_DATE_TIME",CssClass :"Col3" }
];
//構築
grid = new CJS.widget.TableView("tableView1",this.columns);
//データソース設定
grid.DataSource = data.Rows;
//データを反映
grid.DataBind();
*
*/
if(typeof(CJS) == "undefined") CJS = {};
if(typeof(CJS.widget) == "undefined") CJS.widget = {};
CJS.widget.TableView = function(elm,columns){
this.init(elm,columns);
}
CJS.widget.TableView.prototype = {
Columns : null,
DataSource : null,
View : null,
Positioner : null,
Table : null,
THead : null,
TBody : null ,
CurrentRow : -1,
findChildElements : function(parent,childTag){
var childElements=[];
var children = parent.childNodes;
for(var i = 0; i < children.length ; i++){
if(children[i].nodeType == 3) continue;
var tag = children[i].tagName.toLowerCase();
if(tag == childTag){
childElements[childElements.length] = children[i];
}
}
return childElements;
},
init : function(elm,columns){
this.Columns = columns;
if(typeof elm == "string"){
this.View = document.getElementById(elm);
}
else{
this.View = elm;
}
this.View.className = "TableView";
this.Positioner = this.findChildElements(this.View,"div")[0];
this.Positioner.className = "TableViewPositioner";
this.Table = this.findChildElements(this.Positioner,"table")[0];
this.Table.className = "TableViewTable";
this.TBody = this.findChildElements(this.Table,"tbody")[0];
this.THead = this.findChildElements(this.Table,"thead")[0];
this.THead.className = "TableViewHeader";
},
DataBind : function(){
if(!this.DataSource) return;
this.Table.removeChild(this.TBody);
this.TBody = document.createElement("tbody");
var df = document.createDocumentFragment();
for(var row = 0;row < this.DataSource.length;row++){
var rowData = this.DataSource[row];
var tr = this.RenderRow(row,rowData);
tr.rowNumber = row;
tr.id = "tr_"+row;
df.appendChild(tr);
YAHOO.util.Event.addListener(tr,"click",this.Row_onClick,this,true);
YAHOO.util.Event.addListener(tr,"mouseover",this.Row_onMouseOver,this,true);
YAHOO.util.Event.addListener(tr,"mouseout",this.Row_onMouseOut,this,true);
YAHOO.util.Dom.addClass(tr,"TableViewRow");
tr = null;
}
this.TBody.appendChild(df);
this.Table.appendChild(this.TBody);
df = null;
},
RenderRow : function(row,rowData){
tr = document.createElement("tr");
var cells = [];
for(var col = 0; col < this.Columns.length;col++){
cell = document.createElement("td");
cell.id = "cell_" + row + "_" + col;
cell.className = this.Columns[col].CssClass;
cells[col] = cell;
if(this.RowDataBound) {
}
else{
var colData = this.Columns[col];
SetElementText(cell,HtmlSafe( rowData[colData.DataField] ));
}
tr.appendChild(cell);
}
if(this.RowDataBound) {
var args = {
DataItem : this.DataSource[row],
Cells : cells
};
this.RowDataBound(this,args);
}
return tr;
}
,Row_onClick : function (e){
var target = YAHOO.util.Event.getTarget(e);
var tr = target.parentNode;
var r = tr.rowNumber;
if(this.CurrentRow < 0){
YAHOO.util.Dom.removeClass(tr,"TableViewHover");
YAHOO.util.Dom.addClass(tr,"TableViewSelected");
this.CurrentRow = r;
}
else{
var prevTr = this.TBody.childNodes[this.CurrentRow];
YAHOO.util.Dom.removeClass(prevTr,"TableViewSelected");
YAHOO.util.Dom.removeClass(tr,"TableViewHover");
YAHOO.util.Dom.addClass(tr,"TableViewSelected");
this.CurrentRow = r;
}
}
,Row_onMouseOver : function (e){
var tr = YAHOO.util.Event.getTarget(e).parentNode;
YAHOO.util.Dom.addClass(tr,"TableViewHover");
}
,Row_onMouseOut : function (e){
var tr = YAHOO.util.Event.getTarget(e).parentNode;
YAHOO.util.Dom.removeClass(tr,"TableViewHover");
},
sort : function(sortFieldName){
var colname = "NAME";
var fn = function(cells, cells2){
var v1 = cells[colname];
var v2 = cells2[colname];
if(v1 < v2)
return -1;
if(v1 > v2)
return +1;
return 0;
};
CJS.util.qsort(this.DataSource,fn);
this.DataBind();
}
,MoveDown : function(){
var r = this.CurrentRow;
if(r >= (this.DataSource.length -1) ) return;
var downData = this.DataSource[r];
this.DataSource.splice(r ,1);
var downTr = this.TBody.childNodes[r];
this.TBody.removeChild(downTr);
this.DataSource.splice(r + 1,0,downData);
var swapTr = this.TBody.childNodes[r];
var nodeBefore = this.TBody.childNodes[r+ 1];
if(nodeBefore) this.TBody.insertBefore(downTr,nodeBefore);
else this.TBody.appendChild(downTr);
downTr.rowNumber = r + 1;
swapTr.rowNumber = r;
this.CurrentRow = r + 1;
}
,MoveUp : function(){
var r = this.CurrentRow;
if(r <= 0 ) return;
r = r -1;
var downData = this.DataSource[r];
this.DataSource.splice(r ,1);
var downTr = this.TBody.childNodes[r];
this.TBody.removeChild(downTr);
this.DataSource.splice(r + 1,0,downData);
var swapTr = this.TBody.childNodes[r];
var nodeBefore = this.TBody.childNodes[r+ 1];
if(nodeBefore) this.TBody.insertBefore(downTr,nodeBefore);
else this.TBody.appendChild(downTr);
downTr.rowNumber = r + 1;
swapTr.rowNumber = r;
this.CurrentRow = r ;
}
}
