当前位置: 首页>前端>正文

LayUI 数据表格学习和应用(IT枫斗者)

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>
  • 这里列出的是比较常见的事件,当然也可以监听复选框选择、单元格的编辑、行单双击事件等。



https://www.xamrdz.com/web/2mq1951553.html

相关文章: