前台模板
<script id="tpl" type="text/javascript">
{{# for(var i = (d.page-1)*appPageSize, len = d.total>(d.page*appPageSize)?(d.page*appPageSize):d.total; i < len; i++){ }}
<li id="{{d.rows[i].Guid}}" data-state="{{d.rows[i].CheckState}}" onclick="Clickli(this.id)">
<div class="content-box">
<div class="content-title">
<span>{{d.rows[i].NewsTitle}}</span>
}})
</div>
<div class="content-neirong">
<span>{{d.rows[i].NewsContent}}</span>
<span>{{d.rows[i].AddTime}}</span>
</div>
</div>
<div class="content-icon">
<i id="{{d.rows[i].Guid}}" onclick="ClickView(this.id,'/CMS/OA/News/NewsView.html');" class="layui-icon"></i>
</div>
</li>
{{# } }}
</script>
前台对应标签
<div id="content" class="content">
<ul>
<!--<li id="Li1" data-state="1" onclick="Clickli(this.id)">
<div class="content-box">
<div class="content-title">
<span>Layui主要是以象征包容的墨绿作为主色调，由于它给人予深沉感</span>
</div>
<div class="content-neirong">
<span>Layui主要是以象征包容的墨绿作为主色调，由于它给人予深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳来弥补它的色觉疲劳。我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是Layui所追求的价值.</span>
<span>2014-05-08 11:01</span>
</div>
</div>
<div class="content-icon">
<i class="layui-icon"></i>
</div>
</li>-->
</ul>
</div>
前台js方法
var appPageSize = 15; //模板引擎一次加载数
/****模板引擎加懒加载*****
*****data后台传回json数据
*****strType前台html所对应标签id
*************************/
function bindtpl(data, strType) {
data.page = 1;
var gettpl = document.getElementById('tpl').innerHTML;
layui.use('laytpl', function () {
$('#' + strType + ' ul')[0].innerHTML = '';
});
layui.use('flow', function () {
var flow = layui.flow;
flow.load({
elem: '#' + strType + ' ul' //指定列表容器
, scrollElem: '#' + strType //滚动条所在元素，一般不用填，此处只是演示需要。
, done: function (page, next) {
data.page = page;
var lis;
var laytpl = layui.laytpl;
laytpl(gettpl).render(data, function (html) {
lis = html;
});
next(lis, page < (data.total / appPageSize) + 1);
}
});
});
}
后台DataTable表数据转换为json数据
/// <summary>
/// 使用模板引擎转化的json数据，只适用于绑定list页面数据
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string ListJsontpl(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{");
jsonBuilder.AppendFormat("\"total\":{0}, ", dt.Rows.Count);
jsonBuilder.Append("\"rows\":");
jsonBuilder.Append("[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j]);
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
jsonBuilder.Replace("\n", " ");
return jsonBuilder.ToString();
}
