thinkyu/教育訓練系統/Web/Utility/LookupList.js

//--------------------------------------------
//  要掛在回傳物件上的 method 程式碼
//--------------------------------------------
function JSON_Dataset_FieldValue_Method(index, fieldName)
{
  var i = this.Cols[fieldName];
  if (typeof i != "undefined")
  {
    if (typeof this.Rows[index] != "undefined")
      return this.Rows[index][i];
  else
    return null;
  }
}

//--------------------------------------------
//  取得 XMLHTTP 物件參考
//--------------------------------------------
function initRequest()
{
  var A=null;
  try
  {
    A = new ActiveXObject("Msxml2.XMLHTTP")
  } 
  catch(e) 
  {
    try
    {
      A = new ActiveXObject("Microsoft.XMLHTTP")
    } 
    catch(oc) 
    {
      A = null
    }
  }
  
  if (!A && typeof XMLHttpRequest != "undefined")
  {
    A = new XMLHttpRequest()
  }
  
  if (!A && window.createRequest) 
  {
    try 
    {
      A = window.createRequest();
    } catch (e) 
    {
      A = null;
    }
  }
  
  return A
}

//--------------------------------------------
//  取得網頁上元件的 X 座標
//--------------------------------------------
function offsetLeft(obj)
{   
  x = obj.offsetLeft;
  for (objParent = obj.offsetParent; objParent; objParent = objParent.offsetParent)
    x += objParent.offsetLeft;
  return x;
}

//--------------------------------------------
//  取得網頁上元件的 Y 座標
//--------------------------------------------
function offsetTop(obj)
{ 
    y = obj.offsetTop;
    for(objParent = obj.offsetParent; objParent; objParent = objParent.offsetParent)
      y += objParent.offsetTop;
    return y;
} 

//--------------------------------------------
//  改顏色
//--------------------------------------------
function changeColor(obj, bgColor, txtColor)
{
  obj.style.backgroundColor = bgColor; 
  obj.style.color = txtColor;
}


//--------------------------------------------
//  顯示下拉清單
//--------------------------------------------
function ShowPickup1()
{
  XX_SELECT_DIV.style.display = "block";
  XX_SELECT_DIV.style.border = "solid 1px black";
  XX_SELECT_DIV.style.padding = "3px";
  XX_SELECT_DIV.style.backgroundColor = "#FFF";

  XX_SELECT_DIV.style.left = offsetLeft(objValue) + "px";
  XX_SELECT_DIV.style.top = offsetTop(objValue) + objValue.offsetHeight + "px";

  // 調整位置，不要超過螢幕的右邊與下邊
  if (offsetLeft(objValue) + XX_SELECT_DIV.offsetWidth > document.body.clientWidth) {
    XX_SELECT_DIV.style.left = document.body.clientWidth - XX_SELECT_DIV.offsetWidth + "px";
  }
  if (offsetTop(objValue) + objValue.offsetHeight + XX_SELECT_DIV.offsetHeight > document.body.clientHeight) {
    XX_SELECT_DIV.style.top = document.body.clientHeight - XX_SELECT_DIV.offsetHeight + "px";
  }

  XX_SELECT_MASK.style.left = XX_SELECT_DIV.style.left;
  XX_SELECT_MASK.style.top = XX_SELECT_DIV.style.top;
  XX_SELECT_MASK.style.width = XX_SELECT_DIV.offsetWidth;
  XX_SELECT_MASK.style.height = XX_SELECT_DIV.offsetHeight;
}

//--------------------------------------------
//  XMLHTTP 的 onreadystatechange 事件處理程式
//--------------------------------------------
function ShowPickup()
{
  if (XmlHttp.readyState==4 || XmlHttp.readyState=='complete')
  {
    XX_SELECT_DIV = document.getElementById('XX_SELECT_DIV');
    XX_SELECT_DIV.innerHTML = xx_select_html;
    
    XX_SELECT_PANEL = document.getElementById('XX_SELECT_PANEL');
    XX_SELECT_TITLE = document.getElementById('XX_SELECT_TITLE');
    XX_SELECT_MASK = document.getElementById('XX_SELECT_MASK');
    XX_SELECT = document.getElementById('XX_SELECT');

    RespText = XmlHttp.responseText;
  
    // if no result, display "not found" message
    if (RespText == "")
    {
      XX_SELECT_DIV.innerHTML = not_found_html1 + msgNotFound + not_found_html2;
      ShowPickup1();
      XX_SELECT_DIV.focus();
      return;
    }
    
    // parse return data to object
    try
    {
      XX_TEXT = JSON.parse(RespText);
      XX_TEXT.ListData.Data.FieldValue = JSON_Dataset_FieldValue_Method;
      // XX_TEXT = eval("(" + RespText + ")");
    }
    catch (err)
    {
      alert("解析回傳資料時發生錯誤：" + err.message + "\r\n回傳資料\r\n" + RespText);
      return;
    }

    // 
    if (notShowOnlyOneRecord && (XX_TEXT.ListData.Data.Rows.length == 1))
    {
      Update(0);
      return;
    }

    // generate table for display result
    // draw title
    newRow = XX_SELECT_TITLE.insertRow(-1);
    newRow.bgColor = XX_TEXT.ListData.TitleBackgroundColor;
    for (i in XX_TEXT.ListData.ListTitles)
    {
      newCell = newRow.insertCell(-1);
      if ((typeof XX_TEXT.ListData.ListWidths[i] != "undefined") && (XX_TEXT.ListData.ListWidths[i] != ""))
        newCell.width = XX_TEXT.ListData.ListWidths[i] + "px";
      else
        newCell.width = "100px";	      
      newCell.innerHTML = "<div style='color:" + XX_TEXT.ListData.TitleTextColor
                        + ";font-size:" + XX_TEXT.ListData.TitleTextSize
                        + ";padding:3px"
                        + ";margin:0"
                        + ";white-space:normal;word-break:break-all;display:block;width:100%;height:100%;'>" 
                        + XX_TEXT.ListData.ListTitles[i] 
                        + "</div>";
    }
    
    // draw content
    var n = 0;
    for (i = XX_Init_RecNo; i < XX_TEXT.ListData.Data.Rows.length; i++)
    {
      n++;
      newRow = XX_SELECT.insertRow(-1);
      if ((i * 1) % 2 == 1)
        newRow.bgColor = XX_TEXT.ListData.DataAltBackgroundColor;
      else
        newRow.bgColor = XX_TEXT.ListData.DataBackgroundColor;
        
      for (j in XX_TEXT.ListData.ListFields)
      {
        newCell = newRow.insertCell(-1);

        if ((typeof XX_TEXT.ListData.ListWidths[j] != "undefined") && (XX_TEXT.ListData.ListWidths[j] != ""))
          newCell.width = XX_TEXT.ListData.ListWidths[j] + "px";
        else
          newCell.width = "100px";
          
        newCell.style["padding"] = "0";
        newCell.innerHTML = "<div onclick='Update(" + i + ")' "
                          + "onmouseover='changeColor(this, &quot;#0000FF&quot;, &quot;#FFFFFF&quot;)' "
                          + "onmouseout='changeColor(this, &quot;" + newRow.bgColor + "&quot;, &quot;" + XX_TEXT.ListData.DataTextColor + "&quot;)' "
                          + "style='color:" + XX_TEXT.ListData.DataTextColor
                          + ";font-size:" + XX_TEXT.ListData.DataTextSize
                          + ";padding:3px"
                          + ";white-space:normal;word-break:break-all;display:block;width:100%;height:100%;cursor:pointer;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;'>"
                          + XX_TEXT.ListData.Data.FieldValue(i, XX_TEXT.ListData.ListFields[j])
                          + "</div>";
      }
      
      // when record count is great then max_record setting, draw page-changing button
      if ( (XX_Max_Records > 0 && n >= XX_Max_Records) || i == XX_TEXT.ListData.Data.Rows.length - 1)
      {
        XX_Next_RecNo = i + 1;
        XX_Prev_RecNo = XX_Init_RecNo - XX_Max_Records;
        
        newRow = XX_SELECT.insertRow(-1);
        newCell = newRow.insertCell(-1);
        newCell.colSpan = 99;

        var s = "<input type='button' value='&nbsp;&lt;&nbsp;'"
              + (XX_Prev_RecNo >= 0 ? "" : " disabled ")
              + " onclick=\"SendPickupRequestCont("
              + "&quot;" + XX_Url + "&quot;," 
              + "&quot;" + XX_Name + "&quot;," 
              + "&quot;" + XX_Value_Id + "&quot;," 
              + XX_Text_Id + "," 
              + "&quot;" + XX_Add_Where + "&quot;," 
              + (notShowOnlyOneRecord ? "true," : "false,")
              + XX_Max_Records + "," 
              + XX_Prev_RecNo + ");\"/>"
              + "<input type='button' value='&nbsp;&gt;&nbsp;'"
              + (i < XX_TEXT.ListData.Data.Rows.length - 1 ? "" : " disabled ")
              + " onclick=\"SendPickupRequestCont("
              + "&quot;" + XX_Url + "&quot;," 
              + "&quot;" + XX_Name + "&quot;," 
              + "&quot;" + XX_Value_Id + "&quot;," 
              + XX_Text_Id + "," 
              + "&quot;" + XX_Add_Where + "&quot;," 
              + (notShowOnlyOneRecord ? "true," : "false,")
              + XX_Max_Records + "," 
              + XX_Next_RecNo + ");\"/>";
        newCell.innerHTML = s;
        break;
      }
    }
    
    ShowPickup1();
    XX_SELECT_DIV.focus();
  }
}

//--------------------------------------------
//  使用 XMLHTTP 送出請求
//--------------------------------------------
function SendPickupRequestCont(url, name, AvalueId, AtextId, additionalWhere, notShowOnlyOne, maxRecords, initRecNo)
{
  valueId = AvalueId;
  textId = AtextId;
  XX_Url = url;
  XX_Name = name;
  XX_Value_Id = AvalueId;
  XX_Add_Where = additionalWhere;
  XX_Max_Records = maxRecords;
  XX_Init_RecNo = initRecNo;
  notShowOnlyOneRecord = notShowOnlyOne;
  
  // get value-input object
  objValue = document.getElementById(valueId);
  
  // get output object(s)
  XX_Text_Id = "";
  if (typeof textId[0] != "undefined")
  {
    objOutput = new Array(textId.length);
    XX_Text_Id += "[";
    for (i = 0; i < textId.length; i++)
    {
      objOutput[i] = document.getElementById(textId[i]);
      XX_Text_Id += "&quot;" + textId[i] + "&quot;";
      
      if (i < textId.length - 1)
        XX_Text_Id += ","
    }
    XX_Text_Id += "]";
  }
  else
  {
    objOutput = document.getElementById(textId);
    XX_Text_Id = textId;
  }

  // get a HttpRequest object and sumbit request
  XmlHttp = initRequest();
  XmlHttp.open("GET", url + "?NAME=" + name + "&LANGID=" + UserLangId 
                          + "&WHERE_KEY=" + escape(objValue.value)
                          + "&ADD_WHERE=" + escape(additionalWhere)
                          + "&TIME=" + new Date().getTime(), true);
  
  XmlHttp.onreadystatechange = ShowPickup;
  XmlHttp.send("");
}

function SendPickupRequest(url, name, AvalueId, AtextId, additionalWhere, notShowOnlyOne, maxRecords)
{
  SendPickupRequestCont(url, name, AvalueId, AtextId, additionalWhere, notShowOnlyOne, maxRecords, 0);
}

//--------------------------------------------
//  下拉清單的鍵盤事件處理程式
//--------------------------------------------
function SelectKeydown(e)
{
  if (!XX_SELECT || !XX_SELECT.selectedIndex || XX_SELECT.selectedIndex < 0)
    return;
    
  var keynum = 0;

  if (window.event)
  {
    keynum = event.keyCode;
  }
  else if (e.which)
  {
    keynum = e.which;
  }
  
  switch (keynum)
  {
    // ESC key = close
    case 27:
    {
      HidePickupList();
      return false;
    }
  }  
  return true;
}

//--------------------------------------------
//  下拉清單的滑鼠雙擊處理程式
//--------------------------------------------
function SelectDblClicked()
{
  if (XX_SELECT.selectedIndex < 0)
    return;    
  Update();
}

//--------------------------------------------
//  更新頁面上的 HTML 元件中的值
//--------------------------------------------
function Update(value)
{
  if (typeof objOutput[0] != "undefined")
  {
    for (i = 0; i < objOutput.length; i++)
    {
      if (typeof objOutput[i] != "undefined"
          && typeof XX_TEXT.ListData.OutputFields[i] != "undefined"
          && typeof XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[i]) != "undefined")
      {
        if (objOutput[i] != null)
        {
          if (objOutput[i].tagName == "INPUT")
            objOutput[i].value = XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[i]);
          else
            objOutput[i].innerHTML = XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[i]);
        }
      }
    }
  }
  else
  {     
    if (typeof objOutput != "undefined"
        && typeof XX_TEXT.ListData.OutputFields[0] != "undefined"
        && typeof XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[0]) != "undefined")
    {
      if (objOutput != null)
      {
        if (objOutput.tagName == "INPUT")  
          objOutput.value = XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[i]);
        else
          objOutput.innerHTML = XX_TEXT.ListData.Data.FieldValue(value, XX_TEXT.ListData.OutputFields[i]);
      }
    }
  }
  
  HidePickupList();
}

// for debug
function Update1(obj)
{
  alert(obj);
  HidePickupList();
}

//--------------------------------------------
//  隱藏下拉清單, 並清除其中的資料
//--------------------------------------------
function HidePickupList()
{
  XX_SELECT_DIV.style.display = "none";
  XX_SELECT_DIV.innerHTML = xx_select_html;
  XX_SELECT_MASK.style.left = "0";
  XX_SELECT_MASK.style.top = "0";
  XX_SELECT_MASK.style.width = "0";
  XX_SELECT_MASK.style.height = "0";
  objValue.focus();
}

//--------------------------------------------
//  變數與常數宣告
//--------------------------------------------
var XX_SELECT = null;
var XX_SELECT_DIV = null;
var XX_SELECT_PANEL = null;
var XX_SELECT_TITLE = null;
var XX_SELECT_MASK = null;
var XX_TEXT = null;
var objValue = null;
var objOutput = null;
var valueId = null;
var textId = null;
var notShowOnlyOneRecord = false;
var XX_SELECT_SelectedIndex = -1;
var XX_Url = "";
var XX_Name = "";
var XX_Value_Id = "";
var XX_Text_Id = "";
var XX_Add_Where = "";
var XX_Max_Records = 100;
var XX_Next_RecNo = 0;
var XX_Prev_RecNo = 0;
var XX_Init_RecNo = 0;
var not_found_html1 = "<table border=0 cellpadding=0 cellspacing=0><tr><td>"
                    + "<table border=1 cellpadding=3 bgcolor=yellow>"
                    + "<tr><td><b><font color=black>";
var not_found_html2 = "</font></b></td></tr></table></td><td valign='middle'>"
                    + "<INPUT type='button' id='XX_CLOSE_BTN' value='&nbsp;X&nbsp;' class='PickupCloseButton' "
                    + "onclick='javascript:HidePickupList();'></td></table>";
var xx_select_html  = "<table border='0' cellpadding='0' cellspacing='0'>"
                    + "  <tr>"
                    + "    <td>"
                    + "      <table id='XX_SELECT_TITLE' border='1' cellpadding='0' cellspacing='0' "
                    + "        style='font-family:sans-serif; border-collapse:collapse;'>"
                    + "      </table>"
                    + "    </td>"
                    + "    <td>"
                    + "      <INPUT type='button' id='XX_CLOSE_BTN' value='&nbsp;X&nbsp;' "
                    + "         class='PickupCloseButton' onclick='javascript:HidePickupList();'>"
                    + "    </td>"
                    + "  </tr>"
                    + "  <tr>"
                    + "    <td colspan=2>"
                    + "      <div id='XX_SELECT_PANEL' style='display:block;overflow:auto'>"
                    + "        <table id='XX_SELECT' border='1' cellpadding='0' cellspacing='0' "
                    + "           style='font-family:sans-serif;border-collapse:collapse;'>"
                    + "        </table>"
                    + "      </div>"
                    + "    </td>"
                    + "  </tr>"
                    + "</table>";
var outer_div_html  = "<DIV id='XX_SELECT_DIV' "
                    + "style='left:0;top:0;display:none;background-color:#FFFFFF;position:absolute;z-index:999;border:solid 1px #000000' "
                    + "onkeydown='javascript:return SelectKeydown(event);'>";
var outer_iframe_html = "<iframe id='XX_SELECT_MASK' "
                      + "style='display:block;border:0px none;position:absolute;left:0;top:0;width:0;height:0' "
                      + "src='about:blank'></iframe>";
                    
//--------------------------------------------
//  頁面開啟之後會執行的程式片段
//  這個 DIV 是用來放置下拉清單的
//--------------------------------------------
document.write(outer_div_html);
document.write(xx_select_html);
document.write("</DIV>");
document.write(outer_iframe_html);