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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JS event使用方法详解
2008/04/28 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
angular多语言配置详解
2019/05/16 Javascript
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
运行Python编写的程序方法实例
2020/10/21 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
现金出纳岗位职责
2014/03/15 职场文书
开学典礼策划方案
2014/05/28 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
财务会计岗位职责
2015/02/03 职场文书
孔庙导游词
2015/02/04 职场文书
保送生自荐信
2015/03/06 职场文书