?? 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 = " ";
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);
}
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -