前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layui 的那些事

Layui 的那些事

原创
作者头像
谭广健
发布2023-12-20 11:42:22
1720
发布2023-12-20 11:42:22
举报
文章被收录于专栏:谭广健的专栏谭广健的专栏

前端框架之前接触过不少,目前在用Layui比较顺手;不过也遇到不少雷和坑。这里就分享一下那些雷和坑。。首先说一下表格中有时候ID或NAME是无法取值,只能通过lay-filter指定一个name,然后获得。例如:

代码语言:javascript
复制
<select id="Device_Type" name="Device_Type" lay-filter='Device_Type'>
</select>
<script>
 var postData = data.field;
 var Device_Type =postData.Device_Type;//这样就获得select的值
</script>

这个只是小菜一碟,我们还是直接上点主菜吧。

代码语言:javascript
复制
    layui.use(['jquery', 'form', 'table', 'commonTable', 'common'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table, commonTable = layui.commonTable
        common = layui.common;
        var ids = new Array();
        var table_data = new Array();
        toolbarDemo.innerHTML = "<div>当前已经选:<input type='text' id='Cdata' style='width:500px;border:0;background-color:rgba(0,0,0,0);'/></div>";
        commonTable.rendertable({
            elem: '#currentTableId',
            id: 'currentTableId',
            url: '/QAManage/QAWX/GetGridJson',
            defaultToolbar: [],
            skin: 'line',
            limit: 20,
            search: false,
            cols: [[          
                { checkbox: true,width: 60, fixed: true },
                { field: 'Name', title: '姓名', width: 100, sort: true, filter: true },
                { field: 'Telnet', title: '电话', width: 160, sort: true, filter: true },
                { field: 'Memo', title: '备注', width: 180, sort: true, filter: true },
                { field: 'TypeName', title: '角色', width: 80, sort: true, filter: true
                    ,templet: function (d) {
                        switch (d.TypeName) {                          
                            case "B":
                                return ("生产")
                            case "C":
                                return ("售后")
                            case "D":
                                return ("品管")
                            default:
                                return ("全能")
                        }                     
                    }                
                },
                {
                    field: 'DataLevel', title: '当前状态', width: 80,
                    templet: function (d) {
                        return top.clients.dataItems["DataLevel"][d.DataLevel] == null ? "" : top.clients.dataItems["DataLevel"][d.DataLevel];
                    }
                },
                { field: 'F_CreatorTime', title: '注册时间', width: 120, sort: true, filter: { type: 'date[yyyy/MM/dd HH:mm:ss]' } },         
                
            ]],
            done: function (res, curr, count) {               
                $('th[data-field=' + 0 + '] input[type="checkbox"]').prop('disabled',true);
                for (var i = 0; i < res.data.length; i++) {
                    for (var j = 0; j < ids.length; j++) {                       
                        if (res.data[i].Id == ids[j].Id) {                          
                            res.data[i]["LAY_CHECKED"] = 'true';                          
                            var index = res.data[i]['LAY_TABLE_INDEX'];
                            $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                            $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                        }
                    }
                }
                
                var checkStatus = table.checkStatus('my-table');
                if (checkStatus.isAll) {
                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                }
                //得到所有数据
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }

        });
        table.on('checkbox(currentTableFilter)', function (obj) {
            var Idata = obj.data;
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据           
            console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
            //---------------------------------------
            if (obj.checked == true) {
                if (obj.type == 'one') {           
                    ids.push(obj.data);
                } else {
                    for (var i = 0; i < table_data.length; i++) {                 
                        ids.push(table_data[i]);
                    }
                }
            } else {
                if (obj.type == 'one') {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i].Id == obj.data.Id) {
                            ids.remove(i);
                        }
                    }
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (ids[i].Id == table_data[j].Id) {
                                ids.remove(i);
                            }
                        }
                    }
                }
            }
            var Name = "";
            ids.forEach(function (item, index, arr) {
                Name += item.Name+"、"
            });
            $("#Cdata").val(Name);
            //---------------------------------------
        });       
        form.on('submit(CloseBtn)', function (data) {
            var data = table.checkStatus('currentTableId').data;
            if (data.length == 0) {
                common.modalMsg("未选中数据", "warning");
                return;
            };         
            console.log(data)
            var currentWindow = common.parentWindow();//定义父窗口         
            //currentWindow.Auto_STAFF(JSON.stringify(data));
            currentWindow.Auto_STAFF(JSON.stringify(ids));
            
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);// 关闭子窗口
        });
        
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            commonTable.reloadtable({
                elem: 'currentTableId',
                curr: 1,
                where: { keyword: data.field.txt_keyword }
            });
            return false;
        });
        wcLoading.close();

    });

//------------------------------
    Array.prototype.remove = function (dx) {
        if (isNaN(dx) || dx > this.length) { return false; }
        for (var i = 0, n = 0; i < this.length; i++) {
            if (this[i] != this[dx]) {
                this[n++] = this[i]
            }
        }
        this.length -= 1
    }

这里就是一个Layui TABLE进行数据展示的代码片段,这里涉及到几个点:1、禁止全选。2、翻页记录。3、父子页数据传输。4、表格格式。这些你看明白没。。还有一个隐藏彩蛋。这里就不公开了。。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档