Layui中遇到的一些问题

发布时间 2023-12-06 16:24:33作者: Akaiiii

Layui通过template实现对单元格样式的改变

1. Layui通过template实现对单元格样式的改变


ListR为数据集合

点击查看代码
function Escape(ListR) {
        var ListData = [];
        ListData.push({ type: 'checkbox', fixed: 'left' })
        //获取系统参数表数据
        MaterialTypeArr = [@Html.Raw(DataManager.GetJsonData("MaterialType"))]

        ListR.forEach(function (element) {
            if (element.Isvisible != 0) {
                var hide;
                var templet;
                if (element.FieldName == "MaterialPrice") {
                    templet = function (d) {
                        res = d.Price+="¥"
                        return res
                    }
                }
                if (element.FieldName == "SupplierID") {
                    hide = true;
                }
                if (element.FieldName == "SupplierName") {
                    hide = true;
                }

                if (element.FieldName == "MaterialType") {
                    templet = function (d) {
                        res = MaterialTypeArr.find(item => item.value == d.MaterialType).text
                        return res
                    }
                }

                if (element.FieldName == "AuditStatus") {
                    templet = function (d) {
                        if (d.AuditStatus === '正常') {
                            return '<span style="color:#41ed78;font-weight:600">' + d.AuditStatus + '</span>';
                        }
                        else if (d.AuditStatus === '待审核') {
                            return '<span style="color:#fedc5e;font-weight:600">' + d.AuditStatus + '</span>';
                        }
                        else if (d.AuditStatus === '禁用') {
                            return '<span style="color:#ff4444;font-weight:600">' + d.AuditStatus + '</span>';
                        }
                    }
                }


                ListData.push({
                    field: element.FieldName,
                    title: element.Displaytext,
                    width: element.Width,
                    templet: templet,
                    hide: hide
                })
            }
        })
        return ListData
    }

2. Layui通过Jquery, 监听表格行单击事件,单击表格行后勾选复选框

点击查看代码
    // 表格单击行勾选复选框
    $(document).on("click", ".layui-table-body table.layui-table tbody tr", function (e) {
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkCell.length > 0) {
            checkCell.click();
        }
    });
    // 表格点击行出发复选框后,阻止向上冒泡
    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });