Nmap LVS Python ISP plot datagridview matlab向上取整 jQuery Mobile vue注册组件 vue传值 vuejs 教程 android实战项目 jquery触发点击事件 js事件绑定 查看oracle连接数 xcode打包 查看mysql是否启动 idea全局替换 kubernetes安装 mysql 导入数据 python随机数 python创建txt文件并写入 python连接mysql数据库 python编程语言 java泛型 java中的继承 java接口怎么写 javaworld java得到当前时间 java安装与配置 java创建对象 网页游戏开发入门 机械下载 马赛克软件 地下城怎么双开 netreflector js保留两位小数 一键隐藏 软件龙头股 松下plc编程软件
当前位置: 首页 > 学习教程  > 编程语言

easyui datagrid 自定义操作按钮 点击切换图标&checkbox加上提示框tooltip

2020/8/11 18:43:26 文章标签:

easyui datagrid 自定义操作按钮 点击切换图标 &checkbox加上提示框tooltip

  • 一、自定义按钮 点击切换图标
    • easyui datagrid添加按钮图片
    • 让按钮显示出来
    • 添加点击事件
      • onclick点击
      • jQuery的click
      • 实现点击一个图标只改变一个图标而不影响全局
  • 二、checkbox加上提示框toottip

一、自定义按钮 点击切换图标

先上图,这是我想实现的效果,可以点击某一个切换图标,也可以点击一个代表全部的按钮让所有图标切换。
未点击:
未点击前
点击一个:
点击一个
点击all:
在这里插入图片描述

easyui datagrid添加按钮图片

 //在 columns: 里定义列
 {
                        title: '<a href="#" name="ignore" class="header easyui-linkbutton"><img src="../images_new/cts/all2.png" style="width: 20px;height: 20px"></a>',
                        field: 'Ignore',
                        width: '5%',
                        align: 'center',
                        halign: 'center',
                        formatter:function (value,row,index) {
                            var str='<a href="javascript:void(0)" name="ignore"  class="button easyui-linkbutton"><img onclick="edit('+index+')" id="'+index+'" src="../images_new/cts/risk.png" style="width: 18px;height: 18px"></a>';
                            return str;
                        }
                    },

让按钮显示出来

//要写在onLoadSuccess: function (data) 里面
$('.datagrid-cell-c3-Ignore .button').linkbutton({plain:true});
$('.datagrid-cell-c3-Ignore .header').linkbutton({plain:false});

添加点击事件

onclick点击

function edit(index) {
	//#risk_issues_list这里是表格的id
	//点击时精确定位到当前行
    $('#risk_issues_list').datagrid('selectRow',index);// 关键在这里
    //获取当前行的数据
    var row = $('#risk_issues_list').datagrid('getSelected');
    if(row){
        $('.datagrid-cell-c3-Ignore .button #'+index+' ').attr('src','../images_new/cts/resolve.png');
    }
}

踩坑:查了很多博客,只看到说获取行,作为一个不是很了解easyui的人就以为是要用行的class/id,即.datagrid-row,一直显示不出来,然后尝试换成table的class——.datagrid,报错Cannot read property ‘options’ of undefined,灵光一现用自己定义的具体的table的id,这样子就能找到了,可以进行点击。

jQuery的click

我本来以为用精确当前行可以只改一个图标,但是是我想太多。这个和jQuery的click显示也没有区别

 $('.datagrid-cell-c3-Ignore .button').click(function(index){
                                $('.datagrid-cell-c3-Ignore .button img').attr('src','../images_new/cts/resolve.png');
                            });

实现点击一个图标只改变一个图标而不影响全局

原来的写法

  $('.datagrid-cell-c3-Ignore .button img').attr('src','../images_new/cts/resolve.png');

这样会点击一个图标全部图标都跟着改变
后来想到可以利用index来实现,即:给img定义 id="’+index+’",最后用$(’.datagrid-cell-c3-Ignore .button #’+index+’ ‘).attr(‘src’,’…/images_new/cts/resolve.png’);来改变图标。

二、checkbox加上提示框toottip

直接上代码吧(不想写了

//在 columns: 里定义列
{
                      title: '忽略风险',
                      field: 'isIgnore',
                      width: '5%',
                      align: 'center',
                      halign: 'center',
                      checkbox:true,
                 },
                 singleSelect:false,
              selectOnCheck:true,//如果为true,单击复选框将永远选择行。如果为false,选择行将不选中复选框。
              checkOnSelect:false,
//要写在onLoadSuccess: function (data) 里面
 $('.datagrid-cell-c3-Ignore .button').tooltip({
                        position: 'bottom',
                        content: '<span style="color:#fff0ff">忽略风险</span>',
                        onShow: function(){
                            $(this).tooltip('tip').css({
                                backgroundColor: '#577399',
                                borderColor: '#577399'
                            });
                        }
                    });
                    $('.datagrid-cell-c3-Ignore .header').tooltip({
                        position: 'bottom',
                        content: '<span style="color:#fff0ff">忽略全部风险</span>',
                        onShow: function(){
                            $(this).tooltip('tip').css({
                                backgroundColor: '#577399',
                                borderColor: '#577399'
                            });
                        }
                    });

本文链接: http://www.dtmao.cc/news_show_100003.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?