如何在table的每一行添加点击事件

1.0的验收老师提到最多的是:无处不按钮,无处不入口。在后面的开发中牢记了这个思想,行动下移。比如对表格的操作,不能只限于工具栏上的按钮,选中一条数据后需得选按钮,索性不给它设计工具栏,点击哪里都是按钮。

1.html

   这是一个编辑试卷的功能,页面中首先显示试卷的题型,然后点击题型可以进入到题目列表页。

 

[html]  view plain  copy
 print ?
  1. <table id="dg" class="easyui-datagrid" title="编辑试题-显示试卷题型" style="height:65%;width:100%"  
  2.             data-options="rownumbers:true,pagination:true,pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb',  
  3.                 onClickRow:onClickRow">  
  4.             <thead>  
  5.                 <tr>  
  6.                     <th field="map.paperID" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['paperID'];}">paperID</th>   
  7.                     <th field="map.questionTypeId" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['questionTypeId'];}">题型id</th>   
  8.                     <th field="map.tableName" width="70%" align="center" data-options="formatter:function(value, rec){return rec.map['tableName'];}">表名</th>   
  9.                     <th field="map.name" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['name'];}">题型</th>  
  10.                 </tr>  
  11.             </thead>  
  12.         </table>  
  13.         <div id="tb" style="padding: 2px 5px;">   
  14.             <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="view()">预览</a>  
  15.             <a href="#" class="easyui-linkbutton" iconCls="icon-undo"  onclick="back()">返回</a>  
  16.         </div>  


2.js

[javascript]  view plain  copy
 print ?
  1. function onClickRow(rowNum,record){  
  2.          $.messager.confirm('提示','是否要查看题目?'function (r) {   
  3.              if(r){   
  4.                     var paperID = record.map.paperID;//试卷id  
  5.                     var questionTypeId = record.map.questionTypeId;//题型id  
  6.                     var tableName = record.map.tableName;//标明  
  7.                     //跳转到下一页QuestionList  
  8.                     window.location.href ="${pageContext.request.contextPath}/QuestionList?paperID=" + paperID   
  9.                              + '&questionTypeId=' + questionTypeId + '&tableName=' + tableName;  
  10.                 }   
  11.              });  
  12.       }  

   点击行的哪里都能触发该事件

3.controller

[java]  view plain  copy
 print ?
  1. @RequestMapping("/QuestionList")  
  2.     /** 
  3.      * 编辑试题,点击一种题型后,显示题目列表页面 
  4.      * @param   
  5.      * @param   
  6.      * @return void 
  7.      * @exception/throws [违例类型] [违例说明] 
  8.      * @see          [类、类#方法、类#成员] 
  9.      * @deprecated 
  10.      */  
  11.     public String QuestionList(HttpServletRequest request, HttpServletResponse response){  
  12.         String paperID = request.getParameter("paperID"); //试卷表Id  
  13.         String questionTypeId = request.getParameter("questionTypeId");//题型id  
  14.         String tableName = request.getParameter("tableName"); //表名  
  15.         request.setAttribute("paperID",paperID );  
  16.         request.setAttribute("questionTypeId",questionTypeId );  
  17.         request.setAttribute("tableName", tableName);  
  18.         return  "/QuestionList";  
  19.     }  
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值