切换开关自定义在使用 laravel 的数据表中不起作用

问题描述

我使用以下代码向我的数据表添加了自定义切换开关：

boolean hasInvoices = false;
for (SalesEInvObject invoiceObj : this.InvoiceTable) {
    if (invoiceObj.getInvoiceNo() != null) {
        hasInvoices = true;
        break;
    }
}

FacesContext ctx = FacesContext.getCurrentInstance();
HttpServletResponse response = 
    (HttpServletResponse) ctx.getExternalContext().getResponse();
if (hasInvoices) {
    response.setHeader("Content-Disposition","attachment; filename=\"" + "Invoice.zip\";");
    BufferedOutputStream bos = 
        new BufferedOutputStream(response.getOutputStream());
    ZipOutputStream zos = new ZipOutputStream(bos);
    
    for (SalesEInvObject invoiceObj : this.InvoiceTable) {  
        if (invoiceObj.getInvoiceNo() != null) {
            javax.servlet.http.HttpSession httpSession = 
                (javax.servlet.http.HttpSession) ctx.getExternalContext()
                                                    .getSession(false);
            httpSession.setAttribute(
                    BaseHttpServlet.DEFAULT_JASPER_PRINT_SESSION_ATTRIBUTE,reportOutput.getInternalReportObject());
            byte[] bytes = reportOutput.getReportOutputBytes();
            int length = ((bytes == null) ? 0 : bytes.length);
            response.setContentLength(length * tableSize);
            final ZipEntry ze = new ZipEntry(reportOutputFileName + ".pdf");
            zos.putNextEntry(ze);
            zos.write(bytes,bytes.length);
            zos.closeEntry();
        }
    }
    zos.close();
} else {
    // do you want to set a response code or something?
}
ctx.responseComplete();

但是我得到了一个复选框而不是一个自定义的切换开关。

编辑

现在我明白了：

但我可以只切换第一行而其他行保持不变

解决方法

嗨，你应该像这样在开关按钮之前定义 div

CSS 将是：

  <style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


</style>

代码将是：

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

例如，如果你删除了我放在这里的所有 css 并只添加了第一个

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

您将只获得复选框，您可以使用 css 随心所欲地编辑它：D 我希望我帮助了您 祝您好运