用layui方法进行表格的渲染

Posted 2021-09-01 小刘编码员

前言：各位csdn的源员们，大家好。我是小刘，初来乍到请大家多多指教，这是第n次发表博客，如有错误请大家观看后谅解，并在评论区留下您宝贵的意见，小刘将会用最大的努力去改正以及认真对待每一次代码的编写，请大家一定要多多包涵，你们的支持是我继续努力的最大动力，当然大家觉得不错可以关注我喔，带你走遍代码的每一个角落，让你感受代码的神奇之处。
 

首先我向大家透露一点点小方法，一定要认真观看喔！
 

本次用到的编程软件：vs2015
 

本次涉及到的内容：登录页面的布局

//定义全局变量
        var layer, layuiTable;
        var tbStudent;

1.这是第一步：通过声明变量去定义，在这里就是声明了layer 方法以及layuitable表格去定义函数的，第二个呢他的作用会在后面的表格渲染起作用的！

//加载弹出层 与table表格模块 callback
        layui.use(['table', 'layer'], function () {
            layer = layui.layer;//弹出层
            layuiTable = layui.table;//表格   

2.这边呢就是加载弹出层   然后与table表格模块 callback 这个我也不知道是什么意思，，待会去网上查查，编程最重要的是一定会在我网上寻找出有作用的知识点进行课外的补充，下面两句就是定义前面声明的变量 

//方法渲染表格，执行渲染
            tbStudent=layuiTable.render({
                //配置项
                elem: '#demo',//指定原始table的选择器
              //  page: true,
             //   url: '/layer/SelectStudent',
                //表头的配置

3.第三步就是方法渲染表格的钱部分  在做的时候也是有多种方式去编写的 首先就是配置项 然后再指定原始的table的选择器中  然后就是判断page方法  ur也是一个路径的选择可以放在这里，也可以再后面的表格重载中选择路径

 //表头的配置
                
                cols: [[
                    { type: 'radio', title: '序号', skin: 'demo-class',id:'BoxID' },
                    { field: 'BoxName', title: '姓名',  },
                    { field: 'BoxSex', title: '性别',  },
                    { field: 'BoxTelphone', title: '电话号码', width:120,  },
                    { field: 'BoxAddress', title: '地址',  },
                    { field: 'BoxSchool', title: '学校',  },
                   { templet: customOp, title: '操作', width: 180, },
                ]],

4.到了这一步就是表格的配置了 ，就是显示在表头上的哪些数据进行渲染，最前面的就是序号的选择，有单项 双xiang，还有其他功能等等，都是第一个工具栏搞出来的方法 ，最后面那个就是对数据进行操作的自定义模板 ，这些功能就是非常的方便使用了。

  data: [] ,//加载本地数据的配置项
              //  toolbar: true,
                //page:true
                even: true,
                page: {
                    limit: 4,
                    limits: [1, 2, 3, 4]
                }
            });
            //表格reload重载
        }); tabSearchStudent();

5.然后这一步就是加载数据的重要部分了，data[]这个方法就是加载本地的配置项  page这个方法呢就是进行数据的分页效果 limit也就是说一页只有4条数据显示在页面中。然后利用表格的重载定义在前面，表格的重载方法应该在后面使用。

 //自定义列模板
        function customOp(rowData) {
           console.log(rowData.BoxID);
           var str = '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="openInsertModal()"> 新增</button><button type="button" class="layui-btn  layui-btn-xs" id="BoxID"type="checkbox" name="StudentID" value=""onclick="openModifyModal(' + rowData.BoxID + ')"> 修改</button><button class="layui-btn  layui-btn-xs layui-btn-danger" onclick="deleteBox(' + rowData.BoxID + ')">删除</button>'
            return str;
        }

6.到了这里就是对自定义模板进行了设置，里面就存在了新增 修改 删除 这三种方法在里面。所以这就是自定义模板

 function tabSearchStudent() {
            var strSearch = document.getElementById("txtSearch").value;
            //layuiTable.reload() 表格的重载
            //重载方法一：
            layuiTable.reload("demo", {
                //url请求的地址
                url: '/layer/SelectStudent',
                //条件 需要传递到控制器中的参数
               toolbar: true,
               where: {
                   //前面的表示，对应控制器方法中的形参
                   strSearch: strSearch
                   //后面的表示页面获取的数据
                }
              });

7.这一步呢就是表格重载刷新的方法了，先用js的方法声明表格的ID,然后在后面就是给路径，也就是后面控制器所表明的方法了。