///模板显示位置
<div class="main">
<div class="left_con">
<div class="vhead">EMS配置</div>
<div id="vbrasDiv">
</div>
</div>
//模板,script要有id
<script id="insTpl" type="text/x-jsrender">
<div class="vtitle " id="insDiv{{:insId}}" name="{{:ipAddr}}"><em class="v v02"></em>{{:insName}}</div>
<div class="vcon" style="display:none" id="insMenu{{:insId}}" ></div>
</script>
$(function(){
//菜单隐藏展开
var tabs_i=-1;
displayProgress();
$.ajax({
type : 'post',
url : "${basePath}/emsConfigAction/getInsList.action",
dataType : 'json',
success : function(data) {
unDisplayProgress();
////////////////////这里实现占位符模板匹配
$("#vbrasDiv").html("");
var template = $.templates("#insTpl");
var htmlOutput = template.render(data);
//////////////////////////div中放入模板内容
$("#vbrasDiv").html(htmlOutput);
/* //默认选择第一个
$.each(data,function(i,item){
if(i==0){
$("#insDiv"+item.insId).addClass("select_li on");
}
}) */;
//查询当前实例下的vbarss
$('.vtitle').click(function(){
var insId = $(this).attr("id").replace("insDiv","");
var ipAddr = $(this).attr("name");
//若这个实例没有加载过,则加载bras信息
if($("#insMenu"+insId).text()==''){
displayProgress();
//查询选中的实例的vbars
$.ajax({
type : 'post',
url : "${basePath}/emsConfigAction/getVbras.action",
data:{
ipAddress:ipAddr
},
dataType : 'json',
success : function(data) {
unDisplayProgress();
$("#insMenu"+insId).html("");
var template = $.templates("#vbrasTpl");
var htmlOutput = template.render(data);
$("#insMenu"+insId).html(htmlOutput);
vbrass = data.uuid;
brasIP = ipAddr;
/* if(vbrass!=''&&vbrass!=null){
$(".right_con").css("display","");
} */
if($("#insMenu"+insId+" ul").attr("id")==''){
alertInfo("业务不可用");
}else{
var _self = $("#insDiv"+insId);
var j = $('.vtitle').index(_self);
if( tabs_i == j ) return false; tabs_i = j;
$('.vtitle em').each(function(e){
if(e==tabs_i){
$('em',_self).removeClass('v01').addClass('v02');
}else{
$(this).removeClass('v02').addClass('v01');
}
});
$('.vcon').slideUp().eq(tabs_i).slideDown();
$(".vtitle").not(_self).removeClass("select_li on");
_self.addClass("vtitle select_li on");
}
}
});
}else{
if($("#insMenu"+insId+" ul").attr("id")==''){
alertInfo("业务不可用");
}else{
var _self = $(this);
var j = $('.vtitle').index(_self);
if( tabs_i == j ) return false; tabs_i = j;
$('.vtitle em').each(function(e){
if(e==tabs_i){
$('em',_self).removeClass('v01').addClass('v02');
}else{
$(this).removeClass('v02').addClass('v01');
}
});
$('.vcon').slideUp().eq(tabs_i).slideDown();
$(".vtitle").not($(this)).removeClass("select_li on");
$(this).addClass("vtitle select_li on");
}
}
});
}
});
$("#checkAll").click(function(){
$.each($(".checkBoxCls"),function(i,item){
if($("#checkAll").attr("checked")=='checked'){
item.checked=true;
}else{
item.checked=false;
}
});
})
})
======================================后台写回的数据格式===============
模板的返回数据格式
这种格式是arraylist的单个对象的数据格式,虽然断点看的时候会列出来
insId=2,insName=20g-node3,tplName=<null>,accessAddress=<null>,fwdAddress=<null>,cfgAddress=<null>,insType=gold,insStatus=创建成功,tplId=<null>,accPhyNetWork=<null>,fwdPhyNetWork=<null>,conPhyNetWork=<null>,dfId=0,nsdId=2,configs=<null>,ipAddr=172.16.100.250,uuid=<null>,rows=0,page=0,sortName=<null>,sortType=<null>
write(configService.getInstanceList());write的时候就是返回到前台了,其实就是封装了以前的打回前台的方法
protected void write(Object info) {
write(info, DATE_FORMAT_DEFAULT);
}
protected void write(Object info, String pattern) {
response.setContentType("text/json;chartset=UTF-8");
String json = "";
try {
/*if (info instanceof String) {
json = info.toString();
} else {*/
json = com.alibaba.fastjson.JSON.toJSONStringWithDateFormat(info, pattern, SerializerFeature.WriteMapNullValue);
// }
response.getWriter().write(json);
} catch (Exception e) {
logger.error(e.getMessage(), e);
throw new RuntimeException(e);
}
}
script脚本占位模板
猜你喜欢
转载自yuhuiblog6338999322098842.iteye.com/blog/2202466
今日推荐
周排行