LayUI 数据表格学习和应用（IT枫斗者）

淡淡的烟草味﹌ 2024-03-22 13:39 23阅读 0赞

## LayUI 数据表格学习和应用 ##

LayUI的数据表格有三种渲染方式，方法渲染、自动渲染、转换数据表格。我用的最多的第一种，方法渲染，直接在HTML网页写一行代码然后剩下的业务逻辑和实现都交给Js去处理。这种方式个人感觉比较容易实现和发现问题，通过id把两者关联起来。下面的篇幅就是介绍这种方式的使用，另外两种也要了解，见到代码能看懂，知道原理是啥就行。下面的方式必须掌握。

### 示例 ###

*      var table = layui.table;
        
        table.render({
            elem: '#userTable'
            ,height: 'full-210'
            ,url: APP.restfulPrefix('/account/um_user/get_all_by_is_manage') //数据接口
            ,where:{is_manager: 1, loginKey:sessionStorage.getItem("account_login_key")}
            ,page: {limit:50} //开启分页
            ,cols: [[ //表头
                {type:'checkbox',width:50, fixed: 'left'}
                ,{field: 'tenantId', title: '机构编码',  width:120}
                ,{field: 'tenantName', title: '机构名称', width:120,}
                ,{field: 'id', title: '账号', width:120, sort: true,toolbar: '#id'}
                ,{field: 'realname', title: '姓名', width:100}
                ,{field: 'nickname', title: '昵称', width:100}
                ,{field: 'mobile', title: '手机', width:120}
                ,{field: 'email', title: '邮箱', width:150}
                ,{fixed: 'right', title: '管理',width:80, align:'center', toolbar: '#baruserTable'}
            ]]
            ,done: function(res) {
                dataTablePage.currentPage = res.currentPage;
                dataTablePage.hasPrevious = res.hasPrevious;
                dataTablePage.hasNext = res.hasNext;
            }
        });
 *  上面的是JS中的代码，表格进行渲染操作；当然了在HTML网页中还有一个layui表格的标签啦，
 *      <table id="userTable" lay-filter="test"></table>
 *  示例中的第一句话你也可以不写，在你的函数中直接把要用的组件全部一起声明。
 *  例如：
 *      var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var element = layui.element;
        var dataTablePage = {
            currentPage: 1, // 当前页
            hasPrevious: false, // 存在上一页
            hasNext: true // 存在下一页
        };
 *  对于上面渲染中出现的参数，每个都是有特定意义的。
 *  elem:我的理解是代表表格的唯一标识，也就是id；
 *  height：是表格的高度；可以直接设置、也可以设置比如：‘full-210’这种形式
 *  url：是数据接口，也就是你从后端拿数据是走的哪个controller，哪个mapping，让浏览器可以通过映射找到对应的那个具体的方法。
 *  where：是数据接口之外带的另外字段或者额外条件，有时候可以作为查询条件；
 *  page：是否开启分页，你还可以通过设置一系列参数来表名怎么分页、是否显示首尾页、是否开启哈希等
 *  cols：是表的具体内容，也是你要显示的数据放的地方、里面有超多的参数：field是字段名、width是宽度、title是名称、sort是否开启排序、在cols你也可以开启是否是可编辑的状态、可以设置该列是复选框还是单选框还是数字栏目、可以绑定模板让你的单元格多样化、可以绑定工具条完成一些炫酷的操作、可以设置样式等等；学习表格，把cols里面的参数过一遍就能把握很多了，它是表格中核心中的核心，让你的表格天马行空，随心所欲的表达你的想法。当然每一个搞懂记住是不现实的，但是能记住大概就够了，很多东西的熟练使用需要积累经验。
 *  done：是表格渲染成功之后进行的操作，也就是拿到数据并显示成功之后的回调函数。

### 表格常见的八个基础方法： ###

*  table.set(options); //设定全局默认参数。options即各项基础参数
 *  table.on(‘event(filter)’, callback); //事件监听。event为内置事件名，filter为容器lay-filter设定的值
 *  table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。
 *  table.checkStatus(id); //获取表格选中行
 *  table.render(options); //用于表格方法级渲染，核心方法。
 *  table.reload(id, options); //表格重载
 *  table.resize(id); //重置表格尺寸
 *  table.exportFile(id, data, type); //导出数据

### 实用技巧： ###

*  获取选中行，比如说用在删除的时候判断你有没有选中数据、也可以用这种方式拿到你选中的数据，比之前用Jquery的方法去找方便的多，这是直接拿，拿到之后再去做相应的处理。
 *      var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
        
        console.log(checkStatus.data) //获取选中行的数据
        
        console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        
        console.log(checkStatus.isAll ) //表格是否全选
 *  导出任意数据
 *      table.exportFile(['名字','性别','年龄'], [
        
        ['张三','男','20'],
        
        ['李四','女','18'],
        
        ['王五','女','19']
        
        ], 'csv'); //默认导出 csv，也可以为：xls
 *  事件监听：事件所监听的默认是table模块容器，当然你也可以使用filter选择你要具体监听某一个容器，使用事件过滤器即可。一般比较常见的比如，点击编辑选项弹出一个弹出层，然后进行信息的修改，然后再监听表单的提交。
 *      //以复选框事件为例
        
        table.on('checkbox(test)', function(obj){
        
        console.log(obj)
        
        });
        监听单元格事件
        
        layui.use('table', function(){
          var table = layui.table; 
          //监听单元格事件
          table.on('tool(demoEvent)', function(obj){
            var data = obj.data;
            if(obj.event === 'setSign'){
              layer.prompt({
                formType: 2
                ,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
                ,value: data.sign
              }, function(value, index){
                layer.close(index);   
                //这里一般是发送修改的Ajax请求 
                //同步更新表格和缓存对应的值
                obj.update({
                  sign: value
                });
              });
            }
          });
        });
 *  监听头部工具栏事件
 *      原始的容器
        
        <table id="demo" lay-filter="test"></table>
        
        工具栏模板(就是操作选项中的三个按钮，都对应一个相应的事件)
        
        <script type="text/html" id="toolbarDemo">
        
        <div class="layui-btn-container">
        
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        
        </div>
 *      监听事件
        
        table.on('toolbar(test)', function(obj){
        
        var checkStatus = table.checkStatus(obj.config.id);
        
        switch(obj.event){
        
        case 'add':
        
               layer.msg('添加');break;
        
        case 'delete':
        
                layer.msg('删除');break;
        
        case 'update':
        
                layer.msg('编辑');break;};
        
        });
        
        </script>
 *  这里列出的是比较常见的事件，当然也可以监听复选框选择、单元格的编辑、行单双击事件等。