Question

我有一个简单的 XSD 文件，如下所示：

<?xml version="1.0" standalone="yes"?>
<xs:schema id="Employee" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="Employee" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="Employees">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="Name" type="xs:string" minOccurs="0" />
              <xs:element name="Birth Date" type="xs:dateTime" minOccurs="0" />
              <xs:element name="Nationality" type="xs:string" minOccurs="0" />
              <xs:element name="Profession" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

我希望根据此XSD信息生成HTML表单。

有什么建议吗？我正在考虑用Javascript读取XSD文件并从那里生成表单。可能吗？

Answer 1

免责声明：我是Jsonix的作者，这是一个开源库，我适合 使用Javascript读取XSD文件 这项任务。

Jsonix可以根据某个XML Schema解析XML。由于XML Schema具有XML Schema，因此可以使用Jsonix解析XSD。然后，您需要基于解析的JSON构建HTML表单（这是Jsonix不提供进一步帮助的地方）。

这是一个example。

考虑this schema：

<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns:gml="http://www.opengis.net/gml" xmlns:nasa="http://nasa.gov" xmlns:ne="http://naturalearthdata.com" xmlns:nurc="http://www.nurc.nato.int" xmlns:og="http://opengeo.org" xmlns:osm="http://openstreemap.org" xmlns:topp="http://www.openplans.org/topp" xmlns:usgs="http://www.usgs.gov/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" targetNamespace="http://www.openplans.org/topp">
  <xsd:import namespace="http://www.opengis.net/gml" schemaLocation="http://demo.opengeo.org:80/geoserver/schemas/gml/3.1.1/base/gml.xsd"/>
  <xsd:complexType name="tasmania_state_boundariesType">
    <xsd:complexContent>
      <xsd:extension base="gml:AbstractFeatureType">
        <xsd:sequence>
          <xsd:element maxOccurs="1" minOccurs="0" name="the_geom" nillable="true" type="gml:MultiSurfacePropertyType"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="STATE" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="COUNTRY" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="CURR_TYPE" nillable="true" type="xsd:string"/>
          <xsd:element maxOccurs="1" minOccurs="0" name="CURR_CODE" nillable="true" type="xsd:string"/>
        </xsd:sequence>
      </xsd:extension>
    </xsd:complexContent>
  </xsd:complexType>
  <xsd:element name="tasmania_state_boundaries" substitutionGroup="gml:_Feature" type="topp:tasmania_state_boundariesType"/>
</xsd:schema>

您可以使用Jsonix解析此XSD文件并迭代元素。这是一段代码摘要from the test：

var context =  new Jsonix.Context([XSD_1_0]);
    var unmarshaller = context.createUnmarshaller();
    unmarshaller.unmarshalFile("tests/XSD/1.0/Schema-01.xml", function(result) {

        var schema = result.value;
        var tns = schema.targetNamespace;
        var complexTypes = schema.complexType;

        var featureTypes = {};
        for (var index = 0; index < complexTypes.length; index++)
        {
            var featureType = {};
            var complexType = complexTypes[index];
            var name = complexType.name;
            var qname = new Jsonix.XML.QName(tns, name);
            featureType.typeName = qname;

            featureTypes[qname.key] = featureType;


            var elements = [];

            if (complexType.complexContent && complexType.complexContent.extension && complexType.complexContent.extension.sequence && complexType.complexContent.extension.sequence.element)
            {
                elements = elements.concat(complexType.complexContent.extension.sequence.element);
            }

            if (complexType.sequence && complexType.sequence.element)
            {
                elements = elements.concat(complexType.sequence.element);
            }
            featureType.properties = {};

            for (var jndex = 0; jndex < elements.length; jndex++)
            {
                var element = elements[jndex];
                var property = {
                    name: new Jsonix.XML.QName(tns, element.name),
                    type: element.type,
                    collection: (element.maxOccurs === 'unbounded')
                };
                featureType.properties[element.name] = property;
            }
        }

        var featureElements = {};

        for (var kndex = 0; kndex < schema.element.length; kndex++)
        {
            var topLevelElement = schema.element[kndex];
            featureElements[topLevelElement.name] = featureTypes[topLevelElement.type.key];
        }

        console.log(featureElements);
        test.done();
    });

此特定测试使用Node.js运行，但Jsonix本身也在浏览器中运行。

注意：

JAXFront是现有的UI-from-XSD解决方案之一。
考虑使用JSON Schema而不是XML Schema，这将删除XSD解析
XML Schema可能非常复杂，您只能合理地支持它的一部分
如果事先知道XSD，您可以考虑使用编译时工具来处理模式。在浏览器中处理XSD可能非常繁重，只有在高级中不知道XSD（即运行时的传送）（例如来自某些Web服务）才有意义
OpenLayers WPS client是另一个从原理图定义（不是XML Schema而是基于XML）动态构建Web UI的工具示例。它实际上使用了

Answer 2

我知道这是一个老问题，但我自己遇到了这个问题，找不到令人满意的开源解决方案。我最终编写了自己的实现XSD2HTML2XML。它会自动从XSD生成HTML5表单。它支持大多数XSD标准，包括元素，属性，minOccurs和maxOccurs。

如果您更喜欢开箱即用的解决方案而不是自己编写解决方案，请参阅我的实施XML Schema Form Generator。

从简单的XSD文件生成HTML表单 - javascript？

2 个答案: