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

版本:jQuery easyUI 1.3.2

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

首先是HTML部分

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

<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>

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

  1. function formatOper(val,row,index){
  2. return '<a href="#" onclick="editUser('+index+')">修改</a>';
  3. }
  1. function formatOper(val,row,index){
  2. return '<a href="#" onclick="editUser('+index+')">修改</a>';
  3. }

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

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

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

翻阅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自定义按钮列,即最后面的操作列(转)的更多相关文章

  1. easyui datagrid自定义按钮列,即最后面的操作列

    在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class=&q ...

  2. easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  3. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  4. Easyui datagrid自定义排序

    做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...

  5. EasyUI Datagrid 自定义列、Foolter及单元格编辑

    1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...

  6. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

  7. easyui datagrid使用按钮

    $('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns:[[ {fi ...

  8. easyui datagrid 自定义单元格单击与双击事件(Day_38)

    $(function(){ $('#tableId').datagrid({//单击事件   onClickRow:function(rowIndex,rowData){  alert("单 ...

  9. elementUI vue table status的状态列颜色变化和操作列状态显示(停用, 启用)

    <div id="app" style="display: none"> ... <el-table-column prop="st ...

随机推荐

  1. java的字符串操作和for循环的使用

    /* "12 0 99 -7 30 4 100 13" 要求对字符串中的数值进行排序.生成一个数值从小到大新字符串. "-7 0 4 12 13 30 99 100&qu ...

  2. java字符串,包,数组及空心正方形,菱形的实例

    一.数组:相同类型的多个对像引用类型:所有的类,接口,数组,int[] ints(变量名) = new int[3]new:指的是在内存空间重新开辟一块区域 String s1 = "abc ...

  3. Mac终端查看sqlite3数据库、表数据等

    背景: 我们在用FMDB处理iOS数据库时,沙盒里保存的数据库格式为.sqlite3. 当我们需要在模拟器上调试或查看数据库内容时,我们可以直接在终端里查看到. 正文: 1.在沙盒路径找到需要查看到文 ...

  4. NPOI+反射 实现快速导出

    只是觉得这样很方便 记录一下 公司有封装的方法,不过是查出的Table类型,每次用的时候很都很烦,处理数据也不方便,最主要的是我也没耐心去看,反正在我看来很麻烦,用的时候很头疼.还是习惯通过Model ...

  5. [信息安全] 3.HTTPS工作流程

    [信息安全]系列博客:http://www.cnblogs.com/linianhui/category/985957.html 0. 简单回顾 在前面两篇博客中介绍了密码相关的一些基本工具,包括(对 ...

  6. Python面向对象编程(三)

    封装 1.为什么要封装? 封装就是要把数据属性和方法的具体实现细节隐藏起来,只提供一个接口.封装可以不用关心对象是如何构建的 2.封装包括数据的封装和函数的封装,数据的封装是为了保护隐私,函数的封装是 ...

  7. DL4NLP——词表示模型(二)基于神经网络的模型:NPLM;word2vec(CBOW/Skip-gram)

    本文简述了以下内容: 神经概率语言模型NPLM,训练语言模型并同时得到词表示 word2vec:CBOW / Skip-gram,直接以得到词表示为目标的模型 (一)原始CBOW(Continuous ...

  8. 最近任务 && react文章列表

    最近任务 读书 数据分析 react深入学习 可视化大图 移动端入门 [React学习] 入门学习-文本渲染 http://www.cnblogs.com/huxiaoyun90/p/4783663. ...

  9. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  10. JPA Advanced Mappings(映射)

    JPA Advanced Mappings(映射) JPA是一个使用java规范发布的库.因此,它支持所有面向对象的实体持久性概念. 原文链接:http://blogxinxiucan.sh1.new ...