layerui模板引擎列表绑定数据

前台模板

前台对应标签

前台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数据

    /// 

    /// 使用模板引擎转化的json数据，只适用于绑定list页面数据
    /// 
    /// 
    /// 
    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();

    }