jquery插件jTemplates用法

1、要想使用jquery先要导入jar包    <script src="JS/jquery-1.2.6.js"></script>       <script src="JS/jquery.jtemplates.js"></script>

2、使用jTemplates  是有相应的模板  如下：

前台！！！！！！！！！！！！！！

<script language="javascript" type="text/javascript">
//主界面 明星mv模块
function GetYSMVHomeList() {
 $.ajax({
  type: "get",
  dataType: "json",
  url: SetUrlRefresh("service/GetYSMVHomeList.jsp"),
  error: function(XmlHttpRequest, textStatus, errorThrown) {
   alert("数据获取失败");
  },
  success: function(d) {
   switch (d.result) {
    case '0':
     alert(d.returnval);
     break;
    case '1':
     $("#Home_MXMVList").setTemplateElement("tplMMSList", null, { filter_data: false });
     $("#Home_MXMVList").processTemplate(d);
     break;
    default:
     alert(d.result);
     break;
   }
  }
 });
}

function SetUrlRefresh(url) {
    if (url.indexOf("?") > 0)
        return url + "&ououtmpt=" + (new Date().getTime());
    else
        return url + "?ououtmpt=" + (new Date().getTime());
}

//通过 jquery 加载
$(document).ready(function() {
 GetYSMVHomeList();
});

<script/>

然后再div中一定有一个 div  通过id 与之对应

   <!-- 明星MV列表 -->
         <div class="main_ssf_list" id="Home_MXMVList">
            <div>这里面一般情况下放的是各种div格式等等 ， 在这里我们通过id把这些格式拿到下面去定义  这是jTemplates的语法</div>
            </div>

 

<!-- 明星MV -->
<textarea id="tplMMSList" style="display: none; overflow: auto; height:50px;">
    <div class="main_ssf_l2">  //这个div就是上面所说的  "格式"
     {#foreach $T.table as record}  // 这是 jTemplates 的 特殊写法  意思是  for循环 找到table(是从查询数据库的table中取到的)
        <div class="main_ssf_l2d">
         <div class="main_ssf_l2dimg"><a target=_blank href = "<%=request.getContextPath()%>/jsp/index_mv.jsp?id={$T.record.id}"><img style="height:95px" width="126px" src="{$T.record.minPic}" /></a></div>  //用{$T.record.minPic} 这种写法 获取 属性值
            <div class="main_ssf_l2dintro" id="ltitle" style="width:135px; height:24px; line-height:24px; overflow:hidden;" ><a target=_blank href = "<%=request.getContextPath()%>/jsp/index_mv.jsp?id={$T.record.id}">{$T.record.title}</a></div>
        </div>
        {#/for} //for 循环结束
 </div>
</textarea>

//以上就是界面展示的所有内容~~~~~~~~~~~~~~~~~~~~~~~~~~~！~~~~~~~~~~~~~~~~~~~~~

后台： 所谓后台也是写在jsp中  也就是  查询数据的过程

格式如下：

<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@page import="com.turing.framework.dao.Dao"%>
<%@page import="com.turing.framework.dao.DaoImpl"%>
<%@page import="java.util.*"%>
<%  Dao dao = new DaoImpl(); %>
<% 
 List list = dao.executeQueryForList("select * from(select ff.*,rownum rr from (select * from ouou_funchannel_video pp  where CLASSID = 2  order by to_date(pp.createdate,'yyyy-MM-dd HH24:mi:ss') desc  )ff  )  where rr > 0 and rr <= 5");
  java.util.Map map0 = (java.util.Map)list.get(0);
  java.util.Map map1 = (java.util.Map)list.get(1);
  java.util.Map map2 = (java.util.Map)list.get(2);
  java.util.Map map3 = (java.util.Map)list.get(3);
  java.util.Map map4 = (java.util.Map)list.get(4);
%>
{result:"1",returnval:"完成",fpic:"<%=map0.get("PICTURE") %>",ftitle:"<%=map0.get("NAME")%>",fcontent:"<%=map0.get("ABOUT")%>",fvideo:"<%=map0.get("FUNNYVIDEO") %>",id:"<%=map0.get("IDX") %>",table:[
{id :"1",minPic:"<%=map1.get("PICTURE")%>",name :"<%=map1.get("NAME")%>",about:"<%=map1.get("ABOUT")%>",video:"<%=map1.get("FUNNYVIDEO") %>",id:"<%=map1.get("IDX") %>"},
{id :"2",minPic:"<%=map2.get("PICTURE")%>",name :"<%=map2.get("NAME")%>",about:"<%=map2.get("ABOUT")%>",video:"<%=map2.get("FUNNYVIDEO") %>",id:"<%=map2.get("IDX") %>"},
{id :"3",minPic:"<%=map3.get("PICTURE")%>",name :"<%=map3.get("NAME")%>",about:"<%=map3.get("ABOUT")%>",video:"<%=map3.get("FUNNYVIDEO") %>",id:"<%=map3.get("IDX") %>"},
{id :"4",minPic:"<%=map4.get("PICTURE")%>",name :"<%=map4.get("NAME")%>",about:"<%=map4.get("ABOUT")%>",video:"<%=map4.get("FUNNYVIDEO") %>",id:"<%=map4.get("IDX") %>"}
]}

//以上是 查询数据的 过程

 

补充说明： 对于jquery插件jTemplates  是适用于 制作网站 或者在前台界面 有大量图片 视频  这样的界面 时候 需要 用jquery插件jTemplates  这个插件， 好处在于 当有大量图片或者视频的时候， 由于查询速度较慢 会影响 用户体验效果， 那么这种插件 就是先把  框子  展现出来 然后再查询图片，  这样的结构 比直接查询 快的很多