1. 程式人生 > >HTML頁面中資料的回顯功能

HTML頁面中資料的回顯功能

在第一種方式中:頁面回顯,點選detail,頁面詳情會顯示一個新的頁面。這個是通過連結將頁面連結過去的。同時這個連結還連結到了一個新的js檔案中。用去調取後端的介面。

{
                        title : '操作',
                        field : 'operate',
                        align : 'center',
                        formatter : function(value, row, index) {
                            var e = '<a class="btn btn-primary btn-sm '+s_detail_h+'" href="#" mce_href="#" title="詳情" onclick="detail(\''
                                + row.id
                                + '\')"><i class="fa fa-edit"></i>詳情</a> ';
                            return e;
                        }
                    } ]

這個就是那個js檔案

//詳情頁面
function detail(id) {

    if(id != undefined && id !=null){
        var lay = layer.open({
            type : 2,
            title : '',
            maxmin : true,
            shadeClose : true, // 點選遮罩關閉層
            area : [ '800px', '520px' ],
            content : prefix + '/detail/' + id // iframe的url
        });
        layer.full(lay)
    }else{
        console.log("id======"+id);
    }
}

這就去去呼叫controller層的介面去後端拿取資料了。

@Log("詳情")
	@GetMapping("/detail/{id}")
	String detail(@PathVariable("id") String id, Model model) {
		if(StringUtils.isNotEmpty(id)){
			Detail detail = detailService.get(Long.valueOf(id));
			model.addAttribute("detail", detail);
		}
		return "nsmp/analysis/detail";
	}

後端返回之後,就是給了這個頁面,這個頁面通過這種方式將資料拿去。

<div class="gg-formDetail">
                                    <div class="radio i-checks">
                                        <label class="radio-inline">
                                            <input type="radio" name="jugRes" value="1" th:field="${detail.jugRes}">已評審
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="jugRes" value="2" th:field="${detail.jugRes}">未評審
                                        </label>
                                    </div>
                                </div>