javascript - 如何在 XML 中插入多个/不同的隐藏字段？

Question

我需要将多个隐藏字段(数据)插入到 XML 中。目前，我一次只能插入一项数据。假设我有一些“图 block ”(包含多个坐标)要插入到 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) {}
%>

希望有好心人可以帮助我!我真的真的需要帮助。非常感谢

编辑:

函数$(v){返回document.getElementById(v)}

函数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;

}

这有帮助吗？谢谢

Answer 1

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

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

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

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

2.更新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);
    }
}