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";
    var totalHeight = document.getElementById("contentDiv").offsetHeight + document.getElementById("contentDiv").offsetTop;
    if (XX_SELECT_DIV.offsetTop + XX_SELECT_DIV.offsetHeight > totalHeight)
    {
        XX_SELECT_DIV.style.top = (totalHeight - XX_SELECT_DIV.offsetHeight) + "px";
        // XX_SELECT_DIV.offsetTop = totalHeight - XX_SELECT_DIV.offsetHeight;
    }
    //if (XX_SELECT.offsetHeight > 200)
    //	  XX_SELECT_PANEL.style.height = "200px";
    //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');
        XX_PAGE_BUTTON = document.getElementById('XX_PAGE_BUTTON');
        XX_SELECT_DIV.style.left = offsetLeft(objValue) + "px";
        XX_SELECT_DIV.style.top = offsetTop(objValue) + objValue.offsetHeight + "px";
        // XX_SELECT_DIV.offsetTop = offsetTop(objValue) + objValue.offsetHeight;

        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;
        }

        // evaluate return data to object
        XX_TEXT = eval("(" + RespText + ")");

        // 
        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.style = "padding:3px";
            newCell.innerHTML = "<div style='color:" + XX_TEXT.ListData.TitleTextColor
                + ";font-size:" + XX_TEXT.ListData.TitleTextSize
                + ";margin:0; padding:3px 0 3px 3px; border:none"
                + ";line-height: 1.2rem"
                + ";white-space:normal;word-break:break-all;display:block;width:calc(100% - 2px);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;
            newRow.onclick = "Update(" + i + ")";
            newRow.onmouseover = "changeColor(this, &quot;#ff9e28&quot;, &quot;#FFFFFF&quot;)";
            newRow.onmouseout = "changeColor(this, &quot;" + newRow.bgColor + "&quot;, &quot;" + XX_TEXT.ListData.DataTextColor + "&quot;)";

            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:3px";
                newCell.innerHTML = "<div onclick='Update(" + i + ")' "
                    + "onmouseover='changeColor(this, &quot;#ff9e28&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
                    + ";margin:0; padding:3px 0 3px 3px; border:none"
                    + ";line-height: 1.2rem"
                    + ";white-space:normal;word-break:break-all;display:block;width:calc(100% - 2px);height:100%;cursor:pointer'>"
                    + 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;&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;&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;
                XX_PAGE_BUTTON.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), 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.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 id='XX_PAGE_BUTTON'>"
    + "    </td>"
    + "    <td style='text-align:right'>"
    + "      <INPUT type='button' id='XX_CLOSE_BTN' value='&nbsp;X&nbsp;' "
    + "         class='PickupCloseButton' onclick='javascript:HidePickupList();'>"
    + "    </td>"
    + "  </tr>"
    + "  <tr>"
    + "    <td colspan=2>"
    + "      <table id='XX_SELECT_TITLE' border='1' cellpadding='0' cellspacing='0' "
    + "        style='font-family:sans-serif;border-collapse:collapse;'>"
    + "      </table>"
    + "    </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>";
//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'"
//    + "</iframe>";

//--------------------------------------------
//  頁面開啟之後會執行的程式片段
//  這個 DIV 是用來放置下拉清單的
//--------------------------------------------
function InitLookupList()
{
    //document.write(outer_div_html);
    //document.write(xx_select_html);
    //document.write("</DIV>");
    //document.write(outer_iframe_html);
}