记录layui的表格方法渲染

1、导入需要的文件，在layui的官网下载，路径改成自己的

<link rel="stylesheet" href="~/Content/css/layui.css" media="all">

<script src="~/Content/js/layui.js"></script>

2、html中只需要放入一下的table就行

<table id="demo" lay-filter="test"></table>

3、js编写

layui.use('table', function () {

                初始化表格实例
                var table = layui.table;

                数据请求
                table.render({
                    elem: '#demo'

                     后台请求地址
                    , url: '/User/GetFilter' //数据接口
                    , page: true //开启分页
                    , defaultToolbar: ['filter', 'print', 'exports']

                     为table指定id
                    , id: 'testReload'

                     配置你的数据表表头信息
                    , cols: [[ //表头
                        { field: 'Id', title: 'ID', sort: true, fixed: 'left' }
                        , { field: 'Name', title: '用户名' }
                        , { field: 'SexInfo', title: '性别',  sort: true }
                        , { field: 'DepartmentId', title: '部分编号' }
                        , { field: 'UserId', title: '用户编号' }
                        , { field: 'CreateTime', title: '创建时间', sort: true }

                         此处是编辑或删除栏的配置，此处数据不需要从后台传入
                        , { field: 'right', title: '操作', align: 'center', toolbar: '#barDemo' }
                    ]]
                });
                //监听工具条，此方法用来监听操作栏里的编辑或删除按钮
                table.on('tool(test)', function (obj) {

                    //data中存放的是你点击的那行的数据
                    var data = obj.data;
                    console.log(data);

                    //点击删除按钮
                    if (obj.event === 'del')
                    {
                        var id = data["Id"];
                        $('input[name=id_hidden]').val(id);
                        $.ajax({
                            url: '/User/DeleteUser',
                            type: 'POST',
                            dataType: "json",
                            data: { "id": id },
                            success: function (data) {
                                if (data == "成功") {
                                    window.location.reload();
                                }
                                else {
                                    alert("删除失败");
                                }
                            },
                        });
                    }

                    //点击编辑按钮
                    else if (obj.event === 'edit') {
                        $('.add_title').html("修改");
                        var id = data["Id"];
                        var name = data["Name"];
                        var sexinfo = data["SexInfo"];
                        var departmentid = data["DepartmentId"];
                        var userid = data["UserId"];
                        $('input[name=id_hidden]').val(id);
                        $('.Name').val(name);
                        $('.layui-input.layui-unselect').val(sexinfo);
                        $('select[name="select_SexInfo"]').val(sexinfo);
                        $('.Departmentid').val(departmentid);
                        $('.UserId').val(userid);
                        $('.div_add_info').css("display", "block");
                    }
                });

                //此方法是用来匹配点击事件
                var $ = layui.$, active = {

                    //判断点击事件为reload
                    reload: function () {
                        var username = $(".username").val();
                        var departmentid = $(".departmentid").val();

                        table数据重载，传入的参数为id，此id是在上面的render中配置的id
                        table.reload('testReload', {

                            //传入额外参数
                            where: {
                                username: username,
                                departmentid: departmentid,
                                isfilter: 1
                            }
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                };

                //绑定元素的点击事件，用来识别所要执行方法的类别

                $('.layui-btn.select_btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });

//此出配置的是编辑跟删除按钮，因为不需要从后台传入，所要需要放在配置中

<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>

4、后台编写

//用的是get请求方式

public ActionResult GetFilter(int page, int limit, string username="", string departmentid="", int isfilter=0)
        {
            List<UserEntity> filterlist = new List<UserEntity>();
            //没有筛选请求，数据全部返回
            int startlimit = (page - 1) * limit;
            int endlimit = page * limit;
            if (isfilter == 0)
            {
                filterlist = UserQuery(string.Format("SELECT * FROM UserEntity limit {0},{1}",startlimit,endlimit));
            }
            //有筛选请求
            else
            {
                //将传递过来的departmentid转换为int类型
                int departmentid_int;
                int.TryParse(departmentid, out departmentid_int);
                if (departmentid == "")
                {
                    filterlist = UserQuery(string.Format("SELECT * FROM UserEntity WHERE name like '{0}' limit {1},{2}", "%" + username + "%",startlimit,endlimit));
                }
                else
                {
                    filterlist = UserQuery(string.Format("SELECT * FROM UserEntity WHERE name like '{0}' and departmentid = {1} limit {2},{3}", "%" + username + "%", departmentid_int,startlimit,endlimit));
                }
            }

            //此处返回的是json数据，layui识别code，默认为0一定要传，然后是msg,count,data，data里放的就是你表格中所要使用的数据，具体的后台数据返回格式可以看官网的api
            return Json(new { code = 0, msg = "", count = 1000, data = filterlist }, JsonRequestBehavior.AllowGet);
        }