JSON数据填充表格——（三）

1.定义页面请求JSON的按钮与定义一个带表头的表格

 请求数据的按钮

<button class="btn btn-primary search_bar_button floatR" id="condition_sub">查询<span class=" glyphicon glyphicon-search span_icon"></span></button>

 

 带表头的表格

<table class="table table-bordered  table-hover" id="unitTable">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>部门编号</th>
                                    <th>部门名称</th>
                                    <th>上级部门编号</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
</table>

 

2.JS处理按钮点击事件与对传回来的JSON数据进行处理

1.点击请求JSON数据

/**
         * 点击查询按钮，按条件查询部门信息
         */
        $("#condition_sub").click(function(){
            defaultSearch();
        });

 

function defaultSearch () {
        $.ajax({
            type : "post",
            dataType : "json",
            url : "searchUnitByCondition.action",
            data : {
                unitId :   $("#unit_id").val(),
                unitName : $("#unit_name").val()
            },
            success : showTable
        });
    }

 

2. 服务器端对收到的请求处理

 

public String searchUnitByCondition(){
        List<TBaseUnitInfo> baseUnitInfo;
        try {
            Map<String,Object> condition = new HashMap<String,Object>();
            condition.put("unitId", unitId);
            condition.put("unitName", unitName);
            System.out.println("map"+condition);
            baseUnitInfo = unitService.getUnitByConditon(condition);
            //将java对象转化为json对象
            JSONArray jsonArray = JSONArray.fromObject(baseUnitInfo);
            //返回给Ajax
            this.result = jsonArray.toString();
        } catch (SQLException e) {
        }
        return SUCCESS;
    }

 

返回的JSON对象

[{"description":"","unitId":"10","unitName":"科技评估中心","upUnitId":""}]

3.JS对收到的数据填充表格

/**
         * 显示表格
         */
        function showTable(result) {
            var unitList = eval("(" + result + ")");
            // 清空表格  
            $("#unitTable  tr:not(:first)").html("");
            // 在表格中添加数据
            for (var i = 0; i < unitList.length; i++) {
                var index = i + 1;
                $("#unitTable").append(
                        "<tr><td>" + index+"</td><td>"
                        + unitList[i].unitId + "</td><td>"
                        + unitList[i].unitName+ "</td><td>"
                        + unitList[i].upUnitId+ "</td><td>"
                        + unitList[i].description+ "</td></tr>"
                );
            }
        }

 

效果: