全国咨询热线:18720358503

宜州微信小程序开发_Easyui Datagrid自界说按钮列

类别:行业新闻 发布时间:2021-01-11 浏览人次:

Easyui Datagrid自定义按钮列(最后面的操作列)       做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,下面我们来自定义按钮列,具体实现代码,大家参考下本文吧

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

版本:jQuery easyUI 1.3.2

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

首先是HTML部分

 table id="dg" title="学生信息" 
 url="${ctx}listStudent.do" 
 toolbar="#toolbar" pagination="true" 
 rownumbers="false" fitColumns="true" singleSelect="true" 
 thead 
 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" 修改 /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自界说按钮列

Easyui Datagrid自定按键列(最终面的实际操作列) 做新项目的情况下由于要求,要在报表的最终加上一列实际操作列,easyUI好像沒有出示这类作用,下边大家来源于界定按键列,实际完成...

2021-01-11
解剖鲫鱼保送清华,解剖鲫鱼保送清华,规则告诉

重要词:解剖学鲫鱼保送清华大学,解剖学鲫鱼保送清华大学,标准告知你保送其实不比较高考非常容易 现有 2140 人访问 原题目:解剖学一条鲫鱼就可以保送清华大学北京大学?想多了!...

2021-01-11
[科技]基于jQuery果冻式按钮焦点图切换代码

[高新科技]根据jQuery果冻式按键聚焦点图转换编码 :41 访问数:根据jQuery果冻式按键聚焦点图转换编码。它是一款根据jQuery+CSS3完成的照片转换编码。实际效果图以下:完成的编码。ht...

2021-01-11
图书店微信小程序_Vue完成一个返回顶部backToTop组

Vue完成一个回到顶端backToTop部件 回到顶端这一作用用jq完成,好非常容易完成,一个animate相互配合scrollTo就拿下了今日大家来试一下vue封裝一个原生态js完成的回到顶端; 写起來够戗...

2021-01-11
探索当前医疗网站应如何进行seo优化

近期,我接到了一份诊疗服务平台明细。该企业已经做整容手术治疗。历经剖析,发了现网站内90%的重要词排行1-5是百度搜索自身的商品,6-10个是加权67八个网站。而且有三个网站与百...

2021-01-11
微信小程序收费吗_get post jsonp三种数据交互形式

get post jsonp三种数据信息互动方式案例详细说明 文中根据案例给大伙儿详尽详细介绍了get post jsonp三种数据信息互动方式,十分非常好,具备参照效仿使用价值,必须的的朋友参照...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信