originality2010的专栏

一年之计，莫如树目；十年之计，莫如树心；终身之计，莫如树人。

用户操作
[留言]  [发消息]  [加为好友] 
订阅我的博客
XML聚合    FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
originality2010的公告
<script src="http://club.book.csdn.net/people/javascript/originality20103.js"></script>
文章分类
存档

原创  仓库平面图编辑无刷新效果——Javascript(由于代码长度问题所以分开发) 收藏

     function choiceDepot(depotValue, depotName)
     {
        document.getElementById("main").style.width = "830px";
        document.getElementById("main").style.height = "450px";
        document.getElementById("lbDepot").innerHTML = depotName + "(" + depotValue + ")";
        document.getElementById("hdDepotId").value = depotValue;
        //此处应该获取仓库中的仓位信息并显示

        btn_qx();
        CallServer(depotValue + "|" + "" + "|" + "" + "|" + "" + "|" + "" + "|" + "" + "|getList");
     }
     
     function menuShow()
     {
        var divMenu = document.getElementById('menu');
        divMenu.style.display = "";
        divMenu.style.left = document.documentElement.scrollLeft + event.clientX;
        divMenu.style.top = document.documentElement.scrollTop + event.clientY;
        return false;
     }
     
     function hideMenu()
     {
        if(event.button == 0)
        {
            document.getElementById('menu').style.display = "none";
        }
     }
     
    function setClass(type) 
    {
        var src = event;    
        if (type)
        {
            src.srcElement.className = "btn3_mouseover";
        }
        else
        {
            src.srcElement.className = "btn_2k3";
        }
    }  
       
    function SetValue(optType)
    {
        switch (optType)
        {
            case "add":
                addDepotArea();
                break;
            case "modify":
                modifyAtt();
                break;
            case "delete":
                deleteDeporArea();
                break;
        }
    }
    
    function deleteDeporArea()
    {
        if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
        {
            CallServer("" + "|" + document.getElementById("hdCurDiv").value + "|" + "" + "|" + "" + "|" + "" + "|" + "" + "|delete");
        }
    }
    
    function modifyAtt()
    {
        if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
        {
            document.getElementById("depotAtt").style.display = "";
            document.getElementById("depotAtt").style.left = document.documentElement.scrollLeft + event.clientX;
            document.getElementById("depotAtt").style.top = document.documentElement.scrollTop + event.clientY;
            CallServer("" + "|" + document.getElementById("hdCurDiv").value + "|" + "" + "|" + "" + "|" + "" + "|" + "" + "|get");
        }
    }
    
    function addDepotArea()
    {
        if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
        {
            document.getElementById(document.getElementById("hdCurDiv").value).style.borderColor = "#ccc";
        }
        if (document.getElementById("hdDepotId").value != "")
        {
            var id = getNextId();
            document.getElementById("frame").innerHTML += "<div id="" + id + "" style="z-index: 104; left: " + event.x + "px; width: 100px; position: absolute; top: " + event.y + "px;" + 
                                                          "height: 100px; background-color: #fff; border-color:#ccc; border-style: solid; cursor: hand; text-align:center;" onmousedown='initDrag()' onclick='choiceDiv()'>" + 
                                                          "</div>";
            document.getElementById("hdCurDiv").value = id;
            CallServer(document.getElementById("hdDepotId").value + "|" + "" + "|" + "默认名称" + "|" + "10,10,3,堆货场" + "|" + event.x + "|" + event.y + "|add");
            document.getElementById(id).innerHTML = "默认名称";
        }
        else
        {
            alert("请先选择仓库!");
            OpenFormWindow();
        }
    }
    
    function choiceDiv()
    {
        if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
        {
            document.getElementById(document.getElementById("hdCurDiv").value).style.borderColor = "#ccc";
        }
        document.getElementById("hdCurDiv").value = event.srcElement.id;
        event.srcElement.style.borderColor = "blue";
    }
    
    function initDrag()
    {
        window.moveObject = event.srcElement;
        window.readyDrag = true;
        document.onmousemove = dragDiv;
        window.addrX = parseInt(event.srcElement.style.left) - event.x;
        window.addrY = parseInt(event.srcElement.style.top) - event.y;
    }
    
    function endDrag()
    {
        window.readyDrag = false;
        //document.onmousemove = dragDiv;
        if (window.moveObject)
        {
            CallServer("" + "|" + window.moveObject.id + "|" + "" + "|" + "" + "|" + parseInt(window.moveObject.style.left) + "|" + parseInt(window.moveObject.style.top) + "|update");
        }
    }
    
    function dragDiv()
    {
        if (window.readyDrag)
        {
            window.moveObject.style.left = event.x + window.addrX;
            window.moveObject.style.top = event.y + window.addrY;
            if (document.documentElement.scrollLeft + event.clientX + parseInt(window.moveObject.style.width) > parseInt(document.getElementById("main").style.width))
                document.getElementById("main").style.width = document.documentElement.scrollLeft + event.clientX + parseInt(window.moveObject.style.width);
            if (document.documentElement.scrollTop + event.clientY + parseInt(window.moveObject.style.height) > parseInt(document.getElementById("main").style.height))
                document.getElementById("main").style.height = document.documentElement.scrollTop + event.clientY + parseInt(window.moveObject.style.height);
        }
    }
    
    function getNextId()
    {
        var divList = document.getElementsByTagName("div");
        var index = 0;
        var divListName = "";        
        while (index < divList.length)
        {
            divListName += divList[index].id + ",";
            index++;
        }
        index = 0;
        while (divListName.indexOf("divDepot" + index + ",") != -1)
        {
            index++;
        }
        return "divDepot" + index;
    }
    
    function init(values)
    {
        var retValue = values.split('|');
        
        if (retValue[retValue.length - 1] == "add") //添加于修改

        {
            if (retValue[0] == "")
            {
                alert('保存失败');
            }
            else
            {
                document.getElementById(document.getElementById("hdCurDiv").value).id = retValue[0];
            }
        }
        else if (retValue[retValue.length - 1] == "get")    //获取属性

        {
            document.getElementById("txtName").value = retValue[0];
            document.getElementById("txtType").value = retValue[4];
            document.getElementById("txtHight").value = retValue[3];
            document.getElementById("txtWidth").value = retValue[2];
            document.getElementById("txtLong").value = retValue[1];
        }
        else if (retValue[retValue.length - 1] == "delete")
        {
            if (retValue[0] == "error")
            {
                alert("仓位中存在获取，删除仓位前必须确保仓位为空!");
            }
            else
            {
                if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
                {
                    document.getElementById(document.getElementById("hdCurDiv").value).style.display = "none";
                    document.getElementById(document.getElementById("hdCurDiv").value).id = "nouse";
                    document.getElementById("hdCurDiv").value = "";
                }
            }
        }
        else if (retValue[retValue.length - 1] == "getList")
        {
            document.getElementById("frame").innerHTML = "";
            var temp = values.split('@');
            for (var i = 0; i < temp.length - 1; i++)
            {
                var args = temp[i].split('|');
                document.getElementById("frame").innerHTML += "<div id="" + args[0] + "" style="z-index: 104; left: " + args[3] + "px; width: " + args[2].split(',')[1] * 10 + "px; position: absolute; top: " + args[4] + "px;" + 
                                                          "height: " + args[2].split(',')[0] * 10 + "px; background-color: #fff; border-color:#ccc; border-style: solid; cursor: hand; text-align:center;" onmousedown='initDrag()' onclick='choiceDiv()'>" + 
                                                          args[1] + "</div>";
            }
            //根据仓位布置初始化表格大小
            var maxLeft = parseInt(document.getElementById("main").style.width);
            var maxTop = parseInt(document.getElementById("main").style.height);
            
            var divs = document.getElementsByTagName("div");
            
            for (var n = 0; n < divs.length; n++)
            {
                if (divs[n].id)
                {
                    if (parseInt(divs[n].style.left) + parseInt(divs[n].style.width) > maxLeft)
                    {
                        maxLeft = parseInt(divs[n].style.left) + parseInt(divs[n].style.width);
                    }
                    if (parseInt(divs[n].style.top) + parseInt(divs[n].style.height) > maxTop)
                    {
                        maxTop = parseInt(divs[n].style.top) + parseInt(divs[n].style.height);
                    }
                }
            }            
            document.getElementById("main").style.width = maxLeft;
            document.getElementById("main").style.height = maxTop;
        }
    }
    
    function hidAtt()
    {
        document.getElementById("depotAtt").style.display = "none";
        document.getElementById("txtName").value = "";
        document.getElementById("txtType").value = "";
        document.getElementById("txtHight").value = "";
        document.getElementById("txtWidth").value = "";
        document.getElementById("txtLong").value = "";
    }
    
    function savaAtt()
    {
        CallServer(document.getElementById("hdDepotId").value + "|" + document.getElementById("hdCurDiv").value + "|" + 
        document.getElementById("txtName").value + "|" + 
        document.getElementById("txtLong").value + "," + document.getElementById("txtWidth").value + "," + document.getElementById("txtHight").value + 
        "," + document.getElementById("txtType").value + "|" + event.x + "|" + event.y + "|add");
        changeShow();
        if (document.getElementById("hdCurDiv").value != "" && document.getElementById(document.getElementById("hdCurDiv").value))
        {
            document.getElementById(document.getElementById("hdCurDiv").value).style.borderColor = "#ccc";
        }
    }
    
    function changeShow()
    {
        document.getElementById(document.getElementById("hdCurDiv").value).style.width =  document.getElementById("txtWidth").value * 10;
        document.getElementById(document.getElementById("hdCurDiv").value).style.height = document.getElementById("txtLong").value * 10;
        document.getElementById(document.getElementById("hdCurDiv").value).innerHTML = document.getElementById("txtName").value;
        hidAtt();
    }
 

发表于 @ 2008年03月21日　02:56:00 | 评论( loading... ) | 编辑| 举报| 收藏

旧一篇:仓库平面图编辑无刷新效果——后台代码(由于代码长度问题所以分开发) | 新一篇:2008-03-27[脚本化HTTP]
查看最新精华文章 请访问博客首页相关文章
  • 发表评论
  • 评论内容：
  •  
Copyright © originality2010
Powered by CSDN Blog