script脚本占位模板

///模板显示位置
<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);
        }
    }