现今的前端框架繁多，有例如Vue，bootstrap，react，angular等等，都是功能强大又易于开发的，最近由于要做一个独立的小管理系统，在搜索框架时找到了一个可模块化的前端框架：LayUI

LayUI官方网站： https://www.layui.com/ ，经典模块化前端框架，由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案

当然，可模块化开发的前端框架也很多，例如：EasyUI，ElementUI，众多的JS插件等等，最后用这个LayUI来做呢，最重要的一点就是对后端开发人员来说太方便了，前端完全由JS库集成，

只需要按照文档规范编写代码，提供数据接口，剩下的事就不用我们操心了。

此次我选用LayUI里的数据表格这个模块：

layui.use('table', function () {
    var table = layui.table;
    var userid = "";
    //第一个实例
    table.render({
        elem: '#demo'
        , skin: 'line' //行边框风格
        , height: 312
        , url: '/Default.aspx/showTable_ms' //数据接口
        , method: 'post'
        , contentType: 'application/json'
        , page: true //开启分页
        , cols: [[ //表头
            { field: 'ID', title: 'ID', fixed: 'left', align: 'center' }
            , { field: 'Title', title: '编号', align: 'center' }
            , {
                field: 'UserId', title: '', templet: function (d) {
                    return "";
                }
            }
            , { field: '', title: '' }
            , { field: '', title: '' }
            , { field: '', title: '' }
            , { title: '', fixed: 'right', align: 'center' }
            , {
                title: '付款', fixed: 'right', align: 'center', templet: function (d) {
                    if (d.States == "0") {
                        return '<span><a style="color: #c00;" href="">审核中</a></span>';
                    } else if (d.States == "1") {
                       
                        return '<span><a style="color: #FF5722;" href="/pay/' + d.Title + "_" + d.ID + '">去付款</a></span>';
                    }
                    else if (d.States == "2") {
                        return '<span><a style="color: #009688;" href="">已付款</a></span>';
                    }
                    else if (d.States == "3") {
                        return '<span><a href="">已结束</a></span>';
                    }
                }
            }
            , {
                field: 'States', title: '状态', fixed: 'right', align: 'center', templet: function (d) {
                    if (d.States == "0") {
                        return '<span style="color: #c00;">审核中</span>';
                    }
                    else if (d.States == "1") {
                        return '<span style="color: #FF5722;">待注册</span>';
                    }
                    else if (d.States == "2") {
                        return '<span style="color: #009688;">注册成功</span>';
                    }
                    else if (d.States == "3") {
                        return '<span>已结束</span>';
                    }
                }
            }
            , { title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }
        ]]
        , parseData: function (res) { //res 即为原始返回的数据
            console.log(res.d);
            var res1 = strToJson(res.d);
            return {
                "code": res1.code, //解析接口状态
                "msg": res1.msg, //解析提示文本
                "count": res1.count, //解析数据长度
                "data": res1.data //解析数据列表
            };

        }
    });
    //监听工具条 
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if (layEvent === 'detail') { //查看
            //do somehing
            if (data.States == "0") {
                layer.msg("请耐心等待审核");
            }
            else if (data.States == "1") {
                layer.open({
                    title: ['操作'],
                    type: 2,
                    area: ['400px', '300px'],
                    content: '/Check/tan1.aspx?id=' + data.ID + '&uid=' + data.UserId,
                    yes: function (index) { }
                });
            }
            //layer.alert("查看");
        }
        //else if (layEvent === 'del') { //删除
        //    layer.confirm('真的删除行么', function (index) {
        //        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        //        layer.close(index);
        //        //向服务端发送删除指令
        //    });
        //}
        //else if (layEvent === 'edit') { //编辑
        //    //do something

        //    //同步更新缓存对应的值
        //    obj.update({
        //        username: '123'
        //        , title: 'xxx'
        //    });
        //}
        //else if (layEvent === 'LAYTABLE_TIPS') {
        //    layer.alert('Hi，头部工具栏扩展的右侧图标。');
        //}
    });

});
function strToJson(str) {
    var json = eval('(' + str + ')');
    return json;
}

后端接口我把之前使用的 当前aspx中的ajax访问当前.cs里的方法 结合了一下：

[WebMethod]
    public static string showTable_ms()
    {
        BasicPage bp = new BasicPage();
        string strUsername3 = Basic.Engine.CookieDo.GetCookie("webUserName", "str_key");
        string UserID = "";
        SqlDataReader myreader = bp.getRead("select * from TbUser where UserState='0' and  UserName='" + strUsername3 + "' ");
        if (myreader.Read())
        {
            UserID = myreader["userid"].ToString();
        }
        myreader.Close();

        DataTable dtblNews = new DataTable();
        int intNews;

        dtblNews = bp.SelectDataBase("tbuser_ms", "select * from tbuser_ms where userid=" + UserID + " order by id desc").Tables[0];
        intNews = dtblNews.Rows.Count;

        string json = string.Empty;
        try
        {
            if (dtblNews == null || dtblNews.Rows.Count == 0)
            {
                return "";
            }
            json = "{";
            json += "\"code\":0,\"msg\":\"\",\"count\":" + intNews + ",";
            json += "\"data\":[";
            for (int i = 0; i < dtblNews.Rows.Count; i++)
            {
                json += "{";
                for (int j = 0; j < dtblNews.Columns.Count; j++)
                {
                    json += "\"" + dtblNews.Columns[j].ColumnName + "\":\"" + dtblNews.Rows[i][j].ToString() + "\"";
                    if (j != dtblNews.Columns.Count - 1)
                    {
                        json += ",";
                    }
                }
                json += "}";
                if (i != dtblNews.Rows.Count - 1)
                {
                    json += ",";
                }
            }
            json += "]";
            json += "}";
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }

        return json;
    }

接口返回的必须是JSON格式的，在使用此方法后，需在前端把 return的值重新解析成JSON，否则只能是undefined，简直大坑

当然，嫌麻烦的朋友，可以直接用其他空页面Response.Write 输出，此方法可直接获取到。

最后，个人用下来的感觉是不错的，即拿即用，简直是搬砖利器，如果对自定义有更高的要求，还是推荐使用主流框架。

毕竟LayUI虽说高度集成，但是限制也是在这了：

1、很难将layui整合到现有的项目中，当前项目已经开始使用了其他框架的话，会与LayUI发生兼容问题

2、如果一个全新的项目, 从开始时就按照layui的标准来开发, 那么当你需要在项目中引入其他库时, 必须进行手动的包装, 

     使其能够被layui的模块加载器加载, 具体的例子可以参见layui中jQuery是如何变成layui模块的.

只要克服这两个困难，或者完全没有这些顾虑的小伙伴，快用起来吧。