easyui datagrid自定义按钮列,即最后面的操作列(转)
EasyUI 操作 自定义 按钮 最后 Datagrid
2023-09-27 14:24:56 时间
做项目的时候因为需求,要在表格的最后添加一列操作列,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="#" 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');
这两句话就是获取选中的行
具体效果如图
相关文章
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理六(二十四)
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
- EASYUI Dialog的基本使用
- [转]jQuery EasyUI自定义DataGrid的Editor
- easyui-datagrid 的loader属性用法
- [转]easyui 获取数据表格中选中行的数据 Get selected row data from...
- 完整的Jquery-easyUI显示分页数据例子
- EasyUI 在mvc中的引入与使用
- EasyUI-在iframe里获取现阶段选中的tab的标题
- EasyUI-右键菜单变灰不可用效果
- EasyUI-在行内进行表格的增删改操作
- 《jQuery EasyUI开发指南》——1.2 管理系统需求分析
- easyUI的控件
- easyui datagrid json 格式
- easy ui easyui-linkbutton 禁用、启用
- 项目经历——EasyUI的检索和更新操作
- VS CODE jQuery/easyui代码片段
- jquery easyui slider 滚动条 改为按年份滚动 类似谷歌地球样式
- easyui datagrid treegrid 取消行选中、取消高亮
- EasyUI DataGrid 根据ID选中行(转载)
- easyui中带checkbox框的tree