grid.htc

Windows Web脚本开发指南/(美) Dan Heflin, Todd Ney著 的源码

<PUBLIC: COMPONENT URN="grid">
<PUBLIC:PROPERTY NAME="column" GET="getColumnData" PUT="putColumnData"/>
<PUBLIC:PROPERTY NAME="cols" GET="getCols" PUT="putCols"/>
<PUBLIC:PROPERTY NAME="rows" GET="getRows"/>
<PUBLIC:PROPERTY NAME="colHeaders" GET="getColHeaders" PUT="putColHeaders"/>
<PUBLIC:PROPERTY NAME="showColHeaders" GET="getShowHeaders" PUT="putShowHeaders"/>
<PUBLIC:PROPERTY NAME="editable" GET="getEditable" PUT="putEditable"/>
<PUBLIC:PROPERTY NAME="colHeader" GET="getColHeader" PUT="putColHeader"/>
<PUBLIC:PROPERTY NAME="width" GET="getWidth" PUT="putWidth"/>
<PUBLIC:PROPERTY NAME="height" GET="getHeight" PUT="putHeight"/>
<PUBLIC:METHOD NAME="insertRow" />
<PUBLIC:METHOD NAME="deleteRow" />
<PUBLIC:METHOD NAME="loadGridData" />
<PUBLIC:METHOD NAME="getGridData" />
<PUBLIC:METHOD NAME="editColumnData" />
<PUBLIC:EVENT NAME="onStartEdit" ID="seID"/>
<PUBLIC:EVENT NAME="onEndEdit" ID="eeID"/>
<PUBLIC:ATTACH EVENT="ondocumentready" for="element" ONEVENT="ShowDocument()" />
<PUBLIC:ATTACH EVENT="onclick" for="element" ONEVENT="onClick()" />

<script language="JavaScript">
var vcols = 0;
var vlastSelecteedItem = null;
var vlastEditedItem = null;
var vcolHeaders = new Array();
var bolShowHeaders = true;
var bolEditable = true;
var vwidth = 100;
var vheight;
var vcellheight = 20;

function ShowDocument(){
var eTable;
var eTableHeader;
var eTableContainer;
var eTableHeaderContainer;
var newRow;
var headerRow;

	eTableHeaderContainer = document.createElement("<div id='" + element.id + "TableHeaderContainer' ></div>");
	eTableHeaderContainer.style.overflowY = 'auto';
	eTableHeaderContainer.style.width = vwidth + "%";
	element.insertBefore(eTableHeaderContainer, null);

	eTableHeader = document.createElement("<table id='" + element.id + "TableHeader' ></table>");
	eTableHeader.width = "100%";
	eTableHeader.style.borderWidth = 2;
	eTableHeader.style.borderBottomWidth = 0;
	eTableHeader.style.borderStyle = 'solid';
	eTableHeader.style.borderColor = 'black';
	eTableHeader.style.backgroundColor = 'silver';
	eTableHeader.style.borderCollapse = 'collapse';
	eTableHeader.style.tableLayout = 'fixed';
	buildRow(eTableHeader, 0);
	headerRow = eTableHeader.rows(0);
	if (vcolHeaders != 0){
		for (i = 0; i < vcolHeaders.length; i++){
			headerRow.children(i).style.borderStyle = 'inset';
			headerRow.children(i).style.borderWidth = '2';
			headerRow.children(i).innerText = vcolHeaders[i];
		}
	}
	if (!bolShowHeaders)
		eTableHeader.style.display = 'none';
		
	eTableHeaderContainer.insertBefore(eTableHeader, null);
	
	eTableContainer = document.createElement("<div id='" + element.id + "TableContainer' ></div>");
	eTableContainer.style.overflowY = 'auto';
	if (vheight != null)
		eTableContainer.style.height = vheight;
	eTableContainer.style.width = vwidth + "%";
	element.insertBefore(eTableContainer, null);
	
	eTable = document.createElement("<table id='" + element.id + "Table' ></table>");
	eTable.noWrap = true;
	eTable.style.wordBreak = 'keep-all'
	eTable.style.borderWidth = 2;
	eTable.style.borderStyle = 'solid';
	eTable.style.borderColor = 'black';
	eTable.style.borderCollapse = 'collapse';
	eTable.style.tableLayout = 'fixed';
	eTable.style.width = "100%";
	eTableContainer.insertBefore(eTable, null);

}
function insertRow(rowIndex){
	buildRow(eval(element.id + "Table"), rowIndex);
}
function buildRow(eleTableID, rowIndex){
var newRow;
var newCell;

	if (rowIndex == null)
		rowIndex = 0;
	if (eleTableID.rows.length < rowIndex - 1)
		rowIndex = 0;
	if (rowIndex <= -1){
		alert("Invalid insert row: " + rowIndex);
		return;
	}
	newRow = eleTableID.insertRow(rowIndex - 1);
	if (vcols > 0){
		for (i = 0; i < vcols; i++){
			newCell = newRow.insertCell(); 
			newCell.width = ((1 / vcols) * 100)  + "%";
			newCell.height = vcellheight;
			newCell.innerText = " ";
			newCell.style.borderWidth = 2;
			newCell.style.borderColor = 'black';
			newCell.style.borderStyle = 'solid';
		}
	}
}
function putCols(cols){
	if (vcols == 0)
		if (cols > 0){
			vcols = cols;
			header = eval(element.id + "TableHeader");
			header.removeChild(header.children(0));
			buildRow(header, 0);
		}
}
function getCols(){
	return vcols;
}
function onClick(){
	if (!bolEditable)
		return;
		
	if (window.event.srcElement.tagName == 'TD')
		if (window.event.srcElement.parentElement.parentElement.parentElement.id == eval(element.id + "Table").id){
			if (vlastEditedItem != null)
				if (!editCell(vlastEditedItem, true)){
					return;
				}
			if (editCell(window.event.srcElement, false))
				vlastEditedItem = window.event.srcElement;
		}
}
function editCell(ele, save){
var eInputTextBox;
var data;
var regExp = / /g;
var objEvent;

	if (save){
		data = vlastEditedItem.children(0).value;
		objEvent = createEventObject();
		objEvent.data = data;
		objEvent.result = true;
		eeID.fire(objEvent);
		if (objEvent.result){
			ele.removeChild(ele.children(0));
			vlastEditedItem = null;	
			ele.innerText = data;
			ele.title = data;
		}
		else{
			eval(element.id + "CellInputTextBox").focus();
			return false;
		}
	}
	else{
		objEvent = createEventObject();
		objEvent.data = ele.innerText;
		objEvent.result = true;
		seID.fire(objEvent);
		if (!objEvent.result)
			return false;

		eInputTextBox = document.createElement("<input style='border:0 none' type='text' id='" + element.id + "CellInputTextBox' ></input>");
		eInputTextBox.value = ele.innerText;
		eInputTextBox.style.width = "100%";
		eInputTextBox.style.height = vcellheight;
		ele.innerText = "";			
		ele.insertBefore(eInputTextBox, null);
		eInputTextBox.focus();
	}
	return true;
}
function getColHeaders(){
	return vcolHeaders.join(",");
}
function putcolHeaders(colHeaders){
var headerRow;
var j = 0;
var header;
	vcolHeaders = colHeaders.split(",");
	headerRow = eval(element.id + "TableHeader").rows(0);
	for (i = 0; i < vcols; i++){
		if (j <= i){
			if (j < vcolHeaders.length)
				headerRow.children(i).innerText = vcolHeaders[j];
			else
				headerRow.children(i).innerText = "";
			j++;
		}
		else
			headerRow.children(i).innerText = "";
	}
	header = eval(element.id + "TableHeader");
	if (bolShowHeaders)
		header.style.display = 'inline';
	else
		header.style.display = 'none';
}
function getColHeader(idx){
	if ((idx - 1 >= 0) && (idx <= cols)){
		headerRow = eval(element.id + "TableHeader").rows(0);
		return headerRow.children(idx - 1).innerText;						
	}
}
function putColHeader(idx, value){
var headerRow;

	if ((idx - 1 >= 0) && (idx <= cols)){
		headerRow = eval(element.id + "TableHeader").rows(0);
		headerRow.children(idx - 1).innerText = value;						
		if (vcolHeaders.length < idx)
			vcolHeaders.length = idx;
		vcolHeaders[idx - 1] = value;
	}
}
function getColumnData(rowIdx, colIdx){
var headerRow;
var rowCnt;

	rowCnt = eval(element.id + "Table").rows.length;
	if ((rowIdx - 1 >= 0) && (rowIdx <= rowCnt)){
		headerRow = eval(element.id + "Table").rows.item(rowIdx - 1);
		if ((colIdx - 1 >= 0) && (colIdx <= cols)){
			if (headerRow.children(colIdx - 1).children.length > 0)
				return vlastEditedItem.children(0).value;
			else
				return headerRow.children(colIdx - 1).innerText;
		}
	}
}
function putColumnData(rowIdx, colIdx, value){
var headerRow;
var rowCnt;

	rowCnt = eval(element.id + "Table").rows.length;
	if ((rowIdx - 1 >= 0) && (rowIdx <= rowCnt)){
		headerRow = eval(element.id + "Table").rows.item(rowIdx - 1);
		if ((colIdx - 1 >= 0) && (colIdx <= cols)){
			if (headerRow.children(colIdx - 1).children.length > 0)
				vlastEditedItem.children(0).value = value;
			else
				headerRow.children(colIdx - 1).innerText = value;						
		}
	}
}
function getShowHeaders(){
	return bolShowHeaders;
}
function putShowHeaders(value){
var data = new String;
var x;
var headerRow;
var i;
var j = 0;
	data = value;
	if (data.toLowerCase() == "true")
		bolShowHeaders = true;
	else
		bolShowHeaders = false;
	if (element.children.length != 0){
		if (element.children(0).children(element.id + "TableHeader") != null){
			if (bolShowHeaders){
				eval(element.id + "TableHeader").style.display = 'inline';
				headerRow = eval(element.id + "TableHeader").rows(0);
				for (i = 0; i < vcols; i++){
					if (j <= i){
						if (j < vcolHeaders.length)
							headerRow.children(i).innerText = vcolHeaders[j];
						else
							headerRow.children(i).innerText = "";
						j++;
					}
					else
						headerRow.children(i).innerText = "";
				}
			}
			else
				eval(element.id + "TableHeader").style.display = 'none';
		}	
	}
}
function getEditable(){
	return bolEditable;
}
function putEditable(value){
var data = new String;

	data = value;
	if (data.toLowerCase() == "true")
		bolEditable = true;
	else
		bolEditable = false;
}
function deleteRow(rowIndex){
var regExp;

	if (rowIndex == null) 
		return;
	regExp = / /g;
	if (rowIndex.replace(regExp, "") == "")
		return;
	if (eval(element.id + "Table").rows.length <= rowIndex - 1)
		return;

	objRow = eval(element.id + "Table").rows(rowIndex - 1);
	objRow.removeNode(true);
}
function getRows(){
	return eval(element.id + "Table").rows.length;
}
function getGridData(){
var data = new Array();
var i;
var j;
var idx = 0;
	
	if (vlastEditedItem != null)
		editCell(vlastEditedItem, true);

	for (i = 0; i < eval(element.id + "Table").rows.length; i++){
		row = eval(element.id + "Table").rows(i);
		for (j = 0; j < vcols; j++){
			data[idx] = row.cells(j).innerText; 
			idx++;
		}
	}
	return data;
}
function loadGridData(arrData){
var i;
var j;
var idx = 0;
var cntTblRow;
var row;
	
	if (vlastEditedItem != null)
		editCell(vlastEditedItem, true);

	cntTblRow = eval(element.id + "Table").rows.length;
	for (i = 0; i < arrData.length / vcols; i++){
		if (cntTblRow < i + 1)
			buildRow(eval(element.id + "Table"), 0);
		row = eval(element.id + "Table").rows(i);
		for (j = 0; j < vcols; j++){
			row.cells(j).innerText = arrData[idx]; 
			idx++;
		}
	}
}
function getWidth(){
	return eval(element.id + "TableHeader").style.width;
}
function putWidth(width){
	if (width > 100)
		width = 100;
	else{
		if (width < 10)
			width = 10;
	}
	
	vwidth = width;	
	if (element.children.length != 0){
		eval(element.id + "TableHeaderContainer").style.width = vwidth + "%";
		eval(element.id + "TableContainer").style.width = vwidth + "%";
	}	
}
function getHeight(){
	return eval(element.id + "Table").style.height;
}
function putHeight(height){
	if (height < 0)
		height = 30;
	
	vheight = height;	
	if (element.children.length != 0){
		eval(element.id + "TableContainer").style.height = height;
	}	
}
function editColumnData(rowIdx,colIdx){
var headerRow;
var rowCnt;

	if (!bolEditable)
		return;

	rowCnt = eval(element.id + "Table").rows.length;
	if ((rowIdx - 1 >= 0) && (rowIdx <= rowCnt)){
		headerRow = eval(element.id + "Table").rows.item(rowIdx - 1);
		if ((colIdx - 1 >= 0) && (colIdx <= cols)){
			if (headerRow.children(colIdx - 1).children.length > 0){
				eval(element.id + "CellInputTextBox").focus;
				return;
			}
			else{
				if (vlastEditedItem != null){
					if (editCell(vlastEditedItem, true))
						if (editCell(headerRow.children(colIdx - 1), false))
							vlastEditedItem = headerRow.children(colIdx - 1);
				}
				else{
					if (editCell(headerRow.children(colIdx - 1), false))
						vlastEditedItem = headerRow.children(colIdx - 1);
				}
			}
		}
	}
}
</script>
</PUBLIC: COMPONENT>