关于Juicer:Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。 除此之外，它还可以在 Node.js 环境中运行。Juicer中文文档地址：http://juicer.name/docs/docs_zh_cn.html
1.引入Juicer插件
<script type="text/javascript" src="juicer-min.js"></script>
2.Juicer有两个参数,tp1和data
tp1:定义好的模板页。比如，
<!-- juicer模板页--> <script id="tp1" type="text/ng-template"> {*each list as item,index}//index：可选参数，表示当前索引 <tr> <td>${item.Heq_Id}</td> <td>${item.Heq_Name}</td> <td>${item.Heq_LoginName}</td> <td>${item.Heq_LoginPwd}</td> <td>${item.Heq_Frdb}</td> <td>${item.Heq_Email}</td> <td>${item.Heq_Zch}</td> <td>${item.Heq_Tel}</td> <td>${item.Heq_Address}</td> <td>${item.Heq_Qq}</td> <td>${item.Heq_Notice}</td> <td> <a href="#"> <button class="btn btn-danger btn-xs" onclick="del(‘${item.Heq_Id}‘)">删除</button> </a> <a href="#"> <button class="btn btn-info btn-xs" onclick="edit(‘${item.Heq_Id}‘)">编辑</button> </td> </a> </tr> {*/each} </script>
data：需要传入模板页的数据。项目中是异步请求控制器方法得回一串json数据
loadData();
function loaddata(){
$.post( "/Headquarter/GetAllUserInfo", //请求控制器方法得到Json数据 { }, function (data) { var tp1 = document.getElementById(‘tp1‘).innerHTML;// 获取模板页的内容 var html = juicer(userInfo, data);//使用模板引擎渲染json数据到模板userInfo,变量html接收 showTp1.innerHTML = html;//输出 });
}
这里的showTp1是html要输出地方的id。
附部分html部分代码
<table class="table table-bordered table-hover"> <thead> <tr> <th>序号</th> <th>公司名称</th> <th>登录账号</th> <th>密码</th> <th>公司法人</th> <th>邮箱</th> <th>公司注册号</th> <th>联系电话</th> <th>公司地址</th> <th>公司QQ</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody id="showTp1"></tbody>//loadData的地方 </table>
效果图：
原文：http://www.cnblogs.com/Mysdm/p/5911082.html