layerui模板引擎列表绑定数据

前台模板

<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>
                ![]({{GetCheckState(d.rows[i].CheckState)}})
            </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>
                    ![](/img/state/tongguo.png)
                </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();

    }