Easyui Datagrid自定义按钮列(最后面的操作列)


Posted in Javascript onJuly 13, 2017

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现

版本:jQuery easyUI 1.3.2

这里我的实现方式是采用HTML形式,js方式暂时还没用到

首先是HTML部分

<table id="dg" title="学生信息" class="easyui-datagrid" 
      url="${ctx}listStudent.do" 
      toolbar="#toolbar" pagination="true" 
      rownumbers="false" fitColumns="true" singleSelect="true"> 
    <thead> 
      <tr> 
        <th data-options="field:'stuNo',sortable:true,width:20">学号</th> 
        <th data-options="field:'name',width:20">姓名</th> 
        <th data-options="field:'gender',width:20,formatter:formatGender">性别</th> 
        <th data-options="field:'nationality',width:20">名族</th> 
        <th data-options="field:'address',width:50,formatter:formatAddr">家庭地址</th> 
        <th data-options="field:'mobile',width:20">手机号</th> 
        <th data-options="field:'birthday',width:20">出生日期</th> 
        <th data-options="field:'registDate',sortable:true,width:20">入学时间</th> 
        <th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th> 
      </tr> 
    </thead> 
  </table> 
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>

注意红色部分,就是我们的操作列,field的名字随便取,我这里是_operate,关键是formatOper函数

function formatOper(val,row,index){ 
  return '<a href="#" rel="external nofollow" onclick="editUser('+index+')">修改</a>'; 
}

formatOper()函数中有三个参数,val指当前单元格的值,row,当前行对象,index当前行的索引.这里我们就需要这个index

我把这个index传入了一个叫editUser的函数中,为什么要传这个index呢,我们在来看下这个editUser函数

function editUser(index){ 
  $('#dg').datagrid('selectRow',index);// 关键在这里 
  var row = $('#dg').datagrid('getSelected'); 
  if (row){ 
    $('#dlg').dialog('open').dialog('setTitle','修改学生信息'); 
    $('#fm').form('load',row); 
    url = '${ctx}updateStudent.do?id='+row.id; 
  } 
}

翻阅easyUI文档可以发现datagrid有一个方法叫selectRow

selectRow index Select a row, the row index start with 0.

它的作用就是手动选中表格的行,参数就是index值,从0开始

这样,我们就能实时获取到鼠标点击行所对应的数据了 

$('#dg').datagrid('selectRow',index);
var row = $('#dg').datagrid('getSelected');

这两句话就是获取选中的行

具体效果如图 

Easyui Datagrid自定义按钮列(最后面的操作列)

以上所述是小编给大家介绍的Easyui Datagrid自定义按钮列(最后面的操作列),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
svg动画之动态描边效果
Feb 22 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 #Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 #Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
You might like
php 邮件发送问题解决
2014/03/22 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php中使用GD库做验证码
2016/03/31 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python  logging日志打印过程解析
2019/10/22 Python
python实现小世界网络生成
2019/11/21 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Django中FilePathField字段的用法
2020/05/21 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
药剂专业求职信
2014/06/20 职场文书
投资合作意向书范本
2015/05/08 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
python获取对象信息的实例详解
2021/07/07 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python