Question

您好我正在尝试使用Bootstrap显示内联复选框。我正在使用XML和XSL来呈现html。我在我的XSL中使用了类＆＃34;＆gt; col-sm-6，我只能在每列中显示一个复选框，但每个列中至少要显示4个复选框。

有人为我提供了一些解决方案。

<?xml version="1.0" encoding="iso-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"       version="1.0">
<xsl:template match="Application">
 <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"></link>
<link rel="stylesheet" href="css/applicationnew.css"></link>

<script type="text/javascript" language="javascript" src="applications/scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" language="javascript" src="applications/scripts/common.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<script type="text/javascript" language="javascript" src="applications/scripts/*id*.js"></script>   
</head>

<form  method="post" class="form-horizontal" role="form" action="saveApplication.aspx">
<div class="container">

<xsl:for-each select="Chapter">
      <div class="panel panel-default">
           <div class="panel-heading"><h3 class="panel-title"><xsl:value-of select="Name"/></h3></div>
            <div class="panel-body">

            <xsl:for-each select="Line">
            <div class="form-group">
            <xsl:variable name="propertycount" select="count(Property)" />
              <xsl:for-each select="Property">
              <div>
              <xsl:choose>
                <xsl:when test="$propertycount=1"><xsl:attribute name="class">col-sm-12</xsl:attribute></xsl:when>
                <xsl:otherwise><xsl:attribute name="class">col-sm-6       </xsl:attribute></xsl:otherwise>
              </xsl:choose>
                 <xsl:choose>
                   <xsl:when test="Type='CheckInLine'"> 
                        <input type="checkbox" class="checkbox-inline">&#160;
                        <xsl:attribute name="name">
                            <xsl:value-of select="../../Name" />
                          </xsl:attribute>
                          <xsl:attribute name="heiti">
                            <xsl:value-of select="Label" />
                          </xsl:attribute>

                          <xsl:attribute name="value">
                            <xsl:value-of select="Value" />
                          </xsl:attribute>
                          &#160;<xsl:value-of select="Value" />
                        </input>
                  </xsl:when>
                    <xsl:otherwise>
                    The type is wrong <xsl:value-of select="Type" />
                  </xsl:otherwise>
                </xsl:choose>
              </div>
              </xsl:for-each>
            </div>                
          </xsl:for-each>
          </div>
      </div>
    </xsl:for-each>

 </div>
 </form>
</xsl:template>
</xsl:stylesheet>

XML文档

<?xml version="1.0" encoding="iso-8859-1" ?>
<Application>
 <Id>0900</Id>
 <Title>Application</Title>

  <Chapter>
<Name>Reason</Name>
<Description></Description>
<Line>
  <Property>
    <Name>UnEmployee</Name>
    <Label></Label>
    <Required></Required>
    <Type>Check</Type>
    <Value>Box1</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>CheckInLine</Type>
    <Value>Box2</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>CheckInLine</Type>
    <Value>Box3</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  </Line>
<Line>
  <Property>
    <Name>CantWork</Name>
    <Label></Label>
    <Required></Required>
    <Type>Check</Type>
    <Value>Box4:</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>Label</Type>
    <Value></Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
</Line>

 </Chapter>

</Application>

Answer 1

这个XSLT 1.0样式表......

<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="1.0" >
<xsl:output method="html" indent="yes" encoding="utf-8" />
<xsl:strip-space elements="*" />    

<xsl:template match="/">
  <html>
    <head>
      <link rel="stylesheet"  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css" />
      <script src="http://code.jquery.com/jquery.min.js" />
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" />
      <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" language="javascript" src="application.js" />
    </head>

    <body>
      <div class="container">
       <div class="col-sm-6">
         <xsl:apply-templates select="Application/Chapter" />
       </div>
     </div> 
   </body>
 </html>
</xsl:template>

<xsl:template match="Chapter">
  <div class="panel panel-default">
    <div class="panel-heading"><h3 class="panel-title">Boxes:</h3></div>
    <div class="panel-body">
      <div class="form-inline">
        <xsl:apply-templates select="Line/Property" />
      </div>
    </div>
  </div>  
</xsl:template>

<xsl:template match="Property" />

<xsl:template match="Property[Type='CheckInLine']">
  <div class="checkbox-inline">
    <input type="checkbox" />
    <label><xsl:value-of select="Value" /></label>
   </div>
</xsl:template>

</xsl:stylesheet>

...将转换此输入文档......

<Application>
 <Id>0900</Id>
 <Title>Application</Title>

  <Chapter>
<Name>Reason</Name>
<Description></Description>
<Line>
  <Property>
    <Name>UnEmployee</Name>
    <Label></Label>
    <Required></Required>
    <Type>Check</Type>
    <Value>Box1</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>CheckInLine</Type>
    <Value>Box2</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>CheckInLine</Type>
    <Value>Box3</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  </Line>
<Line>
  <Property>
    <Name>CantWork</Name>
    <Label></Label>
    <Required></Required>
    <Type>Check</Type>
    <Value>Box4:</Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
  <Property>
    <Name></Name>
    <Label></Label>
    <Required></Required>
    <Type>Label</Type>
    <Value></Value>
    <Class></Class>
    <Placeholder></Placeholder>
  </Property>
</Line>

 </Chapter>

</Application>

...进入这个输出html文档...

<html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script><link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" language="javascript" src="application.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Boxes:</h3>
          </div>
          <div class="panel-body">
            <div class="form-inline">
              <div class="checkbox-inline"><input type="checkbox"><label>Box2</label></div>
              <div class="checkbox-inline"><input type="checkbox"><label>Box3</label></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Checkbox-inline使用Bootstrap，XML和XSL

1 个答案: