layui学习笔记7--数据表格

最新推荐文章于 2024-09-06 09:05:47 发布

yangtz_1999

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量1.3k

点赞数

文章标签： layui table

本文链接：https://blog.csdn.net/Young_Fee/article/details/79474792

版权

数据表格

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模板使用</title>
  <link rel="stylesheet" href="E:/layui/layui/css/layui.css" media="all">
</head>
<body>

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

<script src="E:/layui/layui/layui.js"></script>
<script>

layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: '  ' //数据接口，这个接口的数据必须是json字符串的形式
    ,page: true //开启分页
    ,cols: [[ //表头
       {type: 'numbers', fixed: 'left',width: 80}
      ,{field: 'id', title: 'ID', width:80, sort: true}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177,unresize: false}//unresize 是否禁用拖拽列宽（默认：false）
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
      ,{type: 'checkbox',toolbar: '#barDemo'}
    ]]
  });

});


</script>
<script>
    //监听单元格编辑
    table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if(layEvent === 'detail'){ //查看
        //do somehing
    } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
        });
    } else if(layEvent === 'edit'){ //编辑
        //do something

    }
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <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>

      <!-- 这里同样支持 laytpl 语法，如： -->
      {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
      {{#  } }} 
</script>
</body>
</html>