zoukankan      html  css  js  c++  java
  • 图标联动

    实现图标联动,即单击图,表高亮,单击表图高亮。其中主要代码如下:

    myChart.on('click',function (params) {
    		        // 获取table下所有的tr
    		        let trs = $("#table tbody tr");
    		        for (let i = 0;i<trs.length;i++){
    		            // 获取tr下所有的td
    		            let tds = trs.eq(i).find("td");
    		            // 先把之前的标记的success去掉
    		            $("#table tbody tr").eq(i).removeClass('success');
    		            // 如果点击图示的名字和table下的某一个行的第一个td的值一样
    		            if (params.name == tds.eq(0).text()){
    		                //设置success状态
    		                $("#table tbody tr").eq(i).addClass('success');
    		                // 跳转到页面指定的id位置
    		                $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
    		            }
    		        }
    		    });
    		    // 当鼠标落在tr时,显示浮动
    		    $("#table tbody").find("tr").on("mouseenter",function () {
    		        // 获得当前匹配元素的个数
    		        let row = $(this).prevAll().length;
    		        // 获得当前tr下td的名字
    		        let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
    		        // 设置浮动
    		        myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//选中高亮
    		    });
    		    // 当鼠标移开tr时候取消浮动
    		    $("#table tbody").find("tr").on("mouseleave",function () {
    		        // 获得当前匹配元素的个数
    		        let row = $(this).prevAll().length;
    		        // 获得当前tr下td的名字
    		        let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
    		        // 设置浮动
    		        myChart.dispatchAction({ type: 'hideTip', name:name});//选中高亮
    			});
    

     该代码放于个人的setOption()之后即可,其中table位<table></table>的id,效果如下:

     

  • 相关阅读:
    面向对象的思维
    343. 整数拆分
    413. 等差数列划分
    303. 区域和检索
    62. 不同路径
    char类型与int类型相加
    mybatis里面resultmap的问题
    easyui的datagrid如何获取一个对象里面的成员对象里面的属性?
    ==和equls的区别
    泛型的使用思想
  • 原文地址:https://www.cnblogs.com/yangqqq/p/13941266.html
Copyright © 2011-2022 走看看