写个舒服的数据表格

Dear 丶 2022-09-10 14:29 132阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_15_color_FFFFFF_t_70_g_se_x_16]

<script>
            layui.use('table', function() { 
                var table = layui.table;
    
                table.render({ 
                    elem: '#test',
                    url: '../JSON/demo1.json'
                        //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                        // ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        // title: '提示'
                        // ,layEvent: 'LAYTABLE_TIPS'
                        // ,icon: 'layui-icon-tips'
                        // }]
                        ,
                    title: '用户数据表',
                    cols: [
                        [
                            // {type: 'checkbox', fixed: 'left'}
                             { 
                                field: 'id',
                                title: '订单号',
                                width: 150,
                                fixed: 'left',
                                unresize: true,
                                sort: true
                            }, { 
                                field: 'username',
                                title: '本金余额变动',
                                width: 150,
                                // edit: 'text',
    							sort: true
                            }, { 
                                field: 'email',
                                title: '本金余额',
                                width: 120,
                                // edit: 'text',
    							sort: true
                            }, { 
                                field: 'sex',
                                title: '赠金金额变动',
                                width: 150,
                                // edit: 'text',
                                sort: true
                            }, { 
                                field: 'city',
                                title: '赠金金额',
                                width: 120,
    							sort: true
                            }, { 
                                field: 'sign',
                                title: '变更类型',
    							 width: 120,
    							sort: true
                            }, { 
                                field: 'experience',
                                title: '操作用户',
                                width: 120,
                                sort: true
                            }, { 
                                field: 'ip',
                                title: '操作时间',
                                width: 150,
    							sort: true
                            }, { 
                                field: 'logins',
                                title: '操作描述',
                                width: 140,
                                sort: true
                            } 
                        ]
                    ],
                    done: function(res, curr, count) { 
                     
                        $('th').css({ 
                            'background': '#5c6bc8',
                            'color': '#fff',
                            'font-weight': '500',
    						'text-align':'center'
    						
                        });
    
    
                        var that = this.elem.next();
                        res.data.forEach(function(item, index) { 
                            //console.log(item.empName);item表示每列显示的数据
                            if (index % 2 == 0) { 
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index +
                                    "']").css({ 
                                    'background-color': 'rgb(50, 58, 90)',
                                    'color': 'white',
    								'text-align':'center'
                                }).addClass('addclass');
                            } else { 
                                var tr = that.find(".layui-table-box tbody tr[data-index='" + index +
                                    "']").css({ 
                                    'background-color': 'rgb(50, 58, 90)',
                                    'color': 'white',
    								'text-align':'center'
                                }).addClass('addclass');
                            }
                        })
                    },
    
                    page: true
                });
    
                //头工具栏事件
                table.on('toolbar(test)', function(obj) { 
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) { 
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;
    
                            //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });
    
                //监听行工具事件
                table.on('tool(test)', function(obj) { 
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') { 
                        layer.confirm('真的删除行么', function(index) { 
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') { 
                        layer.prompt({ 
                            formType: 2,
                            value: data.email
                        }, function(value, index) { 
                            obj.update({ 
                                email: value
                            });
                            layer.close(index);
                        });
                    }
                });
            });
        </script>

调用：

<div class="layuiTable">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
            <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O77yM6K6p5oiR55e06L-3_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/4df7cc34899440dfbed6c67c8e1f371f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 matlab批量合并表格数据,用matlab合并excel表格数据-如何用matlab读取多个excel表格数据，将每个表格数......

用matlab如何识别excel里的单元格是否为合并单元格方法如下：使用函数xlsread读取单个文件。 num=xlsread(filename) filenam

阳光穿透心脏的1/2处/ 2023年01月15日 03:49/ 0 赞/ 481 阅读

相关这样写的 JS 代码看着就很舒服

> 来自公众号：小生方勤 > > 作者：小生方勤如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论： 1. 变量 2. 函数 3. 类 4. 异步

怼烎@/ 2022年12月22日 05:00/ 0 赞/ 149 阅读

相关 Xshell配色方案（舒服）

文章目录 1、新建xcs格式文本 2、打开xshell，导入配置文件 3、配色方案效果图 --------

ゞ浴缸里的玫瑰/ 2022年12月10日 08:52/ 0 赞/ 1092 阅读

相关舒服了...

![format_png][]![format_png 1][]![format_png 2][]![format_png 3][]![format_png 4][]![for

蔚落/ 2022年11月19日 09:54/ 0 赞/ 120 阅读

相关写个舒服的数据表格

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5L2g55qE576O7

Dear 丶/ 2022年09月10日 14:29/ 0 赞/ 133 阅读

相关 wps两个表格对比数据(怎样对两个EXCEL表格数据对比,找出相同和不同的数据?)

在表1中，选中B1单元格输入公式=VLOOKUP(A1,表2!A:A,1,FALSE) 公式往下拉显示\N/A的表示未在表2中找到相同值，其余表示是相同值。方法2

喜欢ヅ旅行/ 2022年09月06日 15:20/ 0 赞/ 533 阅读

相关 Excel检索两个表格中相同的数据

具体方法如下： 1. 首先建立Sheet1和Sheet2两个表格，Sheet1和Sheet2两个中各有姓名列，现在我们就来查找Sheet1中的姓名是否与SHeet2中的重复

约定不等于承诺〃/ 2022年05月15日 09:37/ 0 赞/ 241 阅读

相关数据表格

package testDemo; / @author 作者 E-mail: @version 创建时间：2019年6月5日上午8:44:

缺乏、安全感/ 2021年12月16日 06:21/ 0 赞/ 334 阅读

相关用JavaScript写表格数据的增删改

需求： ========================================== 学号姓名性别年龄操作 01001 王沛沛男 18 删除修改

我会带着你远行/ 2021年09月20日 13:18/ 0 赞/ 256 阅读

相关老Java程序员花一天时间写了个飞机大战，很舒服！

老Java程序员花1天时间做了个飞机大战系列目录 [1. Java俄罗斯方块][1. Java] [2. 老Java程序员花2天写了个连连看][2. _

Love The Way You Lie/ 2021年09月07日 23:08/ 0 赞/ 338 阅读