将 Json 数据填充到动态生成的表中

Question

我使用 jquery 动态生成一个表。这是它的代码。

$(document).ready(function(){
        // to generate the table for given number of blocks
        var numberOfBlocks = ${projectDetails.noOfBlocks};
        var i;
        var _html = '<table class="table table-bordered table-striped">';

        _html += '<tr>';
        _html += '<th>Blockk No</th>';
        _html += '<th>Lott No</th>';
        _html += '<th>Extentt</th>';
        _html += '<th>Land Value</th>';
        _html += '<th>On Booking Amount</th>';
        _html += '</tr>';

        for (i = 1; i <= parseInt(numberOfBlocks); i++) {

            _html += '<tr class="tblRw" id="row'+i+'">';
            _html += '<td><input type="text" class="form-control" size="10" id="blockNo'+i+'" value="'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="lotNo'+i+'" ></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="extent'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" id="land_value'+i+'"></td>';
            _html += '<td><input type="text" class="form-control" size="10" id="onbookingamount'+i+'"></td>';
            _html += '</tr>';

        }

        _html += '</table>';
        document.getElementById('results').innerHTML = _html;
       });

我需要使用从我的控制器类返回的Jason 响应中的数据填充表行。我就是这样做的。

public @ResponseBody JsonResponse  edit_blocks(@ModelAttribute(value="editblockbean") EditBlockBean editBlockBean , BindingResult result,ModelMap model) {

        JsonResponse res = new JsonResponse();

        if (result.hasErrors()) {
            res.setStatus("FAIL");
            res.setResult(result.getAllErrors());
        }else{

            List<EditBlockBean> ebb = branchservice.getBlocksForEdit(editBlockBean.getTitle());

            res.setStatus("SUCCESS");
            res.setResult(ebb);

        }
        return res;
    }

来自控制器类的我的Jason 响应包含一个类对象列表。这是班级；

public class BlockBean {

    private String blockNo;
    private String lotNo;
    private String extent;
    private String landValue;
    private String onBookingAmount;

    // getters and setters

}

在Jason 响应中，我有一个BlockBean 对象列表。我需要将那些对象属性，例如blockNo, lotNo, extent,....，分配给jsp页面中生成的动态表中每一行的列。

这是我的 ajax 电话，以获取 jason 的回复。

         jQuery.ajax({
                type : "GET",
                url : "/TFProject/edit_blocks.htm",
                data : "title=" + title + "&type=" +type,

                success : function(response) {

                    if (response.status == "SUCCESS") {

                        // I need to know the code here.

                    } else {
                        errorInfo = "";

                        for (i = 0; i < response.result.length; i++) {
                            errorInfo += "<br>" + (i + 1) + ". "
                                    + response.result[i].code;
                        }
                        jQuery('#error').html(
                                "Please correct following errors: " + errorInfo);
                        jQuery('#info').hide('slow');
                        jQuery('#error').show('slow');
                    }
                },
                error : function(e) {
                    alert('Errorrrr: ' + e);
                }
            });

如果Jason 响应状态为成功，我需要知道的是用 jason 响应详细信息填充表行的代码段。 请你帮助我好吗？ 谢谢！

Answer 1

您的 JSON 响应返回方法应如下所示：

public@ResponseBody String edit_blocks(@ModelAttribute(value = "editblockbean") EditBlockBean editBlockBean, BindingResult result, ModelMap model) {    
    List <EditBlockBean> editBlockBeanList = branchservice.getBlocksForEdit(editBlockBean.getTitle());
    String jsonResult = "";
    try {
        if (editBlockBeanList != null && !editBlockBeanList.isEmpty()) {
            JSONArray jsonArray = new JSONArray();
            for (EditBlockBean ebb: editBlockBeanList) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("blockNo", ebb.getBlockNo());
                jsonObject.put("lotNo", ebb.getLotNo());
                jsonObject.put("extent", ebb.getExtent());
                jsonObject.put("landValue", ebb.getLandValue());
                jsonObject.put("onBookingAmount", ebb.getOnBookingAmount());
                jsonArray.put(jsonObject);
            }
            jsonResult = jsonArray.toString();
        }
    } catch (Exception ex) {
        jsonResult = "";
        // append exception to log
    }
    return jsonResult;
}

这是编写 HTML 表格的 AJAX 方法的成功部分：

if (response != null && response != "") {
    var EditBlockBeanArray = JSON.parse(response);

    var _html = '<table class="table table-bordered table-striped">';
    _html += '<tr>';
    _html += '<th>Blockk No</th>';
    _html += '<th>Lott No</th>';
    _html += '<th>Extentt</th>';
    _html += '<th>Land Value</th>';
    _html += '<th>On Booking Amount</th>';
    _html += '</tr>';

    var i = 0;
    while (i < EditBlockBeanArray.length) {
        var ebbObject = EditBlockBeanArray[i];

        _html += '<tr class="tblRw" id="row' + i + '">';
        _html += '<td><input type="text" class="form-control" size="10" id="blockNo' + i + '" value="' + i + '">' + ebbObject.blockNo + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="lotNo' + i + '">' + ebbObject.lotNo + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="extent' + i + '">' + ebbObject.extent + '</td>';
        _html += '<td><input type="text" class="form-control" id="land_value' + i + '">' + ebbObject.landValue + '</td>';
        _html += '<td><input type="text" class="form-control" size="10" id="onbookingamount' + i + '">' + ebbObject.onBookingAmount + '</td>';
        _html += '</tr>';

        i++;
    }

    _html += '</table>';
    document.getElementById('results').innerHTML = _html;
} else {
    /* Your error code goes here */
}