Question

我正在使用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：

现有的六个版本可以更新，它的日期可以更新。最后一行允许添加新的Six和Date。

这是最初的GWT视图：

Answer 1

HTML：

     <form data-toggle="validator" role="form" id="selectForm">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                <!-- Place for Six/Patrol and date -->
                    <div class="form-select" id="sixPatrolDetails">
                    </div>
                </div>
            </div>
        </div>
    </form>

JAVA：

    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 = "<form class='form-inline'>";
                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 + "<input class='form-control mr-sm-2' type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 180px;'>";
                json = json + "</form>";

                i++;
            }else{
                json = json + "<form class='form-inline'>";
                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 + "<input class='form-control mr-sm-2' type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 180px;'>";
                json = json + "</form>";

                i++;
            }

        }
        json = json + "<form class='form-inline'>";
        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 + "<input class='form-control mr-sm-2' type='text' name='awardDate' id='awardDate' style='width: 180px;'>";
        json = json + "</form>";
    }else{

        json = "<form class='form-inline'>";
        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 + "<input type='text' name='awardDate' id='awardDate' style='width: 90px;'>";
        json = json + "</form>";
    }
    response.setContentType("image/jpeg");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);

如何使用java在bootstrap中创建数据列

1 个答案: