【发布时间】:2018-10-08 23:05:41
【问题描述】:
我正在使用 JAVA 从数据库中检索数据,然后构建 HTML/bootstrap。这通过 JSON 传递回 HTML 我想要一列下拉框,旁边有一列输入框。我已经为此工作了一段时间,无法正确布局。 JAVA是:
//Get Six details
List<YthMmbrSixDtls> ymSixList = MySQLConnection.getYthMmbrSixDtls(decoded_id, "Cub");
String json = null;
String newstring = "";
Date date = null;
int i = 0;
if (!ymSixList.isEmpty()) {
for (final YthMmbrSixDtls ymSix : ymSixList) {
if (ymSix.getYmSixStartDate() == null){
newstring = "";
}else{
try {
date = new SimpleDateFormat("yyyy-MM-dd").parse(ymSix.getYmSixStartDate());
newstring = new SimpleDateFormat("dd/MM/yyyy").format(date);
} catch (java.text.ParseException e) {
e.printStackTrace();
}
}
if (i == 0){
//Youth encrypted member ID is stored in session storage - ssYMID
json = "<div class='row'>";
json = json + "<div class='form-group'>";
json = json + "<div class='col-md-4'>";
json = json + "<label for='selectSixPatrol" + i + "'>Six:</label>";
json = json + "<select class='form-control' id='selectSixPatrol" + i + "'>";
for (int k = 0; k < sixStoreArrayList.size(); k++) {
final String[] sixItem = sixStoreArrayList.get(k);
if (ymSix.getSixName().equals(sixItem[1])) {
json = json + "<option selected>" + sixItem[1] + "</option>";
}else{
json = json + "<option>" + sixItem[1] + "</option>";
}
}
json = json + "</select>";
json = json + "</div>";
json = json + "<div class='col-md-4'>";
json = json + "<input type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 90px;'/>";
json = json + "</div>";
i++;
}else{
json = json + "<div class='col-md-4'>";
json = json + "<select class='form-control' id='selectSixPatrol" + i + "'>";
for (int k = 0; k < sixStoreArrayList.size(); k++) {
final String[] sixItem = sixStoreArrayList.get(k);
if (ymSix.getSixName().equals(sixItem[1])) {
json = json + "<option selected>" + sixItem[1] + "</option>";
}else{
json = json + "<option>" + sixItem[1] + "</option>";
}
}
json = json + "</select>";
json = json + "</div>";
json = json + "<div class='col-md-4'>";
json = json + "<input type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 90px;'/>";
json = json + "</div>";
i++;
}
}
json = json + "<div class='col-md-4'>";
json = json + "<select class='form-control' id='selectSixPatrol" + i + "'>";
for (int k = 0; k < sixStoreArrayList.size(); k++) {
final String[] sixItem = sixStoreArrayList.get(k);
json = json + "<option>" + sixItem[1] + "</option>";
}
json = json + "</select>";
json = json + "</div>";
json = json + "<div class='col-md-4'>";
json = json + "<input type='text' name='awardDate' id='awardDate' style='width: 90px;'/>";
json = json + "</div>";
json = json + "</div>";
}else{
json = "<div class='row'>";
json = json + "<div class='form-group'>";
json = json + "<div class='col-md-4'>";
json = json + "<label for='selectSixPatrol'>Six:</label>";
json = json + "<select class='form-control' id='selectSixPatrol'>";
for (int k = 0; k < sixStoreArrayList.size(); k++) {
final String[] sixItem = sixStoreArrayList.get(k);
json = json + "<option>" + sixItem[1] + "</option>";
}
json = json + "</select>";
json = json + "</div>";
json = json + "<div class='col-md-4'>";
json = json + "<input type='text' name='awardDate' id='awardDate' style='width: 90px;'/>";
json = json + "</div>";
json = json + "</div>";
json = json + "</div>";
}
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
HTML 是:
<form data-toggle="validator" role="form" id="selectForm">
<div class="container-fluid">
<div class="col-xs-12">
<div class="form-select">
<!-- Place for Six/Patrol and date -->
<div class="input-group" id="sixPatrolDetails">
</div>
</div>
</div>
</div>
</form>
输出是:
为 Nitishkumar Singh 编辑:
生成的 HTML 将是:
<div class='row'>
<div class='form-group'>
<div class='col-md-4'>
<label for='selectSixPatrol0'>Six:</label>
<select class='form-control' id='selectSixPatrol0'>
<option selected>Black</option>
<option>Brown</option>
<option>Grey</option>
<option>Red</option>
<option>Tawney</option>
<option>White</option>
</select>";
</div>";
<div class='col-md-4'>";
<input type='text' name='awardDate' id='awardDate' value='20/04/2015' style='width: 90px;'/>
</div>";
<div class='row'>
<div class='form-group'>
<div class='col-md-4'>
<label for='selectSixPatrol1'>Six:</label>
<select class='form-control' id='selectSixPatrol1'>
<option>Black</option>
<option>Brown</option>
<option>Grey</option>
<option>Red</option>
<option>Tawney</option>
<option selected>White</option>
</select>";
</div>";
<div class='col-md-4'>";
<input type='text' name='awardDate' id='awardDate' value='22/04/2015' style='width: 90px;'/>
</div>";
<div class='row'>
<div class='form-group'>
<div class='col-md-4'>
<label for='selectSixPatrol2'>Six:</label>
<select class='form-control' id='selectSixPatrol2'>
<option>Black</option>
<option>Brown</option>
<option>Grey</option>
<option>Red</option>
<option selected>Tawney</option>
<option>White</option>
</select>";
</div>";
<div class='col-md-4'>";
<input type='text' name='awardDate' id='awardDate' value='23/04/2015' style='width: 90px;'/>
</div>";
<div class='row'>
<div class='form-group'>
<div class='col-md-4'>
<label for='selectSixPatrol3'>Six:</label>
<select class='form-control' id='selectSixPatrol3'>
<option>Black</option>
<option>Brown</option>
<option>Grey</option>
<option>Red</option>
<option>Tawney</option>
<option>White</option>
</select>";
</div>";
<div class='col-md-4'>";
<input type='text' name='awardDate' id='awardDate' style='width: 90px;'/>
</div>";
为 ChiefTwoPencils 编辑:
可以更新现有的六号并且可以更新它的日期。最后一行允许添加新的六和日期。
这是原始 GWT 视图:
【问题讨论】:
-
如果你把你生成的HTML放进去会更好?
-
我很困惑 - 在名为“json”的变量中,这不是 JSON,而是 HTML。
-
这样做的原因是什么?
-
嗨 Nitishkumar,我已经为你添加了一个编辑。
-
嗨罗宾,对不起,这是我阅读的方式。我应该将变量名称更改为 htmlCode 吗?
标签: java html json twitter-bootstrap