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'
                            }));
                        }
                    });
                }

 

相关推荐

  1. Python 音频添加水印

    2024-03-24 03:46:01       47 阅读
  2. SpringBoot实现PDF添加水印

    2024-03-24 03:46:01       48 阅读
  3. SpringBoot 实现 PDF 添加水印

    2024-03-24 03:46:01       56 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-24 03:46:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-24 03:46:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-24 03:46:01       87 阅读
  4. Python语言-面向对象

    2024-03-24 03:46:01       96 阅读

热门阅读

  1. os.path模块(二)

    2024-03-24 03:46:01       40 阅读
  2. Go语言介绍

    2024-03-24 03:46:01       50 阅读
  3. 如何快速上手vue?

    2024-03-24 03:46:01       45 阅读
  4. vivado 布线、路线_设计

    2024-03-24 03:46:01       49 阅读
  5. 素数问题 python

    2024-03-24 03:46:01       38 阅读
  6. 家庭影院组成原理

    2024-03-24 03:46:01       41 阅读
  7. openSSH学习

    2024-03-24 03:46:01       46 阅读