Easyui Datagrid自定义按钮列(最后面的操作列)
时间:2019-03-30
本文章向大家介绍Easyui Datagrid自定义按钮列(最后面的操作列),主要包括Easyui Datagrid自定义按钮列(最后面的操作列)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
做项目的时候因为需求,要在表格的最后添加一列操作列,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自定义按钮列(最后面的操作列),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 用python搭建一个校园维基网站(二)—— 可编辑内容的首页的创建
- Django博客教程(四):让 django 完成翻译—迁移数据库模型
- Calendar类中add/set/roll方法的区别
- 如何构建一个分布式爬虫(理论篇)
- Python微型Web框架Bottle源码分析
- VirtualBox相关问题总结
- Java 枚举7常见种用法
- ALI的Tensorflow炼成与GAN科普
- LaTeX内容总结
- (60) 随机读写文件及其应用 - 实现一个简单的KV数据库 / 计算机程序的思维逻辑
- java反射机制
- 突发 |“永恒之蓝”漏洞紧急应对方案
- 摩拜单车爬虫源码及解析
- 用Python实现微信接口(三)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 图像处理笔记(4)----OpenCV对象追踪
- MySQL 数据恢复
- 【从0到1学习边缘容器系列2】之 边缘应用管理
- 【从0到1学习边缘容器系列-3】应用容灾之边缘自治
- Hacking with iOS: SwiftUI Edition - 里程碑:项目 13 - 15
- HDU 1896 优先队列用法
- 蓝桥杯省内模拟赛C++
- C++ STL (标准模板库) 详细内容讲解
- 蓝桥杯 试题 基础练习 分解质因数
- 蓝桥杯 试题 基础练习 FJ的字符串
- 蓝桥杯 试题 基础练习 龟兔赛跑预测
- 问题 1432: [蓝桥杯][2013年第四届真题]剪格子
- 问题 1426: [蓝桥杯][历届试题]九宫重排
- mock测试及jacoco覆盖率
- HDU 1495 非常可乐 最简单的的解决方案