LayUI 数据表格学习和应用（IT枫斗者）_layui 高度full- 实现原理-优快云博客

本文链接：https://blog.youkuaiyun.com/Andrew_Chenwq/article/details/130551217

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>