閱讀部落: 2月 2008

將 table 的一些操作方法，整合成一個簡單的表格處理類別，以簡化表格的操作。

使其能動態地產生表格，或改變表格的內容。

ID	Name	Age

傳入一個已有標題列表格的 id 到 XPTable。
setDataSrc() 可以傳入一個二維陣列來當做此表格的資料來源(data source)，
然後使用bind()方法，將此資料來源繫結到表格。
如下的操作：

myobj = new XPTable("t1");

//資料來源。(為二維陣列)
ary = [
["001","nelson","29"],
["002","xinchin","32"],
["003","yiider","15"],
["004","hywel","43"],
["005","shinji","23"],
["006","keigo","35"],
["007","shinichi","32"],
["008","taira","26"]
];
myobj.setDataSrc(ary); //設定表格的資料來源
myobj.bind(); //表格繫結至資料來源

在表格的任一資料列上(除標題列外)，連續點擊滑鼠左鍵兩下，可刪除該資料列。

selectRule(x,op,y)方法，可以篩選表格中的結果。
x 參數：要以表格的第幾個欄位來當做篩選的比較物件。
op 參數：比較的運算子(>,<,>=,<=,==,!=)。
y 參數：比較的數值或內容。

操作範例如下：

selectRule(2,">=",39);
表格中，第二欄位(欄位數由0開始計數)中內容值大於等於(>=) 39 的資料列，則顯示於表格中，不符合條件的資料列則刪除。

延伸發展：

目前的情況，是需要傳入一個表格的id，也就是說，必須先建立一個表格。
可以將程式修改為：由表格操作類別 XPTable 來自行建之表格的元素。使用者只需傳入必要的參數，如欄位數...。
可加入「排序」的功能。
目前的資料來源只能是二維陣列，其實可以增加其它的資料型態。

主要程式碼：

myobj = new XPTable("t1");

//資料來源。(為二維陣列)
	ary = [
		["001","nelson","29"],
		["002","xinchin","32"],
		["003","yiider","15"],
		["004","hywel","43"],
		["005","shinji","23"],
		["006","keigo","35"],
		["007","shinichi","32"],
		["008","taira","26"]	
	];

myobj.setDataSrc(ary);	//設定表格的資料來源
}

//表格處理類別
function XPTable(pTable){

var theTable = document.getElementById(pTable);
	var numCols = theTable.rows[0].cells.length;
	var datasrc;
	
	theTable.ondblclick = function(){

//此處判斷瀏灠器是為 IE 或 FireFox ...
		if(arguments.length >0 && arguments[0].target !=""){
			//FireFox
			var idx = arguments[0].target.parentNode.rowIndex;
		}else{
			//IE
			var idx = event.srcElement.parentElement.rowIndex;
		}

if(idx ==0){
			return false;
		}
		
		if(confirm("確定刪除此列？")){
			theTable.deleteRow(idx);
		}

}
	
	
	//public
	//增加一列
	this.addRow = function(ary){

var newRow = theTable.insertRow(theTable.rows.length);		
		for(var i=0; i<numCols; i++){
			var cell = theTable.rows[theTable.rows.length-1].insertCell(i);
			cell.innerHTML = ary[i];		
		}
	
	}
	
	//public
	//設定資料來源
	this.setDataSrc = function(ary){
		datasrc = ary;
	}

//public
	//繫給資料來源至表格
	this.bind = function(){
		clearAll();
		for(var i=0; i<datasrc.length; i++){
			this.addRow(datasrc[i]);
		}	
	}
	
	//public
	//設定篩選的條件
	this.selectRule = function(x,op,y){
		clearAll();
		for(var i=0; i<datasrc.length; i++){
			if(eval("datasrc[i][x] " + op + " y ")   ){
				this.addRow(datasrc[i]);
			}			
		}		
	}
	
	//private
	//清除所有列，除了第一列的標題不刪除。
	var clearAll = function(){
		while(theTable.rows.length != 1){
			theTable.deleteRow(theTable.rows.length-1);
		}		
	}
	
}

function tableSelect(){
	var x = document.getElementById("lstCol");
	var op = document.getElementById("lstOP");
	var y = document.getElementById("txtValue");
	
	//進行表格的資料篩選
	myobj.selectRule(x.selectedIndex,op.options[op.selectedIndex].value,y.value);
	
}

function reBind(){
	myobj.bind();	//表格重新繫結至資料來源
}

</script>

贊助廣告

閱讀部落

2008年2月26日星期二

線上製作月曆

JavaScript表格：動態表格

2008年2月26日 星期二

線上製作月曆

JavaScript表格：動態表格

2008年2月26日星期二