LayUI中对数据表格的相关操作

最新推荐文章于 2024-02-04 09:00:11 发布

石河

最新推荐文章于 2024-02-04 09:00:11 发布

阅读量810

点赞数 1

本文链接：https://blog.csdn.net/adahh/article/details/112431889

版权

1、有关表格渲染

在layui中表格渲染一般分为：方法渲染、自动渲染以及转换静态表格三种方式。一般我们常用方法渲染的方式去渲染表格。
在这里插入图片描述方法渲染的步骤如下：
1、定义一个空白的表格

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

2、执行渲染

table.render({
           elem: '#demo1',
           url: 'json/user.json', //数据接口
           height: 315,
           page: true,//开启分页
           cols: [[//表头
               //设置序列号
               {field: 'aa', type: 'numbers'},
               {field: 'aa', type: 'checkbox'},
               {field: 'id', title: '用户ID', sort: true, width: 100},
               {field: 'username', title: '用户名', width: 80,edit:'text'},
               {field: 'sex', title: '性别', width: 80},
               {field: '操作', toolbar: '#barDemo'}
               // {field:'city',title:'城市',width:80},
               // {field:'sign',title:'个性签名',width:100},
               // {field:'experience',title:'经验',width:80},
               // {field:'logins',title:'登录状态',width:80},
               ......

2、有关表格工具栏的监听

首先，创建表格工具栏

<!--    表格工具栏-->
    <script id="toolbarDemo">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中行数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </script>

然后，监听工具栏事件

 table.on('toolbar(test)', function (obj) {
            console.log(obj);
            //obj.config对象中可以获取id属性值，即表示当前容器的ID属性值
            //获取表格被选中的记录对象，返回数据
            var checkStatus = table.checkStatus(obj.config.id);
            //获取事件名
            var eventName = obj.event;
            //判断事件名，执行对应的代码
            switch (eventName) {
                case 'getCheckData':
                    //获取被选中记录的数组
                    var arr = checkStatus.data;
                    //将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                    break;
                case 'getCheckLength':
                    var arr = checkStatus.data;
                    layer.msg('选中了'+arr.length+'个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll?'yes':'no');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('这是一个自定义图标')
                    break;
            }
        });

3、有关表头工具栏的监听

首先，创建表格工具栏

<!--    表格工具栏-->
    <script id="barDemo">
        <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>
    </script>

然后，监听工具栏事件

table.on('tool(test)',function (obj) {
            //得到当前操作的tr相关信息
            var data = obj.data;
            if (obj.event==='del'){
                //确认框
                layer.confirm('确定要删除嘛？',function (index) {
                    //删除指定tr
                    obj.del();
                    //index 当前弹出层的下标、通过下标关闭弹出层
                    layer.close(index);
                });
            }else if(obj.event === 'edit'){
                //输入框
                layer.prompt({
                    //表单元素的类型 0=文本框 1=密码框 2=文本域
                    formType:0,
                    title:'name',
                    value:data.username
                },function (value,index) {
                    //修改指定单元格的值
                    //value表示输入的值
                    obj.update({
                        username:value
                    });
                    layer.close(index);
                    });
            }
        });

4、监听单元格编辑事件

 /**
         * 监听单元格编辑事件
         *  表头设置edit属性，单元格编辑类型（默认不开启） 目前只支持text输入框
         */
        table.on('edit(test)',function (obj) {
            //获取修改后的值
            var value = obj.value;
            //得到当前修改的tr对象
            var data = obj.data;


        });

5、效果图

在这里插入图片描述

6、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格2</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>

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


<!--    表格工具栏-->
    <script id="toolbarDemo">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中行数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>

    </script>

<!--    表头工具栏-->
    <script id="barDemo">
        <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>
    </script>
<script>
    layui.use(['table','layer'],function () {
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem: '#demo1',
            url: 'json/user.json',
            height: 315,
            page: true,
            cols: [[
                //设置序列号
                {field: 'aa', type: 'numbers'},
                {field: 'aa', type: 'checkbox'},
                {field: 'id', title: '用户ID', sort: true, width: 100},
                {field: 'username', title: '用户名', width: 80,edit:'text'},
                {field: 'sex', title: '性别', width: 80},
                {field: '操作', toolbar: '#barDemo'}
                // {field:'city',title:'城市',width:80},
                // {field:'sign',title:'个性签名',width:100},
                // {field:'experience',title:'经验',width:80},
                // {field:'logins',title:'登录状态',width:80},
                // {field:'wealth',title:'财富',width:80,sort: true},
                // {field:'classify',title:'分类',width:80},
                // {field:'score',title:'分数',width:80,sort: true}
            ]],
            toolbar: '#toolbarDemo'

        });
        /**
         * 头监听事件
         * 语法：
         *  table.on('toolbar(demo)',function(obj){
         *
         *  });
         */
        table.on('toolbar(test)', function (obj) {
            console.log(obj);
            //obj.config对象中可以获取id属性值，即表示当前容器的ID属性值
            //获取表格被选中的记录对象，返回数据
            var checkStatus = table.checkStatus(obj.config.id);
            //获取事件名
            var eventName = obj.event;
            //判断事件名，执行对应的代码
            switch (eventName) {
                case 'getCheckData':
                    //获取被选中记录的数组
                    var arr = checkStatus.data;
                    //将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                    break;
                case 'getCheckLength':
                    var arr = checkStatus.data;
                    layer.msg('选中了'+arr.length+'个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll?'yes':'no');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('这是一个自定义图标')
                    break;
            }
        });

        /**
         * 监听工具事件
         */
        table.on('tool(test)',function (obj) {
            //得到当前操作的tr相关信息
            var data = obj.data;
            if (obj.event==='del'){
                //确认框
                layer.confirm('确定要删除嘛？',function (index) {
                    //删除指定tr
                    obj.del();
                    //index 当前弹出层的下标、通过下标关闭弹出层
                    layer.close(index);
                });
            }else if(obj.event === 'edit'){
                //输入框
                layer.prompt({
                    //表单元素的类型 0=文本框 1=密码框 2=文本域
                    formType:0,
                    title:'name',
                    value:data.username
                },function (value,index) {
                    //修改指定单元格的值
                    //value表示输入的值
                    obj.update({
                        username:value
                    });
                    layer.close(index);
                    });
            }
        });
        /**
         * 监听单元格编辑事件
         *  表头设置edit属性，单元格编辑类型（默认不开启） 目前只支持text输入框
         */
        table.on('edit(test)',function (obj) {
            //获取修改后的值
            var value = obj.value;
            //得到当前修改的tr对象
            var data = obj.data;


        });
    });
</script>
</body>
</html>

石河

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
LayUI中对数据表格的相关操作

1、有关表格渲染在layui中表格渲染一般分为：方法渲染、自动渲染以及转换静态表格三种方式。一般我们常用方法渲染的方式去渲染表格。方法渲染的步骤如下：1、定义一个空白的表格<table id="demo1" lay-filter="test"></table>2、执行渲染table.render({ elem: '#demo1', url: 'json/user.json', //数据接口 height:
复制链接

扫一扫