关于templ和html拼接比较

来源:互联网 发布:三角洲部队 百度软件 编辑:程序博客网 时间:2024/06/05 00:29

传统的html拼接方式:
function loadData(){
(“#dataList”).html(“”);  
            var pageIndex =
(“#pageIndex”).html();
var action=”/democontroller/listweb.ph”;
ajaxPost(action,{“page” : pageIndex},function(data) {
if (.trim(data.code) == “40000”) {  
                    var rows = data.resobj.rows;
.each(rows,function(index, value) {
var tr = ““;
tr += ““+rows[index].name+”“;
//代码转名称
if(rows[index].tip==”0”){
tr += “公开“;
}else{
tr += “私密“;
}
tr += ““+rows[index].createtime+”“;
//代码转名称
if(rows[index].flag==”1”){
tr += “开始“;
}else{
tr += “结束“;
}
tr += ““;
tr += “

“;
tr += “
”;
tr += “编辑”;
tr += “
“;
tr += “
“;
tr += “删除”;
tr += “
“;
tr += “
“;
tr += “结束活动”;
tr += “
“;
tr += “
“;
$(“#dataList”).append(tr);
//按钮颜色和图标一共有7种。分别是白色,浅蓝色,深蓝色,绿色,黄色,红色,黑色,对应的class为btn,btn btn-primary,btn btn-info,
//btn btn-success,btn btn-warning,btn btn-danger,btn btn-inverse
});
pageStr(data,”pageDiv”);// 放置到分页控件
}
}, ‘json’);
}


以上是html动态拼接的方法


运用jquery的templ方法:
function loadData(){
var pageIndex=(“#pageIndex”).html();  
    var userId=
(“#userId”).val();
var name=(“#name”).val();  
    var qqnumber=
(“#qqnumber”).val();
var phone=(“#phone”).val();  
    var action=”/userinfo/selectAllUserInfoForPage.ph”;  
    ajaxPost(action,{“page”:pageIndex,”userId”:userId,”name”:name,”qqnumber”:qqnumber,”phone”:phone},function(data){  
        if(data.code==”40000”){
(“#userList”).empty();
$(“#userData”).tmpl(data.resobj).appendTo(“#userList”);
pageStr(data, “pageDiv”);// 分页控件
}
},’json’);
}

{{each(i,row) rows}} {{= row.userid}} {{= row.loginname}} {{= row.username}} {{= row.phone}} {{= row.gold}} {{= row.score}} {{= convertTimestampForYYYYMMDDHHmmss(row.lastlogintime)}} 修改用户金币银币  重置密码 {{/each}}

那种方式更好一目了然

0 0
原创粉丝点击