editabletable.js

选择和管理有价值客户及其关系的一种商业策略

var IPTTYPE_NORMAL = 0;
var IPTTYPE_SELECT = 1;
var IPTTYPE_DATE   = 2;
var IPTTYPE_PC     = 3;

var EDITMODE_DEFAULT    = 0;
var EDITMODE_MODIFYONLY = 1;

var _CurFocusInputObject = null;
var _CurFloattingObject = null;
var _CurInputItem = null;

function InputItem(name, type, rltvArray, width){
	this.name = name;
	this.type = type;

	this.width = (width == null ? 200 : width);

	this.rltvArray = rltvArray;
}

function ItemValue(id, name){
	this.id = id;
	this.name = name;
}

function _BindTable(sTabID, sArrInputFields, iEditMode){

	if(iEditMode == null) iEditMode = EDITMODE_DEFAULT;
	if(iEditMode == EDITMODE_MODIFYONLY) return;
	/* 在指定的 TABLE 最后一行追加功能按钮 */
	var oTab = eval(sTabID);
	var arrInputFields = eval(sArrInputFields);

	var nRows = oTab.rows.length;
	var oTR = oTab.insertRow(nRows);
	oTR.bgColor = "#ffffff";
	var oTD = oTR.insertCell();
	oTD.className = "liebiao";
	oTD.innerHTML = "<INPUT TYPE=BUTTON id=\"btnAddNew_" + sTabID + "\" CLASS=btnAddNew STYLE='width:100%' ONCLICK=_AddNewRow('" + sTabID + "','" + sArrInputFields + "') VALUE='+'>";
	oTD = oTR.insertCell();
	oTD.className = "liebiao";
	oTD.innerHTML = "&nbsp;";
	oTD.colSpan = arrInputFields.length;
	/*var oBtnAddNew;
	try{
		var oForm = oTab;
		while(oForm.tagName != "FORM") oForm = oForm.parentElement;
		oBtnAddNew = eval(oForm.id + ".btnAddNew_" + sTabID);
	}catch(e){
		oBtnAddNew = eval("btnAddNew_" + sTabID);
	}
	//oBtnAddNew.click();*/
}

function _AddNewRow(sTabID, sArrInputFields){

	var oTab = eval(sTabID);
	var arrInputFields = eval(sArrInputFields);

	var oTR = oTab.insertRow(oTab.rows.length - 1);
    oTR.bgColor = "#ffffff";
	var oTD = null;
	var sHtml = "";
	var sLastValue = "", sLastHiddenValue = "";
	oTR.style.cursor = "hand";   
	for(var i = 0; i < arrInputFields.length + 1; i++){
		oTD = oTR.insertCell();
		var rect = oTD.getBoundingClientRect();
		var nWidth = rect.right - rect.left;
		if(i == 0){
			//oTD.align = "right";
			oTD.name = "ORDERTD";
			oTD.className = "liebiao";
			sHtml = "<table style='width:100%;height:20px' border=0 cellspacing=0 cellpadding=0><tr><td align=center>"
				+ "<input name=\"XH\" style='width:100%;font-weight:bold;border:0px solid;text-align:center' readonly value='" + (oTR.rowIndex-1 ) + "'>"
				+ "</td><td width=20px>"
				+ "<INPUT type=\"button\" onclick=_RemoveCurRow()  value=\"X\" style='width:100%;height:100%'>"
				+ "</td></tr></table>";
		}
		else{
			if(arrInputFields[i-1].type == IPTTYPE_DATE){
			if(oTab.rows(oTR.rowIndex).cells(0).name == "ORDERTD")
				try{
					sLastValue = oTab.rows(oTR.rowIndex).cells(i).childNodes(0).value;
				}catch(e){sLastValue = "";}
			sHtml = "<INPUT TYPE=TEXT"				
				+ " NAME=\"" + arrInputFields[i - 1].name + "\""
				+ " CLASS=inputItem value=\"" + sLastValue + "\" style='width:100%'>";
			}
			else{
				if(oTab.rows(oTR.rowIndex).cells(0).name == "ORDERTD")
				try{
					sLastValue = oTab.rows(oTR.rowIndex).cells(i).childNodes(0).value;
				}catch(e){sLastValue = "";}
			sHtml = "<INPUT"
				+ " ONCLICK=_LongInputBox(this,'" + sTabID + "','" + sArrInputFields + "'," + (i - 1) + ")"
				+ " ONMOUSEOVER=\"this.title=this.value\""
				+ " NAME=\"" + ((arrInputFields[i - 1].type == IPTTYPE_SELECT || arrInputFields[i - 1].type == IPTTYPE_PC ? "TEMP_" : "")) + arrInputFields[i - 1].name + "\""
				+ " CLASS=inputItem value=\"" + sLastValue + "\" style='width:100%'>";
			}
			
			if(arrInputFields[i - 1].type == IPTTYPE_SELECT || arrInputFields[i - 1].type == IPTTYPE_PC){
				if(oTab.rows(oTR.rowIndex).cells(0).name == "ORDERTD")
					try{
						sLastHiddenValue = oTab.rows(oTR.rowIndex).cells(i).childNodes(1).value;
					}catch(e){sLastHiddenValue = "";}

				sHtml += "<INPUT size=1 TYPE=HIDDEN NAME=\"" + arrInputFields[i - 1].name + "\""
					+ " VALUE=\"" + sLastHiddenValue + "\""
					+ ">"
			}

		}
		oTD.innerHTML = sHtml;
	}
}

function _LongInputBox(oInput, sTabID, sArrInputFields, iField){
	_SaveValueToTargetObject();

	var oTab = eval(sTabID);
	var arrInputFields = eval(sArrInputFields);
	_CurFocusInputObject = oInput;
	_CurInputItem = arrInputFields[iField];

	if(_CurFocusInputObject.style.width == "100%"){
		var oTD = oInput.parentElement;
		var rect = oTD.getBoundingClientRect();
		var nWidth = rect.right - rect.left;
		_CurFocusInputObject.style.pixelWidth = nWidth;
	}

	switch(_CurInputItem.type){
		case IPTTYPE_NORMAL:
			_ShowNormalBox(sArrInputFields, iField);
			break;
		case IPTTYPE_SELECT:
			_ShowSelectBox(sArrInputFields, iField);
			break;
		case IPTTYPE_DATE:
			selectQustion(_CurFocusInputObject.name,'');
			break;
		case IPTTYPE_PC:
			PCSelector(_CurFocusInputObject, arrProvince, arrCities);
			break;
	}
}

function _ShowNormalBox(sArrInputFields, iField){

	var arrInputFields = eval(sArrInputFields);

	_CurFloattingObject = document.createElement("INPUT");
	_CurFloattingObject.style.pixelWidth = arrInputFields[iField].width;
	_CurFloattingObject.style.backgroundColor = "RGB(255,255,205)";
	_CurFloattingObject.style.border = "1px solid gray";
	_CurFloattingObject.style.filter = "progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#aaaaaa,strength=2)";
	_CurFloattingObject.value = _CurFocusInputObject.value;

	document.body.insertBefore(_CurFloattingObject);
	//_CurFocusInputObject.insertAdjacentElement("afterEnd", _CurFloattingObject);
	_PlaceObject();
	_CurFloattingObject.select();
}

function _ShowSelectBox(sArrInputFields, iField){

	var arrInputFields = eval(sArrInputFields);

	_CurFloattingObject = document.createElement("SELECT");
	_CurFloattingObject.attachEvent("onchange", _SaveValueToTargetObject);
	var arrRltv = arrInputFields[iField].rltvArray;
	var option = null;

	_CurFloattingObject.style.visibility = "hidden";
	document.body.insertBefore(_CurFloattingObject);
	for(var i = 0; i < arrRltv.length; i++)
		_CurFloattingObject.options[_CurFloattingObject.length] = new Option(arrRltv[i].name, arrRltv[i].id, 0, 0);

	//_CurFocusInputObject.insertAdjacentElement("beforeEnd", _CurFloattingObject);

	_PlaceObject();
	_CurFloattingObject.style.visibility = "visible";

	_CurFloattingObject.style.backgroundColor = "RGB(255,255,205)";
	_CurFloattingObject.style.pixelLeft -= 0;
	_CurFloattingObject.style.pixelTop -= 1;

	var rect1 = _CurFocusInputObject.getBoundingClientRect();
	var rect2 = _CurFloattingObject.getBoundingClientRect();
	if(rect2.right - rect2.left < rect1.right - rect1.left)
		_CurFloattingObject.style.pixelWidth = rect1.right - rect1.left + 2;

	_CurFloattingObject.value = _CurFocusInputObject.parentElement.childNodes(1).value;
	_CurFloattingObject.focus();

}

function _PlaceObject(){
	var rect = _CurFocusInputObject.getBoundingClientRect();
	_CurFloattingObject.style.position = "absolute";
	_CurFloattingObject.style.pixelLeft = rect.left + document.body.scrollLeft;
	_CurFloattingObject.style.pixelTop = rect.top + document.body.scrollTop;

	var _oRect = _CurFloattingObject.getBoundingClientRect();
	var oBodyRect = document.body.getBoundingClientRect();
	if(_oRect.right > document.body.clientWidth){
		_CurFloattingObject.style.pixelLeft -= (_oRect.right - document.body.clientWidth);
	}

}

function _RemoveCurRow(){

	_SaveValueToTargetObject();
	if(!confirm("确定要删除吗?")) return;
	var e = event.srcElement;
	while(e.tagName != "TR") e = e.parentElement;
	e = e.parentElement;
	while(e.tagName != "TR") e = e.parentElement;
	var oTab = e.parentElement;

    e.removeNode(true);
	
	//_ReOrder(oTab);
}

function _ReOrder(oTab){

	var oTab = eval(oTab);
	var nRows = oTab.rows.length;
	var oTD;
	var sHtml;
	for(var i = 0, j = 1; i < nRows; i++){
		oTD = oTab.rows(i).cells(0);
		if(oTD.name == "ORDERTD"){
			sHtml = "<table style='width:100%;height:20px' border=0 cellspacing=0 cellpadding=0><tr><td align=center>"
				+ "<input name=\"XH\" style='width:100%;font-weight:bold;border:0px solid;text-align:center' readonly value='" + (j++) + "'>"
				+ "</td><td width=20px>"
				+ "<INPUT type=\"button\" onclick=_RemoveCurRow()  value=\"X\" style='width:100%;height:100%' id=\"button\"1 name=\"button\"1>"
				+ "</td></tr></table>";
			oTD.innerHTML = sHtml;
		}
	}
}

function _GetTotalRecords(oTab){
    var count = 0;
    for(var i = 0; i < oTab.rows.length; i++){
        if(oTab.rows(i).cells(0).name == "ORDERTD")
            count++;
    }
    return count;
}

function _mouseOverTR(){
	try{
		var e = event.srcElement;
		while(e.tagName != "TR") e = e.parentElement;
		e.cells(0).childNodes(0).style.display = "inline";
	}catch(e){}
}

function _mouseOutTR(){
	try{
		var e = event.srcElement;
		while(e.tagName != "TR") e = e.parentElement;
		e.cells(0).childNodes(0).style.display = "none";
	}catch(e){}
}

function _SaveValueToTargetObject(){
	if(_CurFocusInputObject == null || _CurFloattingObject == null || _CurInputItem == null) return;
	switch(_CurInputItem.type){
		case IPTTYPE_NORMAL:
			_CurFocusInputObject.value = _CurFloattingObject.value;
			break;
		case IPTTYPE_SELECT:
			_CurFocusInputObject.parentElement.childNodes(1).value = _CurFloattingObject.value;
			try{
				_CurFocusInputObject.value = _CurFloattingObject.options[_CurFloattingObject.selectedIndex].text;
			}catch(e){
				_CurFocusInputObject.value = "";
			}
			break;
		case IPTTYPE_DATE:
		case IPTTYPE_PC:
			if(_SelProvince != null) _SelProvince.removeNode(true);
			if(_SelCity != null) _SelCity.removeNode(true);
			break;
	}
	_CurInputItem = null;
	_CurFloattingObject.removeNode(true);
	_CurFocusInputObject = null;

}
function _WhenKeyPress(){
	if(event.keyCode == 13)
		_SaveValueToTargetObject();
}

function _WhenClickBody(){
	var e = event.srcElement;
	if(e != _CurFocusInputObject && e != _SelProvince && e!= _SelCity){
		try{
			if(_SelProvince != null) _SelProvince.removeNode(true);
			if(_SelCity != null) _SelCity.removeNode(true);
		}catch(e){}
	}
	if(e.className == "inputItem"
		|| e == _CurFloattingObject
		|| e == _SelProvince
		|| e ==_SelCity
		) return;
	_SaveValueToTargetObject();
}

var _SelProvince = null;
var _SelCity = null;
var _ArrProvinces = null;
var _ArrCities = null;
function PCSelector(oTrgt, arrProvinces, arrCities){

	if(_SelProvince != null) _SelProvince.removeNode(true);
	if(_SelCity != null) _SelCity.removeNode(true);

	_ArrProvinces = arrProvinces;
	_ArrCities = arrCities;
	_CurFocusInputObject = oTrgt;
	var oInput = _CurFocusInputObject;//oTrgt;
	//alert(oInput);
	//oInput = oTrgt;
	var oHiddenInput = oInput.parentElement.childNodes(1);
	var oHiddenInputValue = oHiddenInput.value;
	if(oHiddenInputValue == null) oHiddenInputValue = "";

	var sProvince = oHiddenInputValue.substring(0, 2);
	var sCity = oHiddenInputValue;//.substring(2, 6);
	if(sProvince == "") sProvince = "";
	//alert("[" + sProvince + "]:" + sCity);

	_SelProvince = document.createElement("SELECT");
	document.body.insertBefore(_SelProvince);
	_SelProvince.style.display = "none";
	_SelProvince.style.position = "absolute";
	_SelProvince.style.backgroundColor = "RGB(255,255,205)";
	_SelProvince.attachEvent("onchange", _FillCity);

	_CurFloattingObject = _SelProvince;

	for(var i = 0; i < arrProvinces.length; i++){
		_SelProvince.options[_SelProvince.length] = new Option(_ArrProvinces[i].name, _ArrProvinces[i].id, 0, 0);
	}

	//_SelProvince.focus();

	//document.body.insertBefore(_SelProvince);

	_SelCity = document.createElement("SELECT");
	document.body.insertBefore(_SelCity);
	_SelCity.style.display = "none";
	_SelCity.attachEvent("onchange", _GetFullCity);
	_SelCity.style.position = "absolute";
	_SelCity.style.backgroundColor = "RGB(255,255,205)";

	var rect = oInput.getBoundingClientRect();
	_SelProvince.style.pixelLeft = rect.left - 0 + document.body.scrollLeft;
	_SelProvince.style.pixelTop = rect.top - 1 + document.body.scrollTop;
	_SelProvince.value = sProvince;
	_SelProvince.style.display = "inline";

	rect = _SelProvince.getBoundingClientRect();
	_SelCity.style.pixelLeft = rect.right - 20 + document.body.scrollLeft;
	_SelCity.style.pixelTop = rect.top - 0 + document.body.scrollTop;
	//_SelCity.style.display = "none";
	if(sCity != ""){
		//_SelCity.style.display = "inline";
		_FillCity();
		_SelCity.value = sCity;
	}

	//_SelCity.style.display = "inline";
}

function _FillCity(){
	_SelCity.style.display = "inline";
	//alert(event.srcElement.tagName);
	//alert(_ArrCities[_SelProvince.selectedIndex].length);
	if(_SelProvince.value == ""){
		//alert("delete now");
		_CurFocusInputObject.value = "";
		_CurFocusInputObject.parentElement.childNodes(1).value = "";
		_SelProvince.removeNode(true);
		_SelCity.removeNode(true);
		return;
	}
	var iProvince = _SelProvince.selectedIndex;
	for(var i = _SelCity.length; i >= 0; i--)
		_SelCity.options[i] = null;
	for(var i = 0; i < _ArrCities[iProvince].length; i++){
		_SelCity.options[_SelCity.length] = new Option(_ArrCities[iProvince][i].name, _ArrCities[iProvince][i].id, 0, 0);
	}
	_SelCity.value = "";
}

function _GetFullCity(){
	_CurFocusInputObject.value = _SelProvince.options[_SelProvince.selectedIndex].text
		+ _SelCity.options[_SelCity.selectedIndex].text;

	var oHiddenInput = 	_CurFocusInputObject.parentElement.childNodes(1);
	oHiddenInput.value = _SelCity.value;//_SelProvince.value + "" + _SelCity.value;

	_SelProvince.removeNode(true);
	_SelCity.removeNode(true);
}