zoukankan      html  css  js  c++  java
  • easyUI 鼠标悬停某行提示

     

      最近参与公司的电子档案系统的开发,需求是需要用户鼠标悬停某一行时,需要根据后台业务数据进行提示。

      档案系统开发采用的框架是struts2+mybatis+spring+easyUI开发,而前端的easyUI官方并不提供类似的功能,查找资料后,在别人的样本中找到了类似功能,通过流云大神开发的easyUI的拓展功能包实现鼠标悬停行提示,具体如下:

      

     1 js代码片段:
     2 $(function(){
     3         $('#resultDatas').datagrid({
     4                url:"/GTDA/CadastreManage/daScanMng_findLand_RegisterCardByStateForPage?status=2",
     5             autoRowHeight:true,
     6             rownumbers:true,
     7             fitColumns:true,
     8             fit:true,
     9             pagination:true,
    10             singleSelect:true,
    11             columns:[[
    12                 {field:'arch_guid',title:'',align:'center',
    13                     formatter:function(value,row,index){
    14                         if(row.arch_guid==undefined||row.arch_guid=='') return ;
    15                         var del = '<div class="datagrid-cell-check" ><input type="checkbox" name="arch_guid" value=""/></div>';
    16                         return del;
    17                     }
    18                 },
    19                 {field:'archid',title:'档案编号',100,align:'center'},
    20                 {field:'archName',title:'题名',100,align:'center'},
    21                 {field:'qlr',title:'土地权利人',100,align:'center'},
    22                 {field:'tdzh',title:'土地证号',100,align:'center'},
    23                 {field:'zl',title:'坐落',100,align:'center'},
    24                 {field:'djk_guid',title:'',0,align:'center'},
    25                 {field:'returnMark',title:'',0,align:'center'},
    26             ]],
    27             toolbar:'#tb',
    28             onSelect: function(rowId,rowData){
    29                     selectId = rowData.djk_guid;
    30                     selectName = rowData.archid;
    31             },
    32             rowStyler: function(index,row){
    33                 if (row.returnMark == '1'){
    34                     return 'background-color:yellow;';
    35                 }
    36             },
    37             rowTooltip: function (index, row) {
    38                 console.info(row);
    39                 if(row.returnMark == '1'){
    40                      var text = "此档案为退回件(需修正)" ;
    41                     return $("<span></span>").css("color", "Red").text(text);
    42                 }
    43             }
    44         });


    rowTooltip即通过拓展的插件实现的鼠标悬停提示。需要引入的插件如下:

    script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.datagrid.js"></script>
    <script type="text/javascript" src="<%=path%>/scripts/easyui/jquery.jdirk.js"></script>
    <script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.js"></script>
    <script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.menu.js"></script>
    <script type="text/javascript" src="<%=path%>/scripts/easyui/jeasyui.extensions.panel.js"></script>
    

      最主要拓展包是:jeasyui.extensions.datagrid.js,其他的包是此包的拓展包。流云二次开发DEMO:http://sshe.jeasyuicn.com/index.jsp ,在此特别敬谢alongSelf(http://www.cnblogs.com/alongSelf/)提供的帮助。

  • 相关阅读:
    【SpringBoot】常用Starter介绍和整合模板引擎Freemaker、thymeleaf
    【SpringBoot】SpringBoot拦截器实战和 Servlet3.0自定义Filter、Listener
    【SpringBoot】单元测试进阶实战、自定义异常处理、t部署war项目到tomcat9和启动原理讲解
    【SpringBoot】SpringBoot热部署和配置文件自动注入实战
    IntelliJ IDEA备忘
    接口与抽象类
    泛型(11)-泛型与数组
    泛型(10)-泛型擦除与转换
    泛型(9)-泛型方法与方法重载
    泛型(8)-Java7的"菱形"语法与泛型构造器
  • 原文地址:https://www.cnblogs.com/HEWU10/p/alongSelf.html
Copyright © 2011-2022 走看看