【问题标题】:How to create columns of data in bootstrap using java如何使用java在引导程序中创建数据列
【发布时间】: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


【解决方案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);

【讨论】:

    猜你喜欢
    • 2014-08-04
    • 1970-01-01
    • 1970-01-01
    • 2020-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多