将具有控件布局的Xml文件渲染到HTML5页面中

Render the Xml file having controls layout into HTML5 page

本文关键字：HTML5 文件 控件 布局 Xml      更新时间：2023-12-07

我有下面的xml文件，其中包含要呈现到HTML页面中的控件信息。内容如下：

  <control type="panel">
     <panel id="p1">
         <button id="b1">
            <value>TEST</value>
          </button>
          <textbox id="t1">
               <text>HELLO</text>
          </textbox>
      </panel>
   <control>

这必须实时呈现到一个div中，该div包含一个包含一个按钮和一个文本框的面板。xml的内容只有在运行时才知道。它可以只是一个按钮或下拉列表信息。如何着手解决这个问题。一个通用算法（可能使用jquery）将非常有用。

对于通用的东西，您的XML需要是通用的，或者符合"XML到HTML表单约定"的约定。我不知道有这样的事

这似乎很容易处理。下面是我如何处理您的XML示例的示例。

$(function() {
    
    // Data setup (I assume you'd be getting this from AJAX)
    var xml = '<control type="panel">' +
         '<panel id="p1">' +
             '<button id="b1">' +
                '<value>TEST</value>' +
              '</button>' +
              '<textbox id="t1">' +
                   '<text>HELLO</text>' +
              '</textbox>' +
          '</panel>' +
       '</control>';
    
    // Convert to jQuery XML object
    var xml = $($.parseXML(xml));
    
    // Set parent
    var parent = $('#control');
    
    // Handle elements
    xml.find('panel').children().each(function() {
        var tag = $(this)[0].tagName;
        switch (tag) {
            case 'button':
                parent.append('<button id="' +
                              $(this).attr('id') + '">' +
                              $(this).find('value').text() +
                              '</button>');
                break;
            case 'textbox':
                parent.append('<input type="text" id="' +
                              $(this).attr('id') +
                              '" value="' +
                              $(this).find('text').text() +
                              '" />');
                break;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="control"></div>

当然，您可以根据需要对此进行修改，添加新元素处理，更改添加到父元素的方式等。我希望这会有所帮助。

相关文章：