JQuery EasyUI DataGrid行添加水印

代码

复制代码
css:
.water-mark::after {
        content: '有异议';
        position: absolute;
        left: 460px;
        top: 40px;
        color: rgb(255 0 0);
        transform: rotate(-25deg);
        pointer-events: none;
        z-index: 10;
    }
js:
$('#dgData').datagrid({
                loadMsg: '数据加载中,请稍后......',
                // fitColumns: true,
                autoRowHeight: false,
                height: $(window).height() - 18,
                rownumbers: true,
                striped: true,
                cache: false,
                singleSelect: true,
                pagination: true,
                loadFilter: pagerFilter,
                pageSize: 60,
                pageList: [100, 150, 200],
                toolbar: '#tb',
                columns: cols,
                onLoadSuccess: function (data) {
                    // 遍历所有行,为它们添加水印样式
                    var body = $(this).data().datagrid.dc.body2;
                    body.find('table tbody tr').each(function (index, item) {
                        let h = ((index + 1) * 33.5);
                        if ($(this).find("td:eq(4)").text().includes("撤销申诉")) {
                            //$(this).addClass('water-mark');
                            $(this).after($('<span>有异议<span>').css({
                                'content': '有异议',
                                'position': 'absolute',
                                'left': '460px',
                                'top': h + 'px',
                                'border': '1px solid red',
                                'color': 'rgb(255 0 0)',
                                'transform': 'rotate(-5deg)',
                                'pointer- events': 'none',
                                'z-index': 'none'
                            }));
                        }
                    });
                }
            });
        },

主要代码

onLoadSuccess: function (data) {

// 遍历所有行,为它们添加水印样式

var body = $(this).data().datagrid.dc.body2;

body.find('table tbody tr').each(function (index, item) {

let h = ((index + 1) * 33.5);//设置定位高度

if ($(this).find("td:eq(4)").text().includes("撤销申诉")) {

//控制条件,满足条件after 追加dom元素

(this).after(('<span>有异议<span>').css({

'content': '有异议',

'position': 'absolute',

'left': '460px',

'top': h + 'px',

'border': '1px solid red',

'color': 'rgb(255 0 0)',

'transform': 'rotate(-5deg)',

'pointer- events': 'none',

'z-index': 'none'

}));

}

});

}

相关推荐
java1234_小锋9 分钟前
【技术专题】HTML5 网页技术 - HTML5 语义化标签
前端·html·html5
涛涛ing13 分钟前
2026年,你的JavaScript计数逻辑可以删了:CSS刚刚学会了自己数数
前端
广州华水科技14 分钟前
单北斗GNSS变形监测系统在水库安全监测中的应用与优势
前端
PBitW21 分钟前
行内编辑,如何防止后端未返回,直接全部更新了?
前端·面试
wjjzhbb1 小时前
前端监控:给用户体验装上仪表盘
前端·ux
江湖有缘1 小时前
Docker实战 | Docker部署Minimalist-web-notepad个人笔记本
前端·docker·notepad++
Hilaku2 小时前
为什么我在团队里禁止使用 axios?
前端·javascript·程序员
兮动人2 小时前
Chrome 152 升级后本地请求全挂了?是 LNA 策略在搞事
前端·chrome·lna·local network
JarvanMo2 小时前
让 3D 在 Flutter 中焕发生机:Flutter GPU 与 flutter_scene 实战经验
前端
狂师2 小时前
太强了!GitHub上开源了一款AI自动化测试框架,0代码搞定前后端测试!
前端·后端·测试