jQuery的jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成。
jQuery的jTemplates官方网站:http://jtemplates.tpython.com/
原先的拼html代码如下:
$("#Content").html(""); $.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) { $.each(data, function(i) { var strHtml = "
"; strHtml += ""; strHtml += "" + data[i].Title + ""; strHtml += ""; strHtml += ""; strHtml += ""; strHtml += "" + data[i].TypeName + ""; strHtml += " |
创建时间:" + data[i].CreateOn + "最后修改时间:" + data[i].ModifiedOn + " |
" + data[i].Intro + " 详细... |
有了jTemplates,可以更灵活的定义一个模板 :
调用:
$("#Content").html(""); $.getJSON("ajax/item.ashx", { action: 'list', action2: 'getPerPageData', type: $("#hidType").val(), ym: $("#hidYM").val(), showType: $("#sShowType").val(), searchVal: $("#txtSearch").val(), pagesize: $("#sPageSize").val(), index: index, t: Math.random() }, function(data) { $("#Content").setTemplateElement("template", null, {filter_data: false}); $("#Content").processTemplate(data); $(".markSelectBox").powerFloat({ width: 85, eventType: "click", target: ".qmpanel_shadow", }); });