layui数据表格轻松实现点击某行某列跳转

最新推荐文章于 2022-03-03 15:28:08 发布

原创最新推荐文章于 2022-03-03 15:28:08 发布 · 9.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#layui #数据表格 #超链接 #跳转 #下钻

本文介绍如何使用layui数据表格实现在点击特定单元格时跳转到详情页面的方法。通过自定义模板属性和函数，实现了点击未入组显示详细信息的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作过程中，遇到layui数据表格实现点击跳转的问题，总结如下

需要实现的效果如下，点击未入组可以查看详情：

实现代码：


function skip(code){
	reading('../deptdimension/detailtable?dept='+code+'&startTime='+$('#startTime').val());
	
}

//先初始化加载首页，十条数据
//showReocrd(1,10);
layui.use(['form','layer','table'], function(){
          var table = layui.table
          ,form = layui.form,$=layui.$;
          table.render({
              elem: '#test'  //绑定table id
                  ,url:'${path}/deptdimension/pageList/'  //数据请求路径
            ,cellMinWidth: 200
            ,cols: [[
                {field:'DEPT_NAME', title: '科室名称'}
                ,{field:'BASE_COUNT', title: '总人数', sort: true}
                ,{field:'PARTAKE_COUNT', title: '参与分组人数', sort: true}
                ,{field:'DISCHARGE_NUM',  title: '入组数'}
                ,{field:'INGROUP_RATE', title: '入组率（%）', sort: true}
,{
	 field: "ZS",
	 title: "未入组总人数",
	 sort: true,
	 templet: '<div><a class="iconfont icon-chakanbaogao" style="margin-left: 3%; color: #2196F3;border-radius: 5px; cursor: pointer;text-decoration: underline;" target="_blank" onclick="skip({{d.DEPT_CODE}})">{{ d.ZS }}</a></div>'
	}           ,{field:'NOT_ENTER_COUNT', title: '未入组人数'}
               ,{field:'INDAY_ERROR_COUNT', title: '大于60天人数'}
               ,{field:'ERROR_COUNT', title: '质控未通过人数', sort: true}

            
            ]]
            ,page: true   //开启分页
            ,limit:10   //默认十条数据一页
            ,limits:[10,20,30,50]  //数据分页条
            ,id: 'testReload'  
            ,startTime:'2018'
          });
 
          var $ = layui.$, active = {
        		    reload: function(){
        		    var startTime = $('#startTime');
                          var  dept = $('#dept'); 
                      /*     var demoReload = $('#demoReload'); */
        		      
        		      //执行重载
        		      table.reload('testReload', {
        		        page: {
        		          curr: 1 //重新从第 1 页开始
        		        }
        		        ,where: {
        		          
        		        	  /* id: demoReload.val() */
        		         	startTime: startTime.val(),
      	                	dept: dept.val() 
        		        
        		        }
        		      });
        		    }
        		  };
        		  
        		  $('.layui-btn').on('click', function(){
        		    var type = $(this).data('type');
        		    active[type] ? active[type].call(this) : '';
        		  });
        		  
 
        		
});

关键点：layui方法渲染中的template属性。