页面显示效果:
html页面设置datagrid的field字段:
userList是从struts2传到前台的一个集合,该集合是用户的集合,每个用户有一个消耗,field根据userList来设置多个消耗字段
<s:iterator value="userList" id="user" status='s'>
<s:if test="(#s.index+1)==userList.size()">
<th field="consumptions<s:property value='%{#s.index+1}'/>" width="75" sortable="false" align="center" editor="{type:'numberbox',options:{precision:3}}"
formatter="consumption2Formatter">终审<s:hidden uname='%{#user.id}' value="%{#user.id}" theme="simple"/></th>
</s:if>
<s:else>
<th field="consumptions<s:property value='%{#s.index+1}'/>" width="75" sortable="false" align="center" editor="{type:'numberbox',options:{precision:3}}"
formatter="consumption2Formatter"><s:property value="#s.index+1"/>审<s:hidden uname='%{#user.id}' value="%{#user.id}" theme="simple"/></th>
</s:else>
</s:iterator>
在JS中formatter函数的设置:(在userList中的每个用户对应的消耗的格式为:1审,2审...,最后面为终审,这里是根据1,2...在consumption2Formatter中设置索引值,来获取row.consumptions中取值,row.consumptions是每个用户的消耗集合,它是一个数组,和userList集合对应)
/**
* 从row的consumptions中根据索引值num取对应的消耗值
*/
function consumption2Formatter(value, row,rowIndex){
var title = this.title;
title = title.substring(0,title.indexOf("审"));
var num = title.replace(/[^0-9]/ig,"");
if(!num || num==""){
//表明为终审
num = row.consumptions[row.consumptions.length-1];
}else{
num = row.consumptions[parseInt(num)-1];
}
return num;
}
easyui的datagrid的双击事件:
onDblClickCell: function(rowIndex, field, value){
}
如果利用formatter设置显示的内容的时候,在该事件中会发现value为undefined,那么在onDblClickCell函数中如何获取单元格的实际值呢?
/**
* @table datagrid的id字符串
* @param rowIndex 被双击的行的索引值
* @param field 被双击的行的字段名
*/
function getFormatterValue(table,rowIndex,field){
var val = $("#datagridPanel").find("#datagrid-row-r1-2-"+rowIndex+"").find(".datagrid-cell.datagrid-cell-c1-"+field+"").text();
return parseFloat(val);
}
可以F12在控制台,查看datagrid的元素组成,ID为datagrid-row-r1-2-"+rowIndex+"获取td,然后td中是一个div,在div中是formatter中设置的显示内容
datagrid的大致结构如上