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="columnType" GET="getColumnType" PUT="putColumnType" />
<PUBLIC:PROPERTY NAME="colHeader" GET="getColHeader" PUT="putColHeader"/>
<PUBLIC:PROPERTY NAME="colTypes" GET="getColTypes" PUT="putColTypes"/>
<PUBLIC:PROPERTY NAME="colWidths" GET="getColWidths" PUT="putColWidths"/>
<PUBLIC:PROPERTY NAME="colType" GET="getColType" PUT="putColType"/>
<PUBLIC:PROPERTY NAME="width" GET="getWidth" PUT="putWidth"/>
<PUBLIC:PROPERTY NAME="height" GET="getHeight" PUT="putHeight"/>
<PUBLIC:PROPERTY NAME="dropDownData" GET="getDropDownData" PUT="putDropDownData"/>
<PUBLIC:METHOD NAME="insertRow" />
<PUBLIC:METHOD NAME="deleteRow" />
<PUBLIC:METHOD NAME="loadGridData" />
<PUBLIC:METHOD NAME="getGridData" />
<PUBLIC:METHOD NAME="editColumnData" />
<PUBLIC:METHOD NAME="setCellFocus" />
<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 = 1;
var vlastSelecteedItem = null;
var vlastEditedItem = null;
var vcolHeaders = new Array();
var vcolTypes = new Array();
var vcolWidths = new Array();
var bolShowHeaders = true;
var bolEditable = true;
var vwidth = 100;
var vheight;
var vDropDownData = null;

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' cellpadding='0' ></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, true);
	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).innerHTML = "<B>" + vcolHeaders[i] + "</B>";
		}
	}
	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, false);
}
function buildRow(eleTableID, rowIndex, headerRow){
var newRow;
var newCell;
var container;

	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();
			if (vcolWidths.length > i)
			  newCell.width = vcolWidths[i];
			else  
			  newCell.width = ((1 / vcols) * 100)  + "%";
			newCell.innerText = " ";
			newCell.style.borderWidth = 2;
			newCell.style.borderColor = 'black';
			newCell.style.borderStyle = 'solid';
			if (vcolTypes[i] == "textArea" && headerRow == false)
				newRow.height = 50; 				
		}
	}
}
function putCols(cols){
	if (vcols == 0)
		if (cols > 0)
			vcols = cols;
}
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 setCellFocus(rowIdx, colIdx){
	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 (vlastEditedItem != null){
				if (!editCell(vlastEditedItem, true)){
					return;
				}
			}
			if (editCell(headerRow.children(colIdx - 1), false))
				vlastEditedItem =headerRow.children(colIdx - 1);
		}
	}
}
function editCell(ele, save){
var eInputItem;
var data = "";
var regExp = / /g;
var objEvent;
var currentValue;

	if (save){
		switch (vcolTypes[vlastEditedItem.cellIndex]){
			case "dropDown":
 				var selected = vlastEditedItem.children(0).options.selectedIndex;
				if (selected >= 0){
  					data = vlastEditedItem.children(0).options[selected].text; 
					currentValue = vlastEditedItem.children(0).options[selected].value; 
				}
				break;
			case "textArea":
				data = vlastEditedItem.children(0).innerText;
				break;
			default:
 				data = vlastEditedItem.children(0).value;
				break;

		}
		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.currentValue = currentValue;
			ele.title = data;
		}
		else{
			eval(element.id + "CellInputItem").focus();
			return false;
		}
	}
	else{
		objEvent = createEventObject();
		objEvent.data = ele.innerText;
		objEvent.column = ele.cellIndex + 1;
		objEvent.row = ele.parentElement.rowIndex + 1;
		objEvent.result = true;
		seID.fire(objEvent);
		if (!objEvent.result)
			return false;
		switch (vcolTypes[ele.cellIndex]){
			case "dropDown":
			        eInputItem = document.createElement("<select id='" + element.id + "CellInputItem' ></select>");		
				eInputItem.style.height = "100%";
				eInputItem.style.position = "absolute";
				var bottom = ele.clientHeight - 2;
				var right = ele.clientWidth - 1;
				eInputItem.style.clip = "rect(2 " + right + " " + bottom + " 2)";
				break;
			case "textArea":
		        eInputItem = document.createElement("<textarea style='border:0 none' id='" + element.id + "CellInputItem' ></textArea>");				
				eInputItem.innerText = ele.innerText;
				break;
			default:
				eInputItem = document.createElement("<input style='border:0 none' type='text' id='" + element.id + "CellInputItem' ></input>");
				eInputItem.value = ele.innerText;
				break;
		}
		
		eInputItem.style.width = "100%";
		ele.innerText = "";
		ele.insertBefore(eInputItem, null);
		if ((vcolTypes[ele.cellIndex]) == "dropDown"){
			var bottom = eInputItem.clientHeight - 2;
			var right = ele.clientWidth - 2;
			eInputItem.style.clip = "rect(2 " + right + " " + bottom + " 2)";
			var currentValue = ele.currentValue;
			addItemsToDropDown(ele.cellIndex, currentValue, eInputItem);
		}
		if ((vcolTypes[ele.cellIndex]) == "textArea"){
			eInputItem.style.height = ele.clientHeight;
		} 
		eInputItem.focus();	
	}
	return true;
}
function addItemsToDropDown(columnIndex, currentValue, dropDown){
	var value;
	var display;
	if (vDropDownData != null){
		var index = columnIndex + 1;
		var items = vDropDownData.selectNodes("//column[@columnIndex='" + index + "']/item");		
		var currentItem = items.nextNode();
		while (currentItem != null){
			value = currentItem.getAttribute("value");
			display = currentItem.text;
			if (value == currentValue)
				addItemToList(dropDown, value, display, true); 			
			else
				addItemToList(dropDown, value, display, false); 							
			currentItem = items.nextNode();
		}
	}  
}

function addItemToList(list, value, display, selected){
	var opt;

	if (value != "" && value != null) {
		opt = document.createElement("OPTION");
		list.options.add(opt);	
		opt.innerText = display;
		opt.value = value;
		opt.selected = selected;
	}
}
function getColHeaders(){
	return vcolHeaders.join(",");
}
function putcolHeaders(colHeaders){
	if (vcolHeaders.length == 0){
		vcolHeaders = colHeaders.split(",");
		vcols = vcolHeaders.length;
	}
}
function getColHeader(idx){
	if ((idx - 1 >= 0) && (idx <= cols)){
		return vcolHeaders(idx - 1);						
	}