如何将多个/不同的隐藏字段插入XML?

时间:2012-08-14 06:35:52

标签: javascript xml arrays jsp hidden

我需要在XML中插入多个隐藏字段(数据)。目前,我一次只能插入一个数据。假设我有一些'tiles'(包含多个坐标)要插入到XML中。所以,到目前为止,我只能一次将一个“tile”(数据)插入到XML中。

<<==Javascript code==>>    

function moveIt(){ 

if (!moveEnabled||!MovableItem) return;

// display info during testing

X = MovableItem.offsetLeft;

Y = MovableItem.offsetTop;

W = MovableItem.offsetWidth;

H = MovableItem.offsetHeight;

document.getElementById('X').value = X;     
    document.getElementById('Y').value = Y;
    document.getElementById('W').value = W;
    document.getElementById('H').value = H;  

    document.form1.elements['X'].value;
    document.form1.elements['Y'].value;
    document.form1.elements['W'].value;
    document.form1.elements['H'].value;

    }

 <<==JSP codes==>>

 <form name='form1' action='UpdateXML.jsp' method='post'>

 <input type='hidden' name=source value="<%=src%>" />
 <input type='hidden' id="X" name="X" value="<%=X%>"/>
 <input type='hidden' id="Y" name="Y" value="<%=Y%>"/>
 <input type='hidden' id="W" name="W" value="<%=W%>"/>
 <input type='hidden' id="H" name="H" value="<%=H%>"/> 

 <button type="button" onclick="window.location.href='editcompany.jsp'">Back!</button>
 <button type="submit">Insert Into XML!</button>
 </form>

 <<==XML==>>

<%
try {

String X        = request.getParameter("X");
    String Y        = request.getParameter("Y");
    String W        = request.getParameter("W");
    String H        = request.getParameter("H");

    pw.println ( "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"  );
    pw.println ( "<TemplateEditor>");
    pw.println ( "\t<Logo>");
    pw.print ( "\t\t<X_Coord>"); pw.print (X); pw.println ( "</X_Coord>");
    pw.print ( "\t\t<Y_Coord>"); pw.print (Y); pw.println ( "</Y_Coord>");
    pw.print ( "\t\t<Width>");   pw.print (W); pw.println ( "</Width>");
    pw.print ( "\t\t<Height>");  pw.print (H); pw.println ( "</Height>");
    pw.println ( "\t</Logo>");
    pw.println ( "</TemplateEditor>");

    pw.flush(); 
    pw.close();
    br.close();
    fw.close();
  } catch (Exception e) {}
%>

希望有一些善良的灵魂可以帮助我!我真的需要帮助。非常感谢

编辑:

function $(v){return document.getElementById(v)}

function startMove(e){

if (!MovableItem){return;}

canvas=isIE ? "BODY" : "HTML";

    activeItem=isIE ? event.srcElement : e.target;  

    offsetx=isIE ? event.clientX : e.clientX;

    offsety=isIE ? event.clientY : e.clientY;

    lastX=parseInt(MovableItem.style.left);

    lastY=parseInt(MovableItem.style.top);

    lastW=parseInt(MovableItem.style.width);

    lastH=parseInt(MovableItem.style.height);

if (offsetx+scrollAmt[0]>=(MovableItem.parentNode.offsetLeft+parseInt(MovableItem.style.left)+(MovableItem.offsetWidth*.98))|| offsety+scrollAmt[1]>=(MovableItem.parentNode.offsetTop+parseInt(MovableItem.style.top)+(MovableItem.offsetHeight*.98)) ){edge=true; MovableItem.style.cursor="se-resize"} else{edge=false;MovableItem.style.cursor="move"}

moveEnabled=true;

document.onmousemove=moveIt;

}

这有帮助吗?感谢

1 个答案:

答案 0 :(得分:0)

以下是处理N MovableItems的一些提示和建议(代码基于您当前的逻辑。

注意:它不遵循所有JavaScript / JSP最佳实践(我所知道),仅用于演示目的。

1.您只能使用一个隐藏的输入字段来保存所有MovableItems信息(而不是创建4xN隐藏字段),因为它更容易处理这种方式

<input type='hidden' id="movableItems" name="movableItems" value="<%=value%>"/> 

2.update moveIt()函数支持N个项目。 (假设您有一个名为MovableItems的数组,其中包含所有项目的信息)

function moveIt() {
    if (!moveEnabled || !MovableItems || MovableItems.length === 0) return;
    var value = '';
    for (var i = 0; i < MovableItems.length; i += 1) {
        if (i > 0) {
            value += '|';
        }
        value = [value, MovableItems[i].offsetLeft, ',',
                MovableItems[i].offsetTop, ',',
                MovableItems[i].offsetWidth, ',',
                MovableItems[i].offsetHeight].join('');
    }

    //the hidden field's value would be something like 10,20,50,50|5,5,30,20|1,2,60,20
    document.getElementById('movableItems').value = value;
}

在UpdateXML.jsp

try {
    pw.println ( "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"  );
    pw.println ( "<TemplateEditor>");

    String value = request.getParameter("movableItems");
    String[] items = value.split("\\|");
    int size = items.length;
    for (int i=0; i<size; i++) {
        String[] coords = items[i].split(",");
        pw.println ( "\t<Logo>");
        pw.print ( "\t\t<X_Coord>"); pw.print(coords[0]); pw.println ( "</X_Coord>");
        pw.print ( "\t\t<Y_Coord>"); pw.print(coords[1]); pw.println ( "</Y_Coord>");
        pw.print ( "\t\t<Width>");   pw.print(coords[2]); pw.println ( "</Width>");
        pw.print ( "\t\t<Height>");  pw.print(coords[3]); pw.println ( "</Height>");
        pw.println ( "\t</Logo>");
    }
    ...
} catch (Exception e) {}

我确信还有很多其他方法可以做到这一点。我希望这会给你一些想法。


编辑:

这是创建/更新/删除MovableItems数组的可能方法:

var MovableItems = []; //create an empty array

处理创建/更新/删除MovableItem的可能实现

注意:它假设您在UI中生成每个MovableItem时为其分配唯一ID

function getItem(items, id) { //helper function for getting item from array by id
    for (var i = items.length; i >= 0; i -= 1) {
        if (items[i].id === id) {
            return i;
        }
    }
    return -1;
}

function updateMovable(MovableItem) {
    var index = getItem(MovableItems, MovableItem.id);
    if (item < 0) { //it's a new item
        MovableItems.push(MovableItem);
    } else { //it's an existing item
        MovableItems[index] = MovableItem;
    }
}

function deleteMovableItem(MovableItem) {
    var index = getItem(MovableItems, MovableItem.id);
    if (index) {
        MovableItems.splice(index, 1);
    }
}