Script Placeholder Template

Source: Internet
Author: User
Tags json uuid
Template display Location
<div class= "Main" >
<div class= "Left_con" >
<div class= "Vhead" >ems configuration </div>

<div id= "Vbrasdiv" >
</div>

</div>
Template, script to have 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 () {
Menu Hide Expand
var tabs_i=-1;
Displayprogress ();

$.ajax ({
Type: ' Post ',
URL: "${basepath}/emsconfigaction/getinslist.action",
DataType: ' JSON ',
Success:function (data) {
Undisplayprogress ();
Placeholder template matching is implemented here
$ ("#vbrasDiv"). HTML ("");
var template = $.templates ("#insTpl");
var htmloutput = template.render (data);
Insert template content in div
$ ("#vbrasDiv"). HTML (htmloutput);
/*//default Select First
$.each (Data,function (I,item) {
if (i==0) {
$ ("#insDiv" +item.insid). AddClass ("Select_li on");
}
}) */;

Querying the Vbarss under the current instance
$ ('. Vtitle '). Click (function () {
var insId = $ (this). attr ("id"). Replace ("Insdiv", "" ");
var ipaddr = $ (this). attr ("name");
If this instance has not been loaded, the bras information is loaded
if ($ ("#insMenu" +insid). Text () = = ') {
Displayprogress ();
Querying the Vbars of the selected instance
$.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 ("Business is not available");
}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 ("Business is not available");
}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;
}
});
})

})

====================================== data format for back-end writeback ===============

Return data format for templates
This format is a ArrayList data format for a single object, although breakpoints are listed when viewed

insid=2,insname=20g-node3,tplname=<null>,accessaddress=<null>,fwdaddress=<null>,cfgaddress= <null>,instype=gold,insstatus= created successfully, 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 is returned to the foreground, in fact, the package of the previous method of hitting the front desk

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);
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.